NavigationView

2016-09-14  本文已影响189人  TTTqiu

一、DrawerLayout


侧面滑动导航栏。

<!-- A DrawerLayout is intended to be used as the top-level content view using 
match_parent for both width and height to consume the full space available. -->
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- As the main content view, the view below consumes the entire 
    space available using match_parent in both dimensions. -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- android:layout_gravity="start" tells DrawerLayout to treat
    this as a sliding drawer on the left side for left-to-right
    languages and on the right side for right-to-left languages.
    The drawer is given a fixed width in dp and extends the full height of
    the container. A solid background is used for contrast
    with the content view. -->
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice">
    </android.support.v4.widget.DrawerLayout>

二、NavigationView


用来做 DrawerLayout 的导航栏布局

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

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/menu_navigation"/>

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

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/nav_item_1"
            android:icon="@drawable/nav_item_1"
            android:title="第一项" />
        <item
            android:id="@+id/nav_item_2"
            android:icon="@drawable/nav_item_2"
            android:title="第二项"/>
        <item
            android:title="第三项">
            <menu>
                <group
                    android:checkableBehavior="single">
                    <item
                        android:id="@+id/nav_item_3"
                        android:icon="@drawable/nav_item_1"
                        android:title="    第一小项"/>
                    <item
                        android:id="@+id/nav_item_4"
                        android:icon="@drawable/nav_item_2"
                        android:title="    第二小项"/>
                </group>
            </menu>
        </item>
        <item
            android:id="@+id/nav_item_7"
            android:icon="@drawable/nav_item_4"
            android:title="第四项"/>
        <item
            android:id="@+id/nav_item_8"
            android:title="第五项"
            android:icon="@drawable/nav_item_1" />
    </group>
</menu>

menu item 点击事件:

setNavigationItemSelectedListener() 方法

        navigationView=(NavigationView)findViewById(R.id.navigation_view);
        // 去掉scrollbar。scrollbar在NavigationView的child:NavigationMenuView中,
        navigationView.getChildAt(0).setVerticalScrollBarEnabled(false);
        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        item.setChecked(true);
                        Toast.makeText(MainActivity.this, ""+item.getTitle(), Toast.LENGTH_SHORT).show();
                        return true;
                    }
                });

三、Toolbar 左上角图标:


        drawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout);
        drawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,
                R.string.drawer_open,R.string.drawer_close);
        drawerToggle.syncState();
        drawerLayout.addDrawerListener(drawerToggle);

打开关闭时图标有动画变化。


四、导航栏与返回键:


似乎默认按返回键会退出应用而不是关闭导航栏,需要重写下 onBackPressed()。

    // 按返回时若侧边导航栏是打开的,先退出
    @Override
    public void onBackPressed(){
        if(drawerLayout.isDrawerOpen(findViewById(R.id.navigation_view))){
            drawerLayout.closeDrawers();
        }else {
            super.onBackPressed();
        }
    }
上一篇 下一篇

猜你喜欢

热点阅读