[Android] 撰寫Navigation View(側選單)父類別，應用在所需要的Activity ~ Solinari's Notes

Google推出Android Design Support Library有非常久的一段時間了，要設計有Material Design的APP也不是一件難事。有許多APP都有使用到Navigation View，中文有人稱為側選單，Play商店、巴哈姆特APP、Twitch App等都有使用，如下圖 ↓

如圖上所顯示的，導覽列有著許多的項目，如果每個項目都要重複寫一次Navigation View的程式碼，重新撰寫Item被點擊的事件，不覺是一件很浪費時間的事嗎?

今天來記錄一個Navigation View的父類別，有需要的使用Navigation View的Activity，繼承這個類別即可。

按慣例，拿上一個專案來進行修改。

先創建一個navigation_drawer.xml


	<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">
	<!-- The main content view -->
	<FrameLayout
	android:id="@+id/content_frame"
	android:layout_width="match_parent"
	android:layout_height="match_parent" >
	</FrameLayout>
	<!-- The navigation drawer -->
	<android.support.design.widget.NavigationView
	android:id="@+id/Left_Navigation"
	android:layout_width="240dp"
	android:layout_height="match_parent"
	android:layout_gravity="start"
	android:choiceMode="singleChoice"
	android:divider="@android:color/transparent"
	android:dividerHeight="0dp"
	android:background="@color/white"
	app:menu="@menu/menu_navigation"
	app:itemIconTint="@color/black"
	app:itemTextColor="@color/black"
	/>
	</android.support.v4.widget.DrawerLayout>

view raw navigation_drawer.xml hosted with ❤ by GitHub

側選單中需要有一些項目，所以我們在menu底下創建一個menu_navigation.xml

	<?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/navItemOne"
	android:icon="@drawable/navigation_item_one"
	android:title="@string/view_one" />
	<item
	android:id="@+id/navItemAbout"
	android:icon="@drawable/navigation_item_two"
	android:title="@string/about"/>
	<item
	android:id="@+id/navItemLogout"
	android:icon="@drawable/navigation_item_logout"
	android:title="@string/logout"/>
	</group>
	</menu>

view raw menu_navigation.xml hosted with ❤ by GitHub

其中navItemOne就使用我們之前的ViewPager，第二個About-呈現此APP的資訊，第三個則為出現AlertDialog詢問是否確定登出
為About，創建一個about.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical">
	<include
	layout="@layout/toolbar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	app:layout_scrollFlags="scroll\|enterAlways\|snap" />
	<TextView
	android:id="@+id/textView"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/version"
	android:textColor="@color/black"
	android:textSize="18sp"
	android:textStyle="bold"
	android:layout_marginTop="5dp"
	android:layout_marginLeft="5dp"/>

	<TextView
	android:id="@+id/tvVersion"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:textColor="@color/black"
	android:textSize="18sp"
	android:layout_marginLeft="5dp"/>
	<TextView
	android:id="@+id/textView2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/author"
	android:textColor="@color/black"
	android:textSize="18sp"
	android:textStyle="bold"
	android:layout_marginTop="5dp"
	android:layout_marginLeft="5dp"/>

	<TextView
	android:id="@+id/tvAuthor"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text="@string/author_name"
	android:textColor="@color/black"
	android:textSize="18sp"
	android:layout_marginLeft="5dp"/>
	<TextView
	android:id="@+id/textView3"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/email"
	android:textColor="@color/black"
	android:textSize="18sp"
	android:textStyle="bold"
	android:layout_marginTop="5dp"
	android:layout_marginLeft="5dp"/>

	<TextView
	android:id="@+id/tvEmail"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text="@string/author_email"
	android:textColor="@color/black"
	android:textSize="18sp"
	android:layout_marginLeft="5dp"/>
	</LinearLayout>

view raw about.xml hosted with ❤ by GitHub

