《Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡》
之前基于github上的第三方开源控件ViewPagerIndicator的UnderlinePageIndicator（原文链接：），自己写了一个底部带有滑块、且当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;@Overrideprotected 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;}@Overridepublic int getCount() {return mArryList.size();}// 在这里仅仅返回一个TextView作为选项卡的View。// 此处可以返回更丰富的View。@Overridepublic 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);}@Overridepublic Fragment getItem(int position) {return mArryList.get(position);}@Overridepublic int getCount() {return mArryList.size();}}}
MainActivity.java需要的activity_main.xml布局文件：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><zhangphil.view.TabLinearLayoutandroid:id="@+id/tab_LinearLayout"android:layout_width="match_parent"android:layout_height="30dip"android:orientation="horizontal" /><com.viewpagerindicator.UnderlinePageIndicatorandroid:id="@+id/indicator"android:layout_width="match_parent"android:layout_height="7px" /><Viewandroid:layout_width="match_parent"android:layout_height="1px"android:background="#33B5E5" /><android.support.v4.view.ViewPagerandroid:id="@+id/pager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /></LinearLayout>
自己重写的TabLinearLayout.java：
宁愿停歇在你门前的那棵树上，看着你，守护你。
