private void init(Context context) {
		TabStripLayout tabStrip = new TabStripLayout(context);
		// Initialise paint.
		Paint paint = new Paint();
		paint.setAntiAlias(true);
		paint.setDither(true);
		paint.setStyle(Paint.Style.FILL);
		paint.setColor(mSelectedColor);
		tabStrip.setPaint(paint);
		// Add tab strip view.
		addTabStrip(tabStrip);
	}

	private void addTabStrip(TabStripLayout tabStrip) {
		if (getChildCount() > 0) {
			removeAllViews();
		}
		int width = LayoutParams.WRAP_CONTENT;
		int height = LayoutParams.MATCH_PARENT;
		addView(tabStrip, width, height);
		mTabStripLayout = tabStrip;
	}

	/**
	 * Initialise strip since tabs added.
	 */
	public void initStrip() {
		if (mTabStripLayout.getChildCount() <= 0) {
			mTabStripLayout.setRectF(new RectF());
			return;
		}
		// Select the first tab.
		mLastSelectedTab = (TextView) mTabStripLayout.getChildAt(0);
		mLastSelectedTab.setTextColor(mSelectedColor);
		post(new Runnable() {
			@Override
			public void run() {
				int w = mTabWidth;
				int h = getHeight();
				float left = 0;
				float top = h - getDipSize(2);
				float right = w;
				float bottom = h;
				RectF rectF = new RectF(left, top, right, bottom);
				// Initialise the first strip.
				mTabStripLayout.setRectF(rectF);
			}
		});
	}

3、添加Tab子控件

	这一步是向TabLayout添加子控件，实际上是添加到TabStripLayout控件中。添加的参数是索引及对应的数据，Tab是默认的TextView。如果要拓展成其他控件，直接把TextView换成自己想要的控件即可。

	/**
	 * Add tab to strip
	 * 
	 * @param index
	 *            The index of tab.
	 * @param title
	 *            The title of tab.
	 */
	public void addTab(int index, String title) {
		int textSize = 15;
		TextView tab = new TextView(getContext());
		tab.setText(title);
		tab.setTextSize(textSize);
		tab.setTextColor(mNormalColor);
		tab.setGravity(Gravity.CENTER);
		tab.setTypeface(Typeface.DEFAULT_BOLD);
		tab.setOnClickListener(this);
		tab.setFocusable(true);
		tab.setTag(index);
		tab.setLayoutParams(createTabParams());
		// Add tab to strip.
		mTabStripLayout.addView(tab);
	}

4、Tab子控件被选中

	TabLayout的每个Tab被选中有3个方法来控制，一个是在添加Tab时设置的监听，但是它不负责Tab滑动，因为这会引起抖动。第二个是selectTab(int position)方法，这个方法是直接选中某个Tab，内部实际上就只是执行了对应Tab设置的监听方法。第三个方法是selectTab(int position, float positionOffset)方法，这个方法负责移动Tab和指示器，不负责选中Tab。

	@Override
	public void onClick(View view) {
		if (mLastSelectedTab == view) {
			return;
		}
		// Set selected.
		mLastSelectedTab.setTextColor(mNormalColor);
		TextView currentTab = (TextView) view;
		currentTab.setTextColor(mSelectedColor);
		mLastSelectedTab = currentTab;
		// Call back.
		int position = (int) (view.getTag());
		if (mOnSelectedCallBack != null) {
			mOnSelectedCallBack.selected(position);
		}
	}

	/**
	 * Select tab by position.
	 * 
	 * @param position
	 *            The index of selected tab.
	 */
	public void selectTab(int position) {
		View view = mTabStripLayout.getChildAt(position);
		view.performClick();
	}

	/**
	 * Select tab by position and position offset.
	 * 
	 * @param position
	 *            The index of selected tab.
	 * @param positionOffset
	 *            The position offset.
	 */
	public void selectTab(int position, float positionOffset) {
		int lastPosition = mTabStripLayout.indexOfChild(mLastSelectedTab);
		if (lastPosition < 0) {
			return;
		}
		int nextPosition = -1;
		float nextP = 0;// Percent.
		float offset = 0;
		if (lastPosition == position) {// Move right.
			nextPosition = lastPosition + 1;
			nextP = positionOffset;
			offset = mLastSelectedTab.getWidth() * nextP;
		} else if (lastPosition > position) {// Move left.
			nextPosition = lastPosition - 1;
			nextP = 1f - positionOffset;
			offset = -mLastSelectedTab.getWidth() * nextP;
		}
		View nextTab = mTabStripLayout.getChildAt(nextPosition);
		if (nextTab != null) {
			float left = mLastSelectedTab.getLeft() + offset;
			int width = nextTab.getMeasuredWidth();
			int parentWidth = getWidth();
			float newPosition = left - parentWidth / 2 + width / 2;
			// Update position.
			scrollTo((int) newPosition, 0);
			mTabStripLayout.updateHorizontalStrip(left);
		}
	}

	有孩童会问，我只分析了TabLayout与ViewPager应用的场景，那要是没有与ViewPager一起用，而是单纯的切换Fragment或者View，那怎么办？这个简单，我有一种思路，只需要用属性动画的估值器和插值算法来控制带偏移量的移动，当动画计算完成后，我们再选中Tab。当然，这样子做又会跟播放动画一样，在选中之后滑动了，没办法，谁叫你设计成机械切换的，本文讲的只是恰巧利用了ViewPager滑动的特性。

