Google官方navigation drawer详细讲解

来源：互联网发布：silverlight5 for mac 编辑：程序博客网时间：2024/06/10 18:51

稍微研究了下谷歌侧滑栏官方的侧滑栏这边给大家讲解它的具体结构

显示Activity_main的xml代码

<?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"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:fitsSystemWindows="true"    tools:openDrawer="start"    android:layout_height="match_parent">    <include layout="@layout/toolbar"/>    <android.support.design.widget.NavigationView        android:id="@+id/item_NavigationView"        android:layout_gravity="start"        android:fitsSystemWindows="true"        android:layout_width="wrap_content"        android:layout_height="match_parent"        app:menu="@menu/activity_main2_drawer">    </android.support.design.widget.NavigationView></android.support.v4.widget.DrawerLayout>

android:fitsSystemWindows="true"    tools:openDrawer="start"

这两行要加可以在预览的时候看出来注意布局要用DrawerLayout，里面包含工具栏(内容栏包含在toolbar的布局里稍后有代码)和侧滑栏，内容视图include包含一个layout，要写在侧滑栏之前，侧滑栏的layout_gravity设置它是在左还是在右，在左是start右是end，app:menu这行是设置的它的列表按钮代码如下就是包含它的一些列表按钮

<?xml version="1.0" encoding="utf-8"?><menu    xmlns:android="http://schemas.android.com/apk/res/android">    <group android:checkableBehavior="single">        <item            android:id="@+id/item_01"            android:icon="@drawable/ic_menu_camera"            android:title="Item_01" />        <item            android:id="@+id/Item_02"            android:icon="@drawable/ic_menu_gallery"            android:title="Item_02" />        <item            android:id="@+id/Item_03"            android:icon="@drawable/ic_menu_slideshow"            android:title="Item_03" />        <item            android:id="@+id/Item_04"            android:icon="@drawable/ic_menu_manage"            android:title="Item_04" />    </group>    <item android:title="666">        <menu>            <item                android:id="@+id/Item_05"                android:icon="@drawable/ic_menu_share"                android:title="Item_05" />            <item                android:id="@+id/Item_06"                android:icon="@drawable/ic_menu_send"                android:title="Item_06" />        </menu>    </item></menu>

然后是toolbar的代码

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:orientation="vertical">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/AppTheme.AppBarOverlay">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="wrap_content"            app:popupTheme="@style/AppTheme.PopupOverlay"/>    </android.support.design.widget.AppBarLayout>    <include layout="@layout/content_layout"/></LinearLayout>

AppBarLayout里面包含一个Toolbar就是标题栏，下面包含一个内容布局，内容布局代码不贴了空的,还有就是要把原来的标题栏干掉否则会出问题

<item name="windowActionBar">false</item><item name="windowNoTitle">true</item>

打开styles.xml在它的AppTheme加入这两行即可，上面就是布局的一些基本概念，这样做完你就可以在屏幕左侧侧滑出一个菜单栏和显示一些按钮，不过什么功能都没有，然后就是关键的时候了贴代码

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //显示toolbar栏        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.activity_main);        //把toolbar和drawer这个绑定到一起，使其可以显示侧滑按钮并操作，并监听手势以改变按钮样式        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(                this,                drawer,                toolbar,                R.string.navigation_drawer_open,                R.string.navigation_drawer_close);        //设置监听滑动，只要滑动了那个按钮就会相应发生改变        drawer.setDrawerListener(toggle);        //设置执行显示到toolbar上面        toggle.syncState();        //获取到侧滑栏，并设置它的监听事件        NavigationView navigationView = (NavigationView) findViewById(R.id.item_NavigationView);        navigationView.setNavigationItemSelectedListener(this);    }    //恩设置侧滑栏在出现的时候按下back(返回按钮)不是直接退到桌面而是返回到内容界面    @Override    public void onBackPressed() {        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.activity_main);        if (drawer.isDrawerOpen(GravityCompat.START)) {            drawer.closeDrawer(GravityCompat.START);        } else {            super.onBackPressed();        }    }    //设置策划栏的监听事件    @Override    public boolean onNavigationItemSelected(@NonNull MenuItem item) {        switch (item.getItemId()) {            case R.id.item_01 :                Toast.makeText(this, "Item_01", Toast.LENGTH_SHORT).show();                break;            case R.id.Item_02 :                Toast.makeText(this, "Item_02", Toast.LENGTH_SHORT).show();                break;            case R.id.Item_03 :                Toast.makeText(this, "Item_03", Toast.LENGTH_SHORT).show();                break;            case R.id.Item_04 :                Toast.makeText(this, "Item_04", Toast.LENGTH_SHORT).show();                break;            default:                break;        }        //按下按钮后关闭侧滑栏关闭侧滑        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.activity_main);        drawer.closeDrawer(GravityCompat.START);        return true;    }}

一行一行解释下面这个就是把写好的toolbar显示出来，因为你看看Activity_main.xml里面，我们的标题栏是不是包含着内容布局后面跟着一个侧滑栏你不把他显示什么都没有

        //显示toolbar栏        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);

然后是这个我把注释都写好了，这段的作用就是把标题栏左上角那个按钮弄出来，并且按下去可以跳出侧滑栏，在滑动的时候按钮动画会改变

DrawerLayout drawer = (DrawerLayout) findViewById(R.id.activity_main);//把toolbar和drawer这个绑定到一起，使其可以显示侧滑按钮并操作，并监听手势以改变按钮样式ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(        this,        drawer,        toolbar,        R.string.navigation_drawer_open,        R.string.navigation_drawer_close);//设置监听滑动，只要滑动了那个按钮就会相应发生改变drawer.setDrawerListener(toggle);//设置执行显示到toolbar上面toggle.syncState();

再下去，这个就是监听点击事件

//获取到侧滑栏，并设置它的监听事件NavigationView navigationView = (NavigationView) findViewById(R.id.item_NavigationView);navigationView.setNavigationItemSelectedListener(this);

监听代码在这，最后两行不加的话你按下了按钮它还是在侧滑栏里，作用就是关闭侧滑栏回到内容区

//设置策划栏的监听事件@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem item) {    switch (item.getItemId()) {        case R.id.item_01 :            Toast.makeText(this, "Item_01", Toast.LENGTH_SHORT).show();            break;        case R.id.Item_02 :            Toast.makeText(this, "Item_02", Toast.LENGTH_SHORT).show();            break;        case R.id.Item_03 :            Toast.makeText(this, "Item_03", Toast.LENGTH_SHORT).show();            break;        case R.id.Item_04 :            Toast.makeText(this, "Item_04", Toast.LENGTH_SHORT).show();            break;        default:            break;    }    //按下按钮后关闭侧滑栏关闭侧滑    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.activity_main);    drawer.closeDrawer(GravityCompat.START);    return true;}

还有一个类，你可以试试网易云音乐的app是不是把侧滑栏弄出来的时候按下back会回到内容区，下面就是这个功能，你不加这个功能按下back他会回来界面的

//恩设置侧滑栏在出现的时候按下back(返回按钮)不是直接退到桌面而是返回到内容界面@Overridepublic void onBackPressed() {    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.activity_main);    if (drawer.isDrawerOpen(GravityCompat.START)) {        drawer.closeDrawer(GravityCompat.START);    } else {        super.onBackPressed();    }}

暂时讲到这，bye

0 0