ToolBar+DrawerLayout+NavigationView

设置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隐藏菜单的三点图标一致。

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>

运行

这里写图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章