5、对外开放的接口回调

	TabLayout对外开放了一个OnSelectedCallBack的接口，它用于在选中某个Tab之后能够提醒调用方选中了哪个序号的Tab，方便做出回应。

	// Out to user interface.
	public interface OnSelectedCallBack {
		public void selected(int position);
	}

	/**
	 * Set outside callback.
	 * 
	 * @param callBack
	 */
	public void setOnSelectedCallBack(OnSelectedCallBack callBack) {
		mOnSelectedCallBack = callBack;
	}

使用示例

	写完一个控件，我最关心的是怎么用，看完上面的介绍估计大家心里都明白了，无非是拿TabLayout与ViewPager结合起来使用。先看布局文件，就是这么简单。

<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="@color/content_bg"
    android:orientation="vertical" >

    <com.tablayout.view.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#193357" />

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

</LinearLayout>

	然后，看Java代码的实现。先获取到TabLayout与ViewPager控件，再分别初始化，最后设置下监听就可以了。

	private void findView() {
		mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
		mViewPager = (ViewPager) findViewById(R.id.viewPager);
	}

	private void initView() {
		CustomPagerAdapter adapter = new CustomPagerAdapter(
				getSupportFragmentManager());
		mViewPager.setAdapter(adapter);
		for (int i = 0; i < adapter.getCount(); i++) {
			String title = adapter.getPageTitle(i).toString();
			mTabLayout.addTab(i, title);
		}
		mTabLayout.initStrip();
	}

	private void setListener() {
		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
				mTabLayout.selectTab(position);
			}

			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {
				mTabLayout.selectTab(position, positionOffset);
			}

			@Override
			public void onPageScrollStateChanged(int state) {
			}
		});
		mTabLayout.setOnSelectedCallBack(new OnSelectedCallBack() {
			@Override
			public void selected(int position) {
				mViewPager.setCurrentItem(position);
			}
		});
	}

结语

	先给github地址：https://github.com/ljj19920425/TabLayout。
	我觉得TabLayout自定义实现关键在指示器的选择和带偏移量滑动上。指示器我们选择绘制的方式，这很会使得实现很灵活，拓展新性强，因为我们可以绘制自己想要的任何图案。指示器的滑动，是根据ViewPager的带偏移量的方法来实现的，这会有向用户展示一个滑动过度的过程，跟着手势移动。
	有时候觉得，虽然谷歌给我们提供了某些控件，但是我们自己实现出来也蛮有意思的。借此，我也把我的思路分享出来，给不会的童鞋参考。