ViewPager + HorizontalScrollView 實現可滾動的標籤欄

這是一個可滑動的標籤欄的自定義控件，參考此文章http://blog.csdn.net/fx_sky/article/details/8990573，我將主要的功能整合成一個類，配上2個特定的佈局便可使用。 效果圖：

主要佈局文件：

<!-- lang: 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" >
        <RelativeLayout
                android:id="@+id/rl_nav"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="top" >

                <RadioGroup
                    android:id="@+id/rg_nav_content"
                    android:layout_width="fill_parent"
                    android:layout_height="38dip"
                    android:layout_alignParentTop="true"
                    android:background="#F2F2F2"
                    android:orientation="horizontal" >
                </RadioGroup>

                <ImageView
                    android:id="@+id/iv_nav_indicator"
                    android:layout_width="1dip"
                    android:layout_height="5dip"
                    android:layout_alignParentBottom="true"
                    android:background="#FF0000"
                    android:contentDescription="@string/mygo_share"
                    android:scaleType="matrix" />
            </RelativeLayout>
        </LinearLayout>

標籤的佈局： sync_nav_radiogroup_item.xml

<!-- lang: xml -->
<?xml version="1.0" encoding="utf-8"?>
<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="fill_parent"
    android:background="#F2F2F2"
    android:button="@null"
    android:checked="true"
    android:gravity="center"
    android:textSize="15sp" />

如下是工具類代碼：

