[Android] 實現ToolBar依據ViewPager選取的頁面呈現不同的Title與MenuItem

延續上一篇TabLayout的文章，今天要說的是ToolBar，ToolBar前身是ActionBar，比ActionBar來的更加彈性、靈活，ToolBar可以說是每個APP都會使用到的元件，

而部分的APP的ToolBar跟TabLayout一樣會隨著ViewPager所在的功能頁面，呈現不同標題與選項按鈕，我們就沿用上次TabLayout專案，來接著實現這個功能。

先上實作畫面

ToolBar的xml檔

	<?xml version="1.0" encoding="UTF-8"?>
	<android.support.v7.widget.Toolbar
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:background="#2894FF"
	android:layout_height="wrap_content"
	android:layout_width="match_parent"
	android:id="@+id/ToolBar"
	>
	</android.support.v7.widget.Toolbar>

view raw toolbar.xml hosted with ❤ by GitHub

include到要ToolBar出現的畫面中，activity_main.xml

	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:orientation="vertical"
	>
	<include layout="@layout/toolbar"
	android:layout_height="wrap_content"
	android:layout_width="match_parent"
	/>
	<android.support.design.widget.TabLayout
	android:id="@+id/TabLayout"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="#2894FF"
	app:tabMode="fixed"
	app:tabIndicatorHeight="2dp"
	app:tabIndicatorColor="@android:color/white"
	app:tabGravity="fill" />
	<android.support.v4.view.ViewPager
	android:id="@+id/myViewPager"
	android:layout_width="match_parent"
	android:layout_height="wrap_content">
	</android.support.v4.view.ViewPager>
	</LinearLayout>

view raw activity_main.xml hosted with ❤ by GitHub

ToolBar中呈現的選項按鈕，於res目錄底下創建menu資料夾，並創建menu的xml檔，這裡我貼出其中一個，可以自行發揮或至底下的GitHub連結有完整專案

	<?xml version="1.0" encoding="utf-8"?>
	<menu xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:android="http://schemas.android.com/apk/res/android">
	<item
	android:title="@string/account"
	app:showAsAction="always"
	android:icon="@drawable/toolbar_account"
	android:orderInCategory="20"
	android:id="@+id/ItemAccount"/>
	<item
	android:title="@string/comment"
	app:showAsAction="always"
	android:icon="@drawable/toolbar_comment"
	android:orderInCategory="30"
	android:id="@+id/ItemComment"/>
	</menu>

view raw menu_one.xml hosted with ❤ by GitHub

那要如何在切換時改變選項按鈕呢?  於TabSelectedListener中，進行判斷即可，透過「getMenu().clear();」、「inflateMenu()」來做切換的動作
MainActivity.java

	package com.example.solinari.ToolBarItem;
	import android.graphics.Color;
	import android.support.design.widget.TabLayout;
	import android.support.v4.app.Fragment;
	import android.support.v4.view.ViewPager;
	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.support.v7.widget.Toolbar;
	import android.view.Menu;
	import java.util.ArrayList;
	import java.util.List;
	public class MainActivity extends AppCompatActivity {
	private ViewPager myViewPager;
	private TabLayout tabLayout;
	private Toolbar toolbar;
	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 = (Toolbar) findViewById(R.id.ToolBar);
	toolbar.setTitle(TollBarTitle[0]);
	toolbar.setTitleTextColor(Color.BLACK);
	setSupportActionBar(toolbar);
	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

完整專案:Solinari GitHub