设置Activity样式为NoTitle类型
修改Activity的android:theme属性,创建AppTheme.Base,继承Theme.AppCompat,让AppTheme继承AppTheme.Base。设置windowActionBar和windowNoTitle,隐藏原有的ActionBar。
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme" parent="AppTheme.Base">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
在布局中添加控件
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#02B226"
android:id="@+id/toolbar">
</android.support.v7.widget.Toolbar>
Activity中初始化ToolBar
//初始化toolbar控件
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
//调用该方法toolBar替换原本的actionBar
setSupportActionBar(toolbar);
添加控件
//添加导航图标
toolbar.setNavigationIcon(R.drawable.bar5);
//添加logo图标
toolbar.setLogo(R.drawable.bar6);
//添加主题,放在setSupportActionBar(toolbar)的前面才能生效
toolbar.setTitle("主题");
//添加主标题
toolbar.setSubtitle("主标题");
添加菜单
在res/menu下定义菜单文件
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item android:id="@+id/action_share"
android:title="@string/share"
android:orderInCategory="1"
android:icon="@drawable/bar1"
app:showAsAction="ifRoom" />
<item android:id="@+id/action_search"
android:title="@string/search"
android:orderInCategory="3"
android:icon="@drawable/bar3"
app:showAsAction="ifRoom" />
<item android:id="@+id/action_settings1"
android:title="设置"
android:orderInCategory="1"
app:showAsAction="never" />
</menu>
item标签中的app:showAsAction属性表示该菜单是隐藏显示还是不隐藏显示,never表示隐藏(右侧会出现三个点,点击后弹出),android:orderInCategory属相表示显示的顺序,隐藏显示值小在上面,值大在下面。不隐藏显示值小在左面,值大在右面。有隐藏显示菜单选项隐藏菜单的三个点按键在最右边。
activity中这是菜单
重写onCreateOptionsMenu()方法
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.barmenu,menu);
return super.onCreateOptionsMenu(menu);
}
运行
菜单设置事件监听
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
String msg = "";
switch (item.getItemId()) {
case R.id.action_share:
msg += "分享";
break;
case R.id.action_search:
msg += "搜索";
break;
case R.id.action_settings1:
msg += "设置";
break;
}
if(!msg.equals("")) {
Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
}
return true;
}
});
ToolBar菜单的其他设置
设置弹出隐藏菜单的三点按键的颜色
在AppTheme样式中添加如下item:
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:textColorSecondary">@color/black</item>
</style>
设置弹出隐藏菜单的背景颜色、字体大小、弹出位置
创建名为ToolbarPopupTheme的样式,然后这只ToolBar布局控件的app:popupTheme=”@style/ToolbarPopupTheme”属性。
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
<!--弹出隐藏菜单的背景颜色-->
<item name="android:colorBackground">@color/white</item>
<!--弹出隐藏菜单的字体颜色-->
<item name="android:textColor">@android:color/black</item>
<!--弹出隐藏菜单的字体大小-->
<item name="android:textSize">16sp</item>
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> <!--新增一个item,用于控制menu-->
</style>
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<!--弹出隐藏菜单的位置-->
<item name="overlapAnchor">false</item> <!--把该属性改为false即可使menu位置位于toolbar之下-->
</style>
DrawerLayout使用
DrawerLayout是一个侧滑布局,在布局中只需要添加V4包中的DrawerLayout空间就可以。在该空间中添加两个子view,放在上面的view为内容展示,放在下面的view为菜单。
<!--
DrawerLayout布局
一般作为根布局,否则可能会出现触摸事件被屏蔽。
-->
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="bo.yi.chu.test2.MainActivity">
<!--
内容布局
内容布局要放在侧滑布局的前面
-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/rl_content"
android:background="#fff">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tv"
android:layout_centerInParent="true"
android:text="这里是内容"
android:textSize="14sp"
android:textColor="#323232"/>
</RelativeLayout>
<!--
侧滑布局
侧滑布局必须设置layout_gravity属性,start/left表示从左侧滑出,right表示从右侧滑出。
不设置该属性会报错。
-->
<RelativeLayout
android:layout_width="300dp"
android:layout_height="match_parent"
android:id="@+id/rl_menu"
android:layout_gravity="left"
android:background="#fff">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="这里是侧滑内容"
android:textSize="14sp"
android:textColor="#323232"/>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
DrawerLayout的开和关
在代码中控制DrawerLayout的开关
/*
关闭侧滑菜单,参数可以为菜单布局View
drawerLayout.closeDrawer(rlMenu);
*/
/*
开启侧滑菜单,参数可以为菜单布局View
drawerLayout.openDrawer(rlMenu);
*/
DrawerLayout和ToolBar的组合使用
创建DrawerLayout的监听器
//创建DrawerLayout开关的监听器
actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close){
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
};
actionBarDrawerToggle.syncState();
drawerLayout.addDrawerListener(actionBarDrawerToggle);
对bar的设置
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
运行
ToolBar的左侧会自动出现一个箭头、三横杠切换的图标。颜色设置和ToolBar隐藏菜单的三点图标一致。
NavigationView的使用
DrawerLayout的菜单部分通常用NavigationView来做。
在布局文件中加入NavigationView控件,作为DrawerLayout的菜单。
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#035698"
app:menu="@menu/ngvmenu"
app:headerLayout="@layout/ngv_head"/>
NavigationView的菜单布局
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="none">
<item
android:id="@+id/nav_me"
android:title="我"
android:icon="@drawable/ngv1"/>
<item
android:id="@+id/nav_friend"
android:title="好友"
android:icon="@drawable/ngv2"/>
<item
android:id="@+id/nav_notification"
android:title="通知"
android:icon="@drawable/ngv3"/>
<item
android:id="@+id/nav_message"
android:title="私信"
android:icon="@drawable/ngv4"
/>
</group>
<group android:checkableBehavior="none"
android:id="@+id/group_manage">
<item
android:id="@+id/nav_manage"
android:title="应用管理"
android:icon="@drawable/ngv5"/>
</group>
<group
android:checkableBehavior="none"
android:id="@+id/group_settings">
<item android:id="@+id/nav_theme"
android:title="主题风格"/>
<item android:id="@+id/nav_night"
android:title="夜间模式"/>
<item android:id="@+id/nav_setting"
android:title="设置"/>
<item android:id="@+id/nav_suggestion"
android:title="意见反馈"/>
<item android:id="@+id/nav_about"
android:title="关于"/>
</group>
</menu>
需要给group设置id,不同的菜单组之间才会出现分割线。
NavigationView的头布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:src="@drawable/ngvhead1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="登录/注册"
android:textSize="16sp"
android:textColor="#ffffff"/>
</LinearLayout>