Material Design控件之NavigationView

Material Design Android官方控件之介紹

NavigationView

• NavigationView是用來做DrawerLayout的第二個子佈局的,就是抽屜佈局
• 由google提供的控件,跟DrawerLayout篇的LinearLayout一樣的地位
• 當然,你可以不使用NavigationView,使用其他佈局(如FrameLayout+Fragment)來作爲抽屜佈局

導入design庫

'com.android.support:design:26.1.0'

簡單使用

xml

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

        <!--第一個，顯示的佈局-->
        <android.support.design.widget.CoordinatorLayout
            ......>
        </android.support.design.widget.CoordinatorLayout>


        <!--第二個，不顯示的抽屜佈局-->
        <android.support.design.widget.NavigationView
            android:id="@+id/NavigationView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            app:headerLayout="@layout/header_layout"
            app:menu="@menu/menu_navigation_view"
            app:itemBackground="@drawable/color_nav_item_background"
            app:itemTextColor="@color/color_nav_item_text"
            app:itemIconTint="@color/color_nav_item_text"
            app:itemTextAppearance="@style/NavItemAppearance"
        />


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

app:headerLayout:頭部佈局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="200dp"
               >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/timg"/>
    <TextView
        android:id="@+id/tv_header_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="8dp"
        android:textColor="#cdcdcd"
        android:text="Navigation"
        android:textSize="28sp"
    />
</FrameLayout>

• 在代碼中獲取頭佈局及其子View

        View headerView = mNavigationView.getHeaderView(0);
        TextView mTextView = (TextView) headerView.findViewById(R.id.tv_header_title);
        mTextView.setText("NavigationView");

app: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">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="照相"/>
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="相冊"/>
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="視頻"/>
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="工具"/>

    </group>

    <item android:title="聯繫">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="分享"/>
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="發送"/>
        </menu>
    </item>
</menu>

• 類似listview
• 在代碼中設置各item點擊事件

 mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                //在這裏處理item的點擊事件

                switch(item.getItemId()){
                    case R.id.nav_camera:
                        Snackbar.make(mNavigationView,"照相", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_gallery:
                        Snackbar.make(mNavigationView,"相冊", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_slideshow:
                        Snackbar.make(mNavigationView,"視頻", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_manage:
                        Snackbar.make(mNavigationView,"工具", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_share:
                        Snackbar.make(mNavigationView,"分享", Snackbar.LENGTH_LONG).show();
                        break;
                    case R.id.nav_send:
                        Snackbar.make(mNavigationView,"發送", Snackbar.LENGTH_LONG).show();
                        break;
                }
                mDrawerLayout.closeDrawer(Gravity.LEFT);
                return true;
            }
        });

• app:itemIconTint=”@color/blue” : item icon蒙層 默認是灰色,所以圖片都是灰色的;
• 圖片都變爲灰色,需要顯示原色

 navigationView.setItemIconTintList(null);  //顯示彩色

• app:itemTextColor=”“設置常態item的text顏色
• app:itemTextAppearance=”@style/NavItemAppearance”:設置常態 item Text 格式
• app:itemBackground=”@color/colorAccent”:設置每一個item的背景顏色
• item點擊/選中顏色變化

app:itemBackground="@drawable/color_nav_item_background"
app:itemTextColor="@color/color_nav_item_text"
app:itemIconTint="@color/color_nav_item_text"

selector 格式: state_checked:選中;state_pressed:點擊

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#2266cc" android:state_checked="true"></item>
    <item android:color="#454545" ></item>
</selector>

• app:insetForeground=”#40000000” :設置遮罩的陰影顏色
• item設置group,纔會出現分割線

源碼地址：https://github.com/LinweiJ/MaterialDesignWidget