要呈現的畫面準備好了，再來就是我們的重點，創建一個父類別，Navigation_BaseActivity.java 在這個BaceActivity中撰寫將側邊欄放入，並針對NavigationItemClick事件進行撰寫

	package com.example.solinari.navigationviewsample;

	import android.content.DialogInterface;
	import android.content.Intent;
	import android.support.annotation.LayoutRes;
	import android.support.design.widget.NavigationView;
	import android.support.v4.view.GravityCompat;
	import android.support.v4.widget.DrawerLayout;
	import android.support.v7.app.ActionBarDrawerToggle;
	import android.support.v7.app.AlertDialog;
	import android.support.v7.app.AppCompatActivity;
	import android.support.v7.widget.Toolbar;
	import android.view.MenuItem;
	import android.view.View;
	import android.widget.FrameLayout;
	import android.widget.Toast;

	/**
	* Created by Solinari on 2017/02/15.
	*/

	public class Navigation_BaseActivity extends AppCompatActivity {
	private DrawerLayout DL;
	private FrameLayout FL;
	protected NavigationView NV;
	protected Toolbar toolbar;
	protected int CurrentMenuItem = 0;//紀錄目前User位於哪一個項目

	@Override
	public void setContentView(@LayoutRes int layoutResID) {
	DL = (DrawerLayout) getLayoutInflater().inflate(R.layout.navigation_drawer, null);
	FL = (FrameLayout) DL.findViewById(R.id.content_frame);
	NV = (NavigationView)DL.findViewById(R.id.Left_Navigation);
	getLayoutInflater().inflate(layoutResID, FL, true);
	super.setContentView(DL);
	toolbar = (Toolbar) findViewById(R.id.ToolBar);
	setUpNavigation();
	}
	private void setUpNavigation() {
	// Set navigation item selected listener
	NV.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
	@Override
	public boolean onNavigationItemSelected(MenuItem menuItem) {
	if(!(menuItem == NV.getMenu().getItem(CurrentMenuItem))) {//判斷使者者是否點擊當前畫面的項目，若不是，根據所按的項目做出分別的動作
	switch (menuItem.getItemId()) {
	case R.id.navItemOne:
	Intent intent = new Intent();
	intent.setClass(Navigation_BaseActivity.this, MainActivity.class);
	startActivity(intent);
	overridePendingTransition(0, 0);
	finish();
	break;
	case R.id.navItemAbout:
	Intent intent2 = new Intent();
	intent2.setClass(Navigation_BaseActivity.this, About.class);
	startActivity(intent2);
	overridePendingTransition(0, 0);
	finish();
	break;
	case R.id.navItemLogout:
	new AlertDialog.Builder(Navigation_BaseActivity.this)
	.setTitle("Logout")
	.setMessage("Are you sure you want to Logout?")
	.setPositiveButton("Yes", new DialogInterface.OnClickListener()
	{
	@Override
	public void onClick(DialogInterface dialog, int which) {
	finish();
	}

	})
	.setNegativeButton("No", null)
	.show();
	break;
	}
	}
	else {//點擊當前項目時，收起Navigation
	DL.closeDrawer(GravityCompat.START);
	}
	return false;
	}
	});

	}
	public void setUpToolBar() {//設置ToolBar
	setSupportActionBar(toolbar);
	toolbar.setNavigationOnClickListener(new View.OnClickListener(){
	@Override
	public void onClick(View view) {
	DL.openDrawer(GravityCompat.START);
	}
	});
	//設定當使用者點擊ToolBar中的Navigation Icon時，Icon會隨著轉動
	ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle( this, DL, toolbar,R.string.open_navigation,R.string.close_navigation){
	@Override
	public void onDrawerClosed(View drawerView) {
	super .onDrawerClosed(drawerView);
	}
	@Override
	public void onDrawerOpened(View drawerView) {
	super .onDrawerOpened(drawerView);
	}
	};
	DL.addDrawerListener(actionBarDrawerToggle);
	actionBarDrawerToggle.syncState();
	}
	}

view raw Navigation_BaseActivity.java hosted with ❤ by GitHub

