DrawerLayout、Toolbar 的详细用法

2017-04-11 本文已影响200人 _Binguner

利用 toolbar + drawerLayout 可以实现点击标题栏右上角按钮弹出侧滑菜单的功能，例如网易云音乐或者 Google Play

1. toolbar 的设置

打开 res/value/styls.xml 文件，创建另一套 style 属性

<style name="AppTheme.base" parent="Theme.AppCompat">
       <item name="windowActionBar">false</item>
       <item name="colorPrimaryDark">#ff0000</item>
       <item name="colorPrimary">#ff0000</item>
       <item name="android:windowBackground">@color/colorPrimaryDark</item>
       <item name="android:windowNoTitle">true</item>
       <item name="windowNoTitle">true</item>
</style>

布局颜色.png

在 activity_main 中添加 Toolbar

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary">
    </android.support.v7.widget.Toolbar>

设置 background 后才可以使 Toolbar 使用我们定义的颜色设置

在 MainActivity 中声明 Toolbar

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

设置 Toolbar 中的控件

        toolbar.setTitle("Test Title");
        toolbar.setSubtitle("This is substitle");
        //toolbar.setLogo(R.drawable.ic_launcher); 可以在 Navigation后 设置一个 logo
        toolbar.setSubtitleTextColor(getResources().getColor(R.color.colorGray)); //设置二级标题的颜色
        toolbar.setTitleTextColor(getResources().getColor(R.color.colorBlack)); //设置标题的颜色
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.drawable.menu_24);   //setNavigationIcon 需要放在 setSupportActionBar 之后才会生效。

Toolbar 中的控件

设置上一步中的 onCreateOptionsMenu

先在 res/menu/ 下创建一个 toolbar_menu.xml 文件

<?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">
   <item
       android:id="@+id/tooLbar_menu"
       android:icon="@drawable/search_24"
       app:showAsAction="always"
       android:title="搜索">
   </item>
</menu>

然后在 MainActivity 中通过 onCreateOptionsMenu 方法填充进去创建的布局文件

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_menu,menu);    
        return true;
    }

给该按钮添加点击事件（需要设置在 setSupportActionBar 之后才有作用。）

        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                String msg = "";
                switch (item.getItemId()) {
                    case R.id.tooLbar_menu:
                        msg += "Hello World!!!!!!!!!!!!";
                        break;
                    default:
                        break;
                }
                if(!msg.equals("")){
                    Toast.makeText(MainActivity.this,msg,Toast.LENGTH_SHORT).show();
                }
                return true;
            }
        });

设置 Toolbar 的小缺点

小缺点布局

首先修改 toolbar_menu.xml 的内容

<?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">
    <item
        android:id="@+id/tooLbar_menu"
        android:icon="@drawable/search_24"
        android:title="搜索"
        app:showAsAction="always"/>
    <item
        android:id="@+id/itema"
        android:title="item1"
        app:showAsAction="never" />     //设置成 never 会自动在 Toolbar 的右侧生成一个小缺点图标
    <item
        android:id="@+id/itemb"
        android:title="item1"
        android:orderInCategory="100"
        app:showAsAction="never" />
    <item
        android:id="@+id/itemc"
        android:title="item1"
        android:orderInCategory="200"
        app:showAsAction="never" />
</menu>

但自动生成的缺点图标是官方自带的小黑点，需要在另外一些设置 (有两种方法)：

方法一：

在 styles.xml 下创建一个 toolbar_style

    <style name="toolbar_style" parent="AppTheme.base">
        <item name="actionOverflowButtonStyle">@style/ActionButton.Overflow</item>
    </style>
    <style name="ActionButton.Overflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
        <item name="android:src">@drawable/setting_poing_white_24</item>
    </style>
```language

在 Toolbar 的设置中添加 Theme

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/toolbar_style"
            android:background="?attr/colorPrimary">
        </android.support.v7.widget.Toolbar>

方法二：

在 Toolbar 中直接添加 popupTheme

app:popupTheme="@drawable/setting_poing_white_24"

2. 设置 DrawerLayout

在 build.gradle 中添加 compile 'com.android.support:design:25.3.1' 并 Sync now

设置布局

在 activity_main.xml 中创建一个 DrawerLayout 布局

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/drawer_layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   </android.support.v4.widget.DrawerLayout>

在 DrawerLayout 中设置两个布局，第一个为主布局，第二个为滑动菜单的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout 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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.nenguou.learnloading.MainActivity">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary">

        </android.support.v7.widget.Toolbar>

        <TextView
            android:id="@+id/TextView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolbar"
            android:text="Hello World!" />

    </RelativeLayout>
    
    //NavigationView 是 Google 在 5.0 后退出的菜单栏布局，包括头部（headerLayout）和菜单 （menu）两部分
    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"  //设置菜单的出现位置，start/left 为左，end/right 为右
        android:background="?attr/colorPrimary"     //设置菜单的背景颜色，不设置的话为透明效果
        app:headerLayout="@layout/header_layout"    //设置头部
        app:menu="@menu/menu_main"                  //设置菜单（菜单中若想出现分割线，可以将一组 item 放在一个 group 里，并且每个 group 都有 id）
        app:itemIconTint="#FFFFFF"                  //设置菜单里图标的统一颜色，另一种显示图标原始颜色的方法在下文介绍
        />

</android.support.v4.widget.DrawerLayout>

给 NavigationView 里的选项设置点击事件

在MainActivity 中声明 NavigationView

private NavigationView navigationView;

给 NavigationView 里的选项设置点击事件

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                String msg = "";
                switch (item.getItemId()){
                    case R.id.item1:
                        msg += "This is Item1!!!";
                        drawerLayout.closeDrawers();    //关闭菜单栏
                        break;
                    case R.id.item2:
                        msg += "This is Item2";
                        drawerLayout.closeDrawers();
                        break;
                    case R.id.item3:
                        msg += "This is Item3";
                        drawerLayout.closeDrawers();
                        break;
                    case R.id.item4:
                        msg += "This is Item4";
                        drawerLayout.closeDrawers();
                        break;
                    default:
                        break;
                }
                if(!msg.equals("")){
                    Toast.makeText(MainActivity.this,msg,Toast.LENGTH_SHORT).show();
                }
                //drawerLayout.closeDrawers(); 任何一个按钮被点击，都会通过 closeDrawers 方法关闭导航栏
                return true;
            }
        });

在 Java 代码里使每个选项的图片显示自己的颜色

        navigationView.setItemIconTintList(null);

点击导航按钮打开侧边栏

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
        }
        return super.onOptionsItemSelected(item);
    }

欢迎关注我的博客、简书、CSDN、GitHub

DrawerLayout、Toolbar 的详细用法

1. toolbar 的设置

打开 res/value/styls.xml 文件，创建另一套 style 属性

在 activity_main 中添加 Toolbar

在 MainActivity 中声明 Toolbar

设置 Toolbar 中的控件

设置上一步中的 onCreateOptionsMenu

设置 Toolbar 的小缺点

方法一：

方法二：

2. 设置 DrawerLayout

在 build.gradle 中添加 compile 'com.android.support:design:25.3.1' 并 Sync now

设置布局

给 NavigationView 里的选项设置点击事件

猜你喜欢

热点阅读