Android特色控制元件NavigationView的使用

NavigationView簡介

Design包是Android5.0推出的新特性，其包含了許多新出現且具有自己特色的控制元件，其中包含RecyclerView、CardView和TabLayout等等，當然也包括本文要介紹的具有鮮明特色的NavigationView控制元件。

NavigationView是Google在側滑的MaterialDesign的一種規範，所以提出了一個新的控制元件，用來規範側滑的基本樣式。

Google推薦DrawerLayout和NavigationView結合使用。

NavigationView使用

在佈局中使用：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/dl"
    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.main.navigationView.NavigationViewActivity">

    <!-- 內容部分 -->
    <TextView
        android:id="@+id/tv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="內容"
        />
    <!-- 選單部分 -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nvgtv"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_gravity="start"
        android:background="@android:color/darker_gray"
        app:headerLayout="@layout/header_layout"
        app:menu="@menu/navigation_menu"
        />

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

複製程式碼

NavigationView在佈局中使用需要指定完整類名（包名+類名），其由兩部分組成：頭部和選單列表。頭部使用app:headerLayout來指定佈局，選單使用app:menu指定。

header_layout佈局：

<?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"
              android:gravity="center_horizontal"
              android:orientation="vertical" >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="小明"
        android:textSize="18dp"
        />

</LinearLayout>

複製程式碼

在header_layout可以根據自己的需求新增頭部不一樣的佈局。

選單佈局

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item 
        android:id="@+id/action_add"
        android:title="新增"
        android:orderInCategory="100"
        android:icon="@android:drawable/ic_menu_add"
        />
    <item 
        android:id="@+id/action_delete"
        android:title="刪除"
        android:orderInCategory="100"
        android:icon="@android:drawable/ic_menu_delete"
        />
    <item
        android:id="@+id/action_upload"
        android:title="上傳"
        android:orderInCategory="100"
        android:icon="@android:drawable/ic_menu_upload"
        />
    <item 
        android:id="@+id/action_details"
        android:title="詳情"
        android:orderInCategory="100"
        android:icon="@android:drawable/ic_menu_info_details"
        />
    <item 
        android:id="@+id/action_more"
        android:title="更多"
        android:orderInCategory="100"
        android:icon="@android:drawable/ic_menu_more"
        >
        <menu >
            <item 
                android:id="@+id/action_setting"
		        android:title="設定"
		        android:icon="@android:drawable/ic_menu_manage"/>
            <item 
                android:id="@+id/action_edit"
		        android:title="編輯"
		        android:icon="@android:drawable/ic_menu_edit"/>
        </menu>
      </item>

</menu>

複製程式碼

在menu中還可以設定group標籤分組

 <group android:checkableBehavior="none">
        <item 
                android:id="@+id/action_details"
                android:title="詳情"
                android:orderInCategory="100"
                android:icon="@android:drawable/ic_menu_info_details"
        />
    </group>
   <group
       android:checkableBehavior="none"
       android:id="@+id/group_settings">
       <item 
                android:id="@+id/action_setting"
		android:title="設定"
		android:icon="@android:drawable/ic_menu_manage"/>
   </group>
</menu>
複製程式碼

這裡要給group設定id，否則沒有分割線。

設定NavigationView的選擇監聽

public class NavigationViewActivity extends AppCompatActivity {

    private NavigationView mNavigationView;
    private TextView tv;
    private DrawerLayout mDL;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation_view);

        tv = (TextView) this.findViewById(R.id.tv);
        mDL = (DrawerLayout) this.findViewById(R.id.dl);
        mNavigationView = (NavigationView)this.findViewById(R.id.nvgtv);

        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //處理item的點選事件
                tv.setText(item.getTitle());

                mDL.closeDrawers();
                return true;
            }
        });


        View headerView = mNavigationView.getHeaderView(0);
        headerView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                tv.setText("這是header");
                mDL.closeDrawers();
            }
        });


    }

}
複製程式碼

使用setNavigationItemSelectedListener給NavigationView設定選單選擇的監聽，其中MenuItem便是點選選中的選單項，在監聽裡開發者可以根據需求做邏輯處理。

執行效果：