修改MainActivity.java繼承Navigation_BaseActivity，並設置ToolBar標題以及目前位於哪一個項目

	package com.example.solinari.navigationviewsample;

	import android.support.design.widget.TabLayout;
	import android.support.v4.app.Fragment;
	import android.support.v4.view.ViewPager;
	import android.os.Bundle;
	import android.view.Menu;
	import java.util.ArrayList;
	import java.util.List;

	public class MainActivity extends Navigation_BaseActivity {
	private ViewPager myViewPager;
	private TabLayout tabLayout;
	private int[] IconResID = {R.drawable.selector_one,R.drawable.selector_two,R.drawable.selector_three};
	private int[] TollBarTitle = {R.string.friend,R.string.setting,R.string.contact};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	myViewPager = (ViewPager) findViewById(R.id.myViewPager);
	tabLayout = (TabLayout) findViewById(R.id.TabLayout);
	toolbar.setTitle(TollBarTitle[0]);//設置ToolBar Title
	setUpToolBar();//使用父類別的setUpToolBar()，設置ToolBar
	CurrentMenuItem = 0;//目前Navigation項目位置
	NV.getMenu().getItem(CurrentMenuItem).setChecked(true);//設置Navigation目前項目被選取狀態
	setViewPager();
	tabLayout.setupWithViewPager(myViewPager);
	setTabLayoutIcon();
	}
	public void setTabLayoutIcon(){
	for(int i =0; i < 3;i++){
	tabLayout.getTabAt(i).setIcon(IconResID[i]);
	}
	tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
	@Override
	public void onTabSelected(TabLayout.Tab tab) {
	toolbar.getMenu().clear();
	switch(tab.getPosition()){
	case 0:
	toolbar.inflateMenu(R.menu.menu_one);
	toolbar.setTitle(TollBarTitle[0]);
	break;
	case 1:
	toolbar.inflateMenu(R.menu.menu_two);
	toolbar.setTitle(TollBarTitle[1]);
	break;
	case 2:
	toolbar.inflateMenu(R.menu.menu_three);
	toolbar.setTitle(TollBarTitle[2]);
	break;
	}
	}
	@Override
	public void onTabUnselected(TabLayout.Tab tab) {}
	@Override
	public void onTabReselected(TabLayout.Tab tab) {}
	});

	}
	private void setViewPager(){
	FragmentList_One myFragment1 = new FragmentList_One();
	FragmentList_Two myFragment2 = new FragmentList_Two();
	FragmentList_Three myFragment3 = new FragmentList_Three();
	List<Fragment> fragmentList = new ArrayList<Fragment>();
	fragmentList.add(myFragment1);
	fragmentList.add(myFragment2);
	fragmentList.add(myFragment3);
	ViewPagerFragmentAdapter myFragmentAdapter = new ViewPagerFragmentAdapter(getSupportFragmentManager(), fragmentList);
	myViewPager.setAdapter(myFragmentAdapter);
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
	getMenuInflater().inflate(R.menu.menu_one, menu);
	return true;
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

創建About.java

	package com.example.solinari.navigationviewsample;

	import android.content.pm.PackageInfo;
	import android.content.pm.PackageManager;
	import android.os.Bundle;
	import android.widget.TextView;

	/**
	* Created by Solinari on 2017/02/15.
	*/

	public class About extends Navigation_BaseActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.about);
	toolbar.setTitle(R.string.about);//設置ToolBar Title
	setUpToolBar();//使用父類別的setUpToolBar()，設置ToolBar
	CurrentMenuItem = 1;//目前Navigation項目位置
	NV.getMenu().getItem(CurrentMenuItem).setChecked(true);//設置Navigation目前項目被選取狀態
	TextView tvVersion = (TextView) findViewById(R.id.tvVersion);
	try {//取得APP目前的versionName
	PackageInfo packageInfo = getPackageManager().getPackageInfo(getPackageName(), 0);
	tvVersion.setText( packageInfo.versionName);
	} catch (PackageManager.NameNotFoundException e) {
	e.printStackTrace();
	}
	}
	}

view raw About.java hosted with ❤ by GitHub

讓我們來看看目前的效果

恩..看起還少了點甚麼，Navigation View通常在上方都會有一個區塊顯示帳戶ID或該APP的全名之類的，要做出那樣效果也十分容易。
設計一個navigation_drawer_header.xml

	<?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="150dp"
	android:gravity="center"
	android:orientation="horizontal"
	android:background="@drawable/navigation_drawer_head">
	<ImageView
	android:layout_width="match_parent"
	android:layout_height="70dp"
	android:src="@drawable/navigation_drawer_profile_image"
	android:layout_weight="4"
	/>
	<TextView
	android:id="@+id/navigation_header_userID"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:textAppearance="?android:attr/textAppearanceMedium"
	android:layout_weight="1"
	android:textStyle="bold"
	android:textColor="@color/black"
	android:text="@string/author_name" />
	</LinearLayout>

view raw navigation_drawer_header.xml hosted with ❤ by GitHub

並在Navigation View中加入app:headerLayout="@layout/navigation_drawer_header"


	<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">
	<!-- The main content view -->
	<FrameLayout
	android:id="@+id/content_frame"
	android:layout_width="match_parent"
	android:layout_height="match_parent" >
	</FrameLayout>
	<!-- The navigation drawer -->
	<android.support.design.widget.NavigationView
	android:id="@+id/Left_Navigation"
	android:layout_width="240dp"
	android:layout_height="match_parent"
	android:layout_gravity="start"
	android:choiceMode="singleChoice"
	android:divider="@android:color/transparent"
	android:dividerHeight="0dp"
	android:background="@color/white"
	app:menu="@menu/menu_navigation"
	app:itemIconTint="@color/black"
	app:itemTextColor="@color/black"
	app:headerLayout="@layout/navigation_drawer_header"
	/>
	</android.support.v4.widget.DrawerLayout>