首先带大家看一下实现效果，用了两种实现方式:
1.基于LinearLayout实现，导航栏不可响应手指滑动
2.基于HorizontalScrollView实现，导航栏可响应手指滑动
实现方式虽然不一样，但是使用的是一样的，因为我接口封装的一模一样，下面看实现效果。
基于LinearLayout的实现： 
基于HorizontalScrollView的实现: 
两者效果一样，区别就在于导航条可否随用户操作滑动。
下面只说明LinearLayout实现，HorizontalScrollView仅仅是套了一层LinearLayout，因为它只允许套一个子控件。
需求开发点：
1.自定义控件的编写（通用方法：构造函数、init()、onMeasure、onLayout、onDraw、dispatchDraw）
2.白色圆点的偏移量的计算
3.当Tab页超过５个的时候，白点和LinearLayout内容的组合滑动，达到白点不动，而文字移动的效果。
实现这三点，这个控件就算完事，当然一些细节方面的，可以根据自己的需求去调优。
1.自定义控件的编写
１) 这里主要是onMeasure方法的复写，不能用默认的onMeasure，需要我们根据Tab的数量去计算，下图是１－６个Tab的measure结果
这个就是根据Tab的数量平分屏幕的宽，当数量超过５个的时候，为了保持效果，只显示５个，超出的内容将其追加到屏幕外面，屏幕是有界的，视图是无界的，你可以无限往右边添加，只要内存能容下，可以用个for循环无限添加看看发生什么。
2) 复写dispatchDraw方法，这里dispatchDraw方法的作用就是画一个白色的圆点。
白色圆点的偏移量的计算
这个得靠ViewPager的OnPageChangeListener，通过它onPageScrolled的回调去计算，计算好了调用invalidate()去重绘。
当Tab页超过５个的时候，白点和LinearLayout内容的组合滑动，达到白点不动，而文字移动的效果。
当滑动到第５个Tab，如果只是白色圆点移动就会移动到屏幕外面去，这个时候也需要让LinearLayout内容联动，通过scrollTo方法，往与白点相反的方向移动内容，使其和白点的移动达到平衡，这样白点不动，上面的标题内容移动。
下面分析，写该控件需要的一些变量，先看截图: 
1.需要白点是吧，我们用画笔画，所以Paint需要
2.白点画多大？所以需要一个白点的半径变量radius
3.白点的偏移量，我们定义一个变量mOffset，根据ViewPager的滑动动态计算
4.上面还有一排文字，用TextView实现，这个TextView是根据Tab的数量动态添加的，数量不可控，我这里并没有定义成变量。但是文字内容对应的是一个Fragment的标题，也就是说标题和Fragment是一一对应的关系。ＯＫ用Map。
/** * 存放Tab的集合 Key:导航栏的标题 Fragment:导航页 */ private Map<String, Fragment> mTabs;TextView就是根据mTabs的数量动态添加的。
5.我们怎么去计算滑动偏移量呢？这个得靠ViewPager的OnPageChangeListener，通过它onPageScrolled的回调去计算mOffset，就是通过这种计算圆点的偏移，这里我持有了一个ViewPager的引用，所以有变量mViewPager，其实要不要关系不大.
6.屏幕最大可显示的Tab数量MAX_VISIBLE_TAB_COUNTS，总不能有100个你就显示100个吧.
7.实际屏幕上可显示的Tab数量mRealVisibleTabCounts
8.屏幕宽度mScreenWidth辅助onMeasure计算的
下面是实现代码：
package com.csm.hwtab;import java.util.ArrayList;import java.util.LinkedHashMap;import java.util.List;import java.util.Map;import android.annotation.SuppressLint;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Paint.Cap;import android.graphics.Paint.Style;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.util.TypedValue;import android.view.Gravity;import android.view.View;import android.view.View.OnClickListener;import android.widget.LinearLayout;import android.widget.TextView;/** * @author Rander.C */@SuppressLint("NewApi")public class TabLinearLayout extends LinearLayout implements OnClickListener, OnPageChangeListener { /** * 最大可显示的Tab数，可写成自定义属性在xml里面配置 */ private static final int MAX_VISIBLE_TAB_COUNTS = 5; /** * 实际可见的Tab数，比如有8个Tab,超过8个，为了保证效果，最多显示5个 * 此时mRealVisibleTabCounts为5 * 如果只有3个tab小于5个，则mRealVisibleTabCounts为3 * 并根据这个去计算每个tab的宽度，屏幕宽度除以mRealVisibleTabCounts嘛 */ private int mRealVisibleTabCounts; /** * 小圆点滑动偏移量 */ private float mOffset; /** * 绘制小圆点画笔 */ private Paint mPaint; /** * 小圆点半径 */ private int mCircleRadius; /** * 屏幕宽度 */ private int mScreenWidth; /** * 存放Tab的集合 Key:导航栏的标题 Fragment:导航页 */ private Map<String, Fragment> mTabs; /** * View中有getContext()方法，用变量就会 * 多一个Context引用,会增加一丁点虚拟机的负担吗？ * 如果不用变量，但是每次都使用getContext()，是不是都要多一层 * 调用栈，这个怎么权衡，求答案，还是我想多了？ */ private Context mContext; private ViewPager mViewPager; public TabLinearLayout(Context context, AttributeSet attrs) { this(context, attrs, -1); } public TabLinearLayout(Context context) { this(context, null); } public TabLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { mContext = getContext(); setOrientation(HORIZONTAL); mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setDither(true); mPaint.setStyle(Style.FILL); mPaint.setColor(Color.WHITE); mPaint.setStrokeCap(Cap.ROUND); DisplayMetrics metrics = getResources().getDisplayMetrics(); mScreenWidth = metrics.widthPixels; mCircleRadius = (int) getResources().getDimension(R.dimen.radius); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int tabCount = getChildCount(); if (tabCount == 0) { return; } /** 不管默认测量结果怎么样，我们都要重新给其宽度赋值*/ mRealVisibleTabCounts = MAX_VISIBLE_TAB_COUNTS < tabCount ? MAX_VISIBLE_TAB_COUNTS : tabCount; // 为每一个子view重新分配mScreenWidth / mRealVisibleTabCounts大小的宽度 int averageWidth = mScreenWidth / mRealVisibleTabCounts; for (int i = 0; i < tabCount; i++) { View view = getChildAt(i); LinearLayout.LayoutParams params = (android.widget.LinearLayout.LayoutParams) view.getLayoutParams(); params.weight = 0; params.width = averageWidth; view.setLayoutParams(params); } } /** * 获得Tabs列表 * @return */ public List<Fragment> getTabs() { return new ArrayList(mTabs.values()); } /** * 添加一个Tab项,添加一个tab的时候同时给 * 该视图添加一个TextView * @param title * @param tab */ public void addTab(String title, Fragment tab) { if (mTabs == null) { mTabs = new LinkedHashMap<>(); } mTabs.put(title, tab); addView(createTabItem(title, mTabs.size() - 1)); } /** * 设置ViewPager * 同时给其设置OnPageChangeListener监听器。 * @param viewPager */ public void setViewPager(ViewPager viewPager) { mViewPager = viewPager; mViewPager.setOnPageChangeListener(this); } /** * 创建一个Tab视图 * @param title Fragment对应的标题 * @param index 该Fragment对应的索引下标 * @return 已经构造好的tab视图 */ private View createTabItem(String title, int index) { TextView tv_title = new TextView(mContext); tv_title.setText(title); tv_title.setTag(index); tv_title.setGravity(Gravity.CENTER); tv_title.setTextColor(Color.WHITE); tv_title.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18); tv_title.setOnClickListener(this); return tv_title; } @Override public void onClick(View v) { int tabIndex = (Integer) v.getTag(); if (onTabOperatorListener != null) { onTabOperatorListener.onTabClick(tabIndex); } mViewPager.setCurrentItem(tabIndex); } @Override public void onPageScrollStateChanged(int state) { if (null != onTabOperatorListener) { onTabOperatorListener.onPageScrollStateChanged(state); } } @Override public void onPageScrolled(int sourcePosition, float positionOffset, int positionOffsetPixels) { mRealVisibleTabCounts = MAX_VISIBLE_TAB_COUNTS < getChildCount() ? MAX_VISIBLE_TAB_COUNTS : getChildCount(); int tabWidth = getWidth() / mRealVisibleTabCounts; // 计算小圆点的偏移量，这个可以画图理解 mOffset = (int) (tabWidth / 2 + sourcePosition * tabWidth + positionOffset * tabWidth ); // 如果滚动到最后一个，则同时要向左滚动tab内容，这种情况是：原点在向右移动，同时整体又向做滑动，两个滑动相互抵消，相当于原点没有移动 if (getChildCount() > mRealVisibleTabCounts && positionOffset > 0 && sourcePosition >= mRealVisibleTabCounts - 1) { scrollTo((int) ((sourcePosition + 1 - mRealVisibleTabCounts) * tabWidth + tabWidth * positionOffset), 0); } invalidate(); if (null != onTabOperatorListener) { onTabOperatorListener.onTabScrolled(sourcePosition, positionOffset, positionOffsetPixels); } } @Override public void onPageSelected(int index) { if (null != onTabOperatorListener) { onTabOperatorListener.onTabSelected(index); } /** * 这里不要多想，只是为了保证选中的tab为第一个时，让布局重置到原点 */ if(index == 0) { scrollTo(0, 0); } } /** * Tab操作相关的监听器 * @author rander */ public interface OnTabOperatorListener { void onTabClick(int tabIndex); void onTabSelected(int tabIndex); void onTabScrolled(int sourcePosition, float positionOffset, int positionOffsetPixels); void onPageScrollStateChanged(int state); } public OnTabOperatorListener onTabOperatorListener; public void setOnTabItemClickListener(OnTabOperatorListener onTabOperatorListener) { this.onTabOperatorListener = onTabOperatorListener; } @Override protected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas); //如果只有一个Tab则，不绘制圆点 if (getChildCount() <= 1) { return; } //根据mOffset绘制偏移量 canvas.drawCircle(mOffset, getHeight() - mCircleRadius * 2, mCircleRadius, mPaint); }}关于偏移量的计算画图理解:
偏移量计算的表达式：
mOffset = (int) (tabWidth / 2 + sourcePosition * tabWidth + positionOffset * tabWidth );图解: 
第一个竖线和第二个竖线:tabWidth / 2
第二个竖线和第三个竖线:sourcePosition * tabWidth
第三个竖线和第四个竖线:positionOffset * tabWidth
一相加就是偏移量了,这个要找到sourcePosition和positionOffset的规律就好计算偏移量了，scrollTo的偏移量也可以参照这个理解。
接下来就是使用了.求Linux下的好的画图工具
书写布局tab.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" > <com.csm.hwtab.TabLinearLayout android:id="@+id/tab" android:layout_width="match_parent" android:layout_height="65dp" android:background="#0000ff" android:gravity="center_vertical" android:orientation="vertical" > </com.csm.hwtab.TabLinearLayout> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /></LinearLayout>在Activity中使用：
package com.csm.hwtab;import com.csm.hwtab.adapter.MyFragmentPagerAdapter;import com.csm.hwtab.fragment.OneFragment;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.view.Window;public class TestActivity extends FragmentActivity{ private ViewPager mViewPager; private TabLinearLayout mTabview; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.tab); initTabsView(); } private void initTabsView() { mViewPager = (ViewPager) findViewById(R.id.view_pager); mTabview = (TabLinearLayout)findViewById(R.id.tab); mTabview.addTab("先秦0", new OneFragment()); mTabview.addTab("先秦1", new OneFragment()); mTabview.addTab("先秦2", new OneFragment()); mTabview.addTab("先秦3", new OneFragment()); mTabview.addTab("先秦4", new OneFragment()); mTabview.addTab("先秦5", new OneFragment()); mTabview.addTab("先秦6", new OneFragment()); mViewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), mTabview.getTabs())); mTabview.setViewPager(mViewPager); mViewPager.setCurrentItem(0); }}效果就如同上面的效果一样了。
源码下载
github:https://github.com/shuangmin/HwTab