[Android] 實現TabLayout依據ViewPager選取的頁面呈現不同的Icon

有許多APP都會使用ViewPager，使用者僅需螢幕左右滑動，就可以切換不同的功能需求，而絕大多數的都會有一個Tab列，來提示使用者目前於哪個功能區塊，如圖

Tab列的圖示會根據當前是否選取，而呈現不同的圖示，今天就來紀錄一下如何實做這個功能。

實作畫面

主要使用到ViewPager以及Google所提供的Design Support Library中提供的TabLayout。

要使用TabLayout，首先要在Gradle中加入Design Support Library。

此專案的Gradle文件

	apply plugin: 'com.android.application'
	android {
	compileSdkVersion 25
	buildToolsVersion "25.0.1"
	defaultConfig {
	applicationId "com.example.solinari.tablayouticon"
	minSdkVersion 9
	targetSdkVersion 25
	versionCode 1
	versionName "1.0"
	testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
	}
	buildTypes {
	release {
	minifyEnabled false
	proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
	}
	}
	}
	dependencies {
	compile fileTree(dir: 'libs', include: ['*.jar'])
	androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
	exclude group: 'com.android.support', module: 'support-annotations'
	})
	compile 'com.android.support:appcompat-v7:25.0.1'
	compile 'com.android.support:design:25.0.1'
	testCompile 'junit:junit:4.12'
	}

view raw build.gradle hosted with ❤ by GitHub

主畫面的Layout檔，ViewPager以及TabLayout

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

那要如何讓Icon隨著是否選取而改變呢? 透過Selector中的「android:state_selected」屬性可以輕鬆做到這項效果，當為true就是被選取時的狀態，要呈現的圖片，透過drawble來設置圖片的路徑，反之，flase就是為非選取的狀態。這邊只貼出一個的程式碼，大家可以舉一反三。
selector_one.xml

	<?xml version="1.0" encoding="utf-8"?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_selected="true"
	android:drawable="@drawable/tab_one_selected"/>
	<item android:state_selected="false"
	android:drawable="@drawable/tab_one"/>
	</selector>

view raw selector_one.xml hosted with ❤ by GitHub

ViewPager所使用的Fragment Layout檔，這裡我使用三個不同的Fragment，由於十分類似，所以只貼出其中一個，而在真正實作上，各個Fragment所呈現的畫面大多都是不相同的。

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal" android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TextView
	android:text="@string/name"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_weight="5"
	/>
	<EditText
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_weight="1"
	android:inputType="textPersonName"
	android:ems="10"
	android:id="@+id/edtName"
	style="@style/Widget.AppCompat.EditText" />
	</LinearLayout>

view raw fragmentlist_one.xml hosted with ❤ by GitHub

ViewPager與Fragment做搭配所需要的FragmentAdapter，這邊我選擇使用FragmentPagerAdapter

	package com.example.solinari.tablayouticon;
	import android.support.v4.app.Fragment;
	import android.support.v4.app.FragmentManager;
	import android.support.v4.app.FragmentPagerAdapter;
	import java.util.List;
	/**
	* Created by 057029 on 2016/11/25.
	*/
	public class ViewPagerFragmentAdapter extends FragmentPagerAdapter {
	private List<Fragment> fragmentList;
	public ViewPagerFragmentAdapter(FragmentManager fm, List<Fragment> fragmentList) {
	super(fm);
	this.fragmentList = fragmentList;
	}
	@Override
	public Fragment getItem(int position) {
	return fragmentList.get(position);
	}
	@Override
	public int getCount() {
	return fragmentList.size();
	}
	}

view raw ViewPagerFragmentAdapter.java hosted with ❤ by GitHub

FragmentList_One.java 如想要在各個Fragment實作各項功能，可以自行增加

	package com.example.solinari.tablayouticon;
	import android.os.Bundle;
	import android.support.v4.app.Fragment;
	import android.view.LayoutInflater;
	import android.view.View;
	import android.view.ViewGroup;
	import android.widget.TextView;
	/**
	* Created by Solinari on 2016/12/31.
	*/
	public class FragmentList_One extends Fragment{
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
	Bundle savedInstanceState) {
	View view = inflater.inflate(R.layout.fragmentlist_one, container, false);
	return view;
	}
	}

view raw FragmentList_One.java hosted with ❤ by GitHub

MainActivity.java

	package com.example.solinari.tablayouticon;
	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 java.util.ArrayList;
	import java.util.List;
	public class MainActivity extends AppCompatActivity {
	private ViewPager myViewPager;
	private TabLayout tabLayout;
	private int[] IconResID = {R.drawable.selector_one,R.drawable.selector_two,R.drawable.selector_three};
	@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);
	setViewPager();;
	tabLayout.setupWithViewPager(myViewPager);
	setTabLayoutIcon();
	}
	public void setTabLayoutIcon(){
	for(int i =0; i < IconResID.length;i++){
	tabLayout.getTabAt(i).setIcon(IconResID[i]);
	}
	}
	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);
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

完整專案:Solinari GitHub