天天看點
傳回

Android ViewPager實作Tabhost頁籤底部滑塊動态滑動過渡



《Android ViewPager實作Tabhost頁籤底部滑塊動态滑動過渡》

之前基于github上的第三方開源控件ViewPagerIndicator的UnderlinePageIndicator（原文連結：

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

），自己寫了一個底部帶有滑塊、且當ViewPager頁面切換時候頁籤也随之相應切換，且滑塊也随之相應動态滑動效果得控件。但寫的太過于緊耦合，不利于複用，是以現在重構了代碼，重寫了代碼，把這些效果做成了一個自定制的松耦合控件：TabLinearLayout，該控件可以在未來的項目中直接拿出使用。

控件效果圖如圖所示：

測試用的MainActivity.java：

package zhangphil.view;

import java.util.ArrayList;

import zhangphil.underline.R;

import com.viewpagerindicator.UnderlinePageIndicator;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;

/**
 * 基于第三方開源控件ViewPagerIndicator的UnderlinePageIndicator，自己寫的一個在頁籤底部有襯線的滑動控件。
 * 控件效果圖如圖所示。 這裡面有一個特别的效果是：頭部的頁籤在ViewPager切換過程中，底部的滑塊也随之動态漸漸滑動過渡。
 * 
 * */

public class MainActivity extends ActionBarActivity {

	private TabLinearLayout mTabLinearLayout;
	private ArrayList<Fragment> mArryList;
	private ViewPager mPager;

	// 未被選中的頁籤字型顔色
	private int COLOR_NORMAL = Color.DKGRAY;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		mArryList = new ArrayList<Fragment>();
		// 初始化5個Fragment作為測試。
		for (int i = 0; i < 5; i++) {
			TestFragment f = (TestFragment) TestFragment.newInstance();
			f.id = i;
			mArryList.add(f);
		}

		PagerAdapter mAdapter = new MyFragmentAdapter(
				getSupportFragmentManager());

		mPager = (ViewPager) findViewById(R.id.pager);
		mPager.setAdapter(mAdapter);

		UnderlinePageIndicator mIndicator = (UnderlinePageIndicator) findViewById(R.id.indicator);
		mIndicator.setViewPager(mPager);
		mIndicator.setFades(false);
		mIndicator.setSelectedColor(0xff33B5E5);

		mTabLinearLayout = (TabLinearLayout) findViewById(R.id.tab_LinearLayout);

		ArrayAdapter mTabLinearLayoutAdapter = new MyTabLinearLayoutAdapter(
				this, -1);
		mTabLinearLayout.initialization(mPager, mTabLinearLayoutAdapter,
				mIndicator);
	}

	private class MyTabLinearLayoutAdapter extends ArrayAdapter {
		private Context context;

		public MyTabLinearLayoutAdapter(Context context, int resource) {
			super(context, resource);
			this.context = context;
		}

		@Override
		public int getCount() {
			return mArryList.size();
		}

		// 在這裡僅僅傳回一個TextView作為頁籤的View。
		// 此處可以傳回更豐富的View。
		@Override
		public View getView(int position, View convertView, ViewGroup parent) {

			TextView v = new TextView(context);
			v.setGravity(Gravity.CENTER);
			v.setText("頁籤" + position);
			v.setTextColor(COLOR_NORMAL);

			return v;
		}
	}

	// 僅僅用于測試的Fragment，用一個id辨別。
	private static class TestFragment extends Fragment {

		public int id;

		public static Fragment newInstance() {
			return new TestFragment();
		}

		public View onCreateView(LayoutInflater inflater, ViewGroup container,
				Bundle savedInstanceState) {

			TextView v = new TextView(getActivity());
			v.setGravity(Gravity.CENTER);
			v.setTextSize(50f);
			v.setText("Fragment: " + id);

			return v;
		}
	}

	private class MyFragmentAdapter extends FragmentPagerAdapter {

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

		@Override
		public Fragment getItem(int position) {
			return mArryList.get(position);
		}

		@Override
		public int getCount() {
			return mArryList.size();
		}
	}
}

