ViewPager+Fragment實作TabHost（可複用的類）

效果圖：

之前寫了一個基于ViewPager+Fragment實作的Tabhost（具體詳情：

http://blog.csdn.net/zhangphil/article/details/43700807

 ），但寫的過于緊耦合，不便于複用。現在大規模重新整理重寫了項目部分代碼，便于以後再工程中複用。

主要重寫了幾個方法，供以後使用重寫：

protected Fragment getFragmentAt(int pos) {
		return null;
	}

	protected View getIndicatorAt(int pos) {
		return null;
	}

	protected int getItemsCount() {
		return 0;
	}           

其中：

protected Fragment getFragmentAt(int pos) {
		return null;
	}           

是ViewPager中每個單獨的Page（該Page加載的Fragment）

相應的，一個Page（加載Fragment）對應一個下方Tab的頁籤：

protected View getIndicatorAt(int pos) {
		return null;
	}           

以下是完整的項目代碼：

重新命名該ViewPager+Fragment實作的“Tabhost”為 ViewPagerTabHost。

ViewPagerTabHost.java代碼：

package zhangphil.libs.view;

import zhangphil.libs.R;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;

public class ViewPagerTabHost extends Fragment {

	private MyFragmentPagerAdapter mPagerAdapter;
	private ViewPager mViewPager;
	private LinearLayout mLinearLayout;

	protected Fragment getFragmentAt(int pos) {
		return null;
	}

	protected View getIndicatorAt(int pos) {
		return null;
	}

	protected int getItemsCount() {
		return 0;
	}

	public void notifyDataSetChanged() {
		mPagerAdapter.notifyDataSetChanged();
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View mView = inflater.inflate(R.layout.viewpager_tabhost, null);

		mViewPager = (ViewPager) mView.findViewById(R.id.viewpager);

		mLinearLayout = (LinearLayout) mView
				.findViewById(R.id.indicator_LinearLayout);
		addIndicators();
		// 初始化，第一項被選中
		setIndicatorViewSelected(0);

		mPagerAdapter = new MyFragmentPagerAdapter(getFragmentManager());
		mViewPager.setAdapter(mPagerAdapter);
		mViewPager
				.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

					@Override
					public void onPageSelected(int pos) {
						setIndicatorViewSelected(pos);
					}

					@Override
					public void onPageScrolled(int arg0, float arg1, int arg2) {

					}

					@Override
					public void onPageScrollStateChanged(int arg0) {

					}
				});

		return mView;
	}

	private void addIndicators() {
		// 添加Tab頁籤
		for (int i = 0; i < getItemsCount(); i++) {
			View v = getIndicatorAt(i);
			addIndicatorItem(v, i);
		}
	}

	private void addIndicatorItem(View view, final int index) {
		LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.MATCH_PARENT, 1);
		mLinearLayout.addView(view, index, params);
		view.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				set(index);
			}
		});
	}

	// 在這裡設定被選中時候頁籤變化的效果
	private void setIndicatorViewSelected(int pos) {
		for (int i = 0; i < mLinearLayout.getChildCount(); i++) {

			if (i == pos) {
				View v = mLinearLayout.getChildAt(i);
				v.setBackgroundColor(Color.RED);
			} else {
				View v = mLinearLayout.getChildAt(i);
				v.setBackgroundColor(Color.GRAY);
			}
		}
	}

	private void set(int pos) {
		mViewPager.setCurrentItem(pos, true);
		setIndicatorViewSelected(pos);
	}

	private class MyFragmentPagerAdapter extends FragmentPagerAdapter {

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

		@Override
		public Fragment getItem(int pos) {
			return getFragmentAt(pos);
		}

		@Override
		public int getCount() {
			return getItemsCount();
		}

		@Override
		public void notifyDataSetChanged() {
			super.notifyDataSetChanged();
			// addIndicators();
		}
	}
}           

需要的布局檔案 viewpager_tabhost.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="match_parent"
    android:orientation="vertical"
    >
    
    
   <FrameLayout 
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

</FrameLayout>
   
   

    <LinearLayout
        android:id="@+id/indicator_LinearLayout"
        android:layout_width="match_parent"
        android:layout_height="50dip"
        android:orientation="horizontal" >
    </LinearLayout>

     
</LinearLayout>
           

viewpager_tabhost.xml可以在以後的實際項目中再次定制。