<!-- lang: java -->
import android.app.Activity;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class SyncHorizontalScrollView extends HorizontalScrollView {

	private View view;
	private ImageView leftImage;
	private ImageView rightImage;
	private int windowWitdh = 0;
	private Activity mContext;
	private RadioGroup rg_nav_content;
	private ImageView iv_nav_indicator;
	private LayoutInflater mInflater;
	private int count;// 屏幕顯示的標籤個數
	private int indicatorWidth;// 每一個標籤所佔的寬度
	private int currentIndicatorLeft = 0;// 當前所在標籤頁面的位移
	private ViewPager mViewPager;
	private int scrollX;

	public SyncHorizontalScrollView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	public SyncHorizontalScrollView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}

	/**
	 * 
	 * 方法描述：
	 * @param mViewPager
	 * @param leftImage 左箭頭
	 * @param rightImage 右箭頭
	 * @param tabTitle 標籤欄的名稱
	 * @param count 一頁顯示的標籤個數
	 * @param context 
	 * <pre>
	 * 修改日期      修改人	   修改說明
	 * 2014-2-17   chen		新建
	 * </pre>
	 */
	public void setSomeParam(ViewPager mViewPager, ImageView leftImage,
			ImageView rightImage, String[] tabTitle, int count, Activity context) {
		this.mContext = context;
		this.mViewPager = mViewPager;
		// this.view = view;
		mInflater = LayoutInflater.from(context);
		this.view = mInflater.inflate(R.layout.sync_hsv_item, null);
		this.addView(view);
		this.leftImage = leftImage;
		this.rightImage = rightImage;
		DisplayMetrics dm = new DisplayMetrics();
		context.getWindowManager().getDefaultDisplay().getMetrics(dm);
		windowWitdh = dm.widthPixels;
		this.count = count;
		indicatorWidth = windowWitdh / count;
		init(tabTitle);
	}

	private void init(String[] tabTitle) {
		rg_nav_content = (RadioGroup) view.findViewById(R.id.rg_nav_content);
		iv_nav_indicator = (ImageView) view.findViewById(R.id.iv_nav_indicator);
		initIndicatorWidth();
		initNavigationHSV(tabTitle);
		setListener();
	}

	// 初始化滑動下標的寬
	private void initIndicatorWidth() {
		ViewGroup.LayoutParams cursor_Params = iv_nav_indicator
				.getLayoutParams();
		cursor_Params.width = indicatorWidth;
		iv_nav_indicator.setLayoutParams(cursor_Params);
	}

	// 添加頂部標籤
	private void initNavigationHSV(String[] tabTitle) {
		rg_nav_content.removeAllViews();
		for (int i = 0; i < tabTitle.length; i++) {
			RadioButton rb = (RadioButton) mInflater.inflate(
					R.layout.sync_nav_radiogroup_item, null);
			rb.setId(i);
			rb.setText(tabTitle[i]);
			rb.setLayoutParams(new LayoutParams(indicatorWidth,
					LayoutParams.MATCH_PARENT));
			rg_nav_content.addView(rb);
		}
		RadioButton rb = (RadioButton) mInflater.inflate(
				R.layout.sync_nav_radiogroup_item, null);
		rg_nav_content.addView(rb);

	}

	private void setListener() {
		rg_nav_content
				.setOnCheckedChangeListener(new OnCheckedChangeListener() {
					@Override
					public void onCheckedChanged(RadioGroup group, int checkedId) {
						if (rg_nav_content.getChildAt(checkedId) != null) {
							moveAnimation(checkedId);
							mViewPager.setCurrentItem(checkedId); // ViewPager
							// 跟隨一塊兒 切換
						}
					}
				});
	}
	//動畫移動效果
	private void moveAnimation(int checkedId){
		TranslateAnimation animation = new TranslateAnimation(currentIndicatorLeft,
				indicatorWidth * checkedId,0f, 0f);
		animation.setInterpolator(new LinearInterpolator());
		animation.setDuration(100);
		animation.setFillAfter(true);

		// 執行位移動畫
		iv_nav_indicator.startAnimation(animation);
		
		// 記錄當前 下標的距最左側的 距離
		currentIndicatorLeft = indicatorWidth * checkedId;
		scrollX = (checkedId > 1 ? currentIndicatorLeft: 0)- indicatorWidth * 2;
		this.post(runnable);
	}

	// 模擬點擊事件
	public void performLabelClick(int position) {
		if (rg_nav_content != null && rg_nav_content.getChildCount() > position) {
			((RadioButton) rg_nav_content.getChildAt(position)).performClick();
		}
	}
	
	private Runnable runnable = new Runnable() {
		
		@Override
		public void run() {
			// TODO Auto-generated method stub
			smoothScrollTo(scrollX, 0);
		}
	};

	// 顯示和隱藏左右兩邊的箭頭
	protected void onScrollChanged(int l, int t, int oldl, int oldt) {
		super.onScrollChanged(l, t, oldl, oldt);
		if (!mContext.isFinishing() && view != null && rightImage != null
				&& leftImage != null) {
			if (view.getWidth() <= windowWitdh) {
				leftImage.setVisibility(View.GONE);
				rightImage.setVisibility(View.GONE);
			} else {
				if (l == 0) {
					leftImage.setVisibility(View.GONE);
					rightImage.setVisibility(View.VISIBLE);
				} else if (view.getWidth() - l == windowWitdh) {
					leftImage.setVisibility(View.VISIBLE);
					rightImage.setVisibility(View.GONE);
				} else {
					leftImage.setVisibility(View.VISIBLE);
					rightImage.setVisibility(View.VISIBLE);
				}
			}
		}
	}
	public int getIndicatorWidth(){
		return indicatorWidth;
	}
}

在調用時，先調用setSomeParam方法將須要用的的控件與數據傳入，而後控件內部開始初始化。 因爲項目有需求，要在進入此控件使用到的頁面時，自動定位到某一個標籤，在此需使用View.post方法執行HorizontalScrollView 控件的smoothScrollTo方法，才能確保進入頁面後標籤已定位。緣由是scrollTo方法要等到界面顯示完畢纔能有效，而view.post方法也是在界面刷新完畢以後才執行。 定義一個performLabelClick方法，讓外部調用此類來實現相應的頁面跳轉便可。

不過此處使用時有一個問題，就是從上一級頁面跳轉至此頁面時，沒法固定在最後一個標籤位，調試時發現雖然執行了performLabelClick方法模擬點擊事件，可是監聽事件並無被響應。暫時沒找出問題所在。不過用了一個方法來解決此問題，即在調用initNavigationHSV方法添加標籤時，爲其多加一個空標籤，寬度爲0便可，這樣便可解決標籤欄上沒法定位到最後一位的問題，由於真正的最後一位其實是寬度爲0的空標籤。 若是你們有遇到此問題或是有解決方法，歡迎告知，謝謝。

附上代碼下載地址: http://www.oschina.net/code/snippet_1409622_33243