MainActivity.java需要的activity_main.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" >

    <zhangphil.view.TabLinearLayout
        android:id="@+id/tab_LinearLayout"
        android:layout_width="match_parent"
        android:layout_height="30dip"
        android:orientation="horizontal" />

    <com.viewpagerindicator.UnderlinePageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="7px" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#33B5E5" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

自己重寫的TabLinearLayout.java：

package zhangphil.view;

import com.viewpagerindicator.PageIndicator;

import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;

public class TabLinearLayout extends LinearLayout {

	private int COLOR_NORMAL = Color.DKGRAY;
	private ArrayAdapter mAtapter;
	private ViewPager mPager;
	private TabLinearLayoutListener mTabLinearLayoutListener;

	public TabLinearLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public TabLinearLayout(Context context) {
		super(context);
	}

	public void initialization(ViewPager mPager, ArrayAdapter mAtapter,
			PageIndicator mPageIndicator) {
		this.mAtapter = mAtapter;
		this.mPager = mPager;

		mPageIndicator
				.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

					@Override
					public void onPageSelected(int pos) {
						setCurrentItem(pos);

						if (mTabLinearLayoutListener != null)
							mTabLinearLayoutListener.onTab(pos);
					}

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

					}

					@Override
					public void onPageScrollStateChanged(int arg0) {

					}
				});

		// 添加頁籤
		addIndicators();

		// 初始化，第0項被選中
		setIndicatorViewSelected(0);
	}

	public void initialization(ViewPager mPager, ArrayAdapter mAtapter,
			PageIndicator mPageIndicator,
			TabLinearLayoutListener mTabLinearLayoutListener) {

		this.mTabLinearLayoutListener = mTabLinearLayoutListener;

		initialization(mPager, mAtapter, mPageIndicator);
	}

	// 添加Tab頁籤
	private void addIndicators() {
		for (int i = 0; i < mAtapter.getCount(); i++) {
			View v = mAtapter.getView(i, null, null);
			addIndicatorItem(v, i);
		}
	}

	// 在這裡設定被選中時候頁籤變化的效果
	private void setIndicatorViewSelected(int pos) {
		for (int i = 0; i < super.getChildCount(); i++) {
			if (i == pos) {
				View v = super.getChildAt(i);
				TextView tv = (TextView) v;
				// Android Holo 樣式的藍色
				tv.setTextColor(0xff33B5E5);
			} else {
				View v = super.getChildAt(i);
				TextView tv = (TextView) v;
				tv.setTextColor(COLOR_NORMAL);
			}
		}
	}

	// 線上性布局裡面依次添加一個View，為添加的View添加事件。
	private void addIndicatorItem(View view, final int index) {
		LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.MATCH_PARENT, 1);
		super.addView(view, index, params);
		view.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {

				// 當使用者點選該View時候，設定ViewPager正确而Pager Item
				if (mTabLinearLayoutListener != null)
					mTabLinearLayoutListener.onTab(v, index);

				// 設定ViewPager的顯示項。
				mPager.setCurrentItem(index, true);
				setCurrentItem(index);
			}
		});
	}

	// 設定目前LinearLayout的pos項子view被選中。
	public void setCurrentItem(int pos) {
		setIndicatorViewSelected(pos);
	}

	// 一個接口，當使用者點選頁籤時候，方法被回調。
	public interface TabLinearLayoutListener {
		public void onTab(View v, int pos);

		public void onTab(int pos);
	}
}
android開發 容器 資料格式 xml android禁止viewpager viewpager android切換 viewpager android學習 android viewpager狀态 android viewpager調用
上一篇: Android為圖檔添加水印文字
下一篇: Android系統自帶錄屏（動态截屏）功能

繼續閱讀