多種多樣的App主界面Tab實作方法（四）：ViewPagerIndicator實作tab功能

ViewPagerIndicator 是釋出在GitHub上的一款開源ViewPager指針項目，在使用ViewPager的時候能夠訓示ViewPager所在的位置，實際上就是ViewPager的分頁訓示器，比如很多應用的指引界面，下面的小圓點，還有一些應用上面的Tab等等，ViewPageIndicator都能很好的實作。下面我們就用它來實作頂部tab功能。

先上效果圖：

一、下載下傳ViewPagerIndicator源代碼。資源連結：http://download.csdn.net/detail/chunxiao123ouc/9469980

解壓檔案會得到下圖的目錄：

多種多樣的App主界面Tab實作方法（四）：ViewPagerIndicator實作tab功能

二、首先我們将library這個檔案夾拷貝到你eclipse的工作盤中，因為我們要把它作為依賴工程，是以必須與你自己建的工程在同一個盤中。

首先我們将library這個檔案夾拷貝到你eclipse的工作盤中，因為我們要把它作為依賴工程，是以必須與你自己建的工程在同一個盤中。

重要的内容說三遍！

三、然後在eclipse中導入library；

四、再然後建立一個android工程tab04，把library配置為tab04的依賴工程，具體步驟如下：

1.建立android工程tab04，并将libs檔案夾下的V4jar包删掉，因為library中已經包含這個包了，如果不一樣，會有沖突，是以删掉一個。

多種多樣的App主界面Tab實作方法（四）：ViewPagerIndicator實作tab功能

2.右鍵tab04工程，選擇properties-->android-->add，選擇library

多種多樣的App主界面Tab實作方法（四）：ViewPagerIndicator實作tab功能

五、fragment的實作

先定義一個fragment的布局frag.xml，然後定義一個Fragment執行個體綁定frag.xml，然後定義一個fragment的擴充卡TabAdapter繼承自FragmentPagerAdapter。

frag.xml

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#ffffff"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/id_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textStyle="bold"
        android:textSize="22sp"
        android:text="helloworld" />

</RelativeLayout></span>

TabFragment.java

<span style="font-size:14px;">package com.example.tab04;

import android.annotation.SuppressLint;
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;

@SuppressLint("ValidFragment")
public class TabFragment extends Fragment
{
	private int pos;

	@SuppressLint("ValidFragment")
	public TabFragment(int pos)
	{
		this.pos = pos;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState)
	{
		View view = inflater.inflate(R.layout.frag, container, false);
		TextView tv = (TextView) view.findViewById(R.id.id_tv);
		tv.setText(TabAdapter.TITLES[pos]);
		return view;
	}
}
</span>

TabAdapter.java

<span style="font-size:14px;">package com.example.tab04;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class TabAdapter extends FragmentPagerAdapter
{

	public static String[] TITLES = new String[]
	{ "課程", "問答", "求課", "學習", "計劃" };

	public TabAdapter(FragmentManager fm)
	{
		super(fm);
	}

	@Override
	public Fragment getItem(int arg0)
	{
		TabFragment fragment = new TabFragment(arg0);
		return fragment;
	}

	@Override
	public int getCount()
	{
		return TITLES.length;
	}

	@Override
	public CharSequence getPageTitle(int position)
	{
		return TITLES[position];
	}

}
</span>

六、首頁面的實作

activity_main.xml

<span style="font-size:14px;"><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"
    android:background="#C5DAED"
    android:orientation="vertical" >

    <include layout="@layout/top" />

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/id_indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent" >
    </com.viewpagerindicator.TabPageIndicator>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout></span>

MainActivity.java

<span style="font-size:14px;">package com.example.tab04;


import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Window;

import com.viewpagerindicator.TabPageIndicator;

public class MainActivity extends FragmentActivity
{
	private ViewPager mViewPager;
	private TabPageIndicator mTabPageIndicator;
	private TabAdapter mAdapter ;

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		
		initView();
	}

	private void initView()
	{
		mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
		mTabPageIndicator = (TabPageIndicator) findViewById(R.id.id_indicator);
		mAdapter = new TabAdapter(getSupportFragmentManager());
		mViewPager.setAdapter(mAdapter);
		
		mTabPageIndicator.setViewPager(mViewPager, 0);
	}
	
	

}
</span>

這裡隻用了一個fragment頁面實作了五個，實際應用中是需要都建立的，把其餘四個都建立好之後，隻需修改一下擴充卡中的getItem方法，去掉TabFragment的構造方法就可以。下面舉個例子，本文中就不探讨了。

<span style="font-size:14px;">@Override
	public Fragment getItem(int arg0)
	{
		Fragment fragment = null;
		switch(arg0){
		case 0:
			fragment=new TabFragmentZixun();
			break;
		case 1:
			fragment=new TabFragmentRedian();
			break;
		case 2:
			fragment=new TabFragmentBoke();
			break;
		case 3:
			fragment=new TabFragmentTuijian();
			break;
		default:
			break;
		}
		return fragment;
	}</span>

七、主題設定

前面都完成了，還是沒有達到效果，是因為沒有設定主題。在styles.xml中添加如下代碼：

<style name="MyTheme" parent="AppBaseTheme">
        <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:animationDuration">5000</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="MyWidget.TabPageIndicator" parent="Widget">
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/vpi__tab_indicator</item>
        <item name="android:paddingLeft">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">8dp</item>
        <item name="android:paddingBottom">8dp</item>
        <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>
        <item name="android:textSize">16sp</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="MyTextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@android:color/black</item>
    </style>

并且在AndroidManifest.xml中修改主題

android:theme="@style/MyTheme"

Tab04源代碼下載下傳（不包含ViewPagerIndicator的代碼，請在前面的連結下載下傳）：http://download.csdn.net/detail/chunxiao123ouc/9469988

多種多樣的App主界面Tab實作方法（四）：ViewPagerIndicator實作tab功能

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