哈，今天给大家带来一个ViewPagerIndicator的制作，相信大家在做tabIndicator的时候，大多数人都用过TabPageIndicator，并且很多知名APP都使用过这个开源的指示器。大家有没有想过如何自己去实现这样的一个指示器，并且代码会有多复杂呢~~~今天，我就带领大家来从无到有的实现这样一个指示器，当然了，不准备一模一样，搞得没有创新似的，再看标题，跟MIUI相关，所以我们准备做一个特性与TabPageIndicator一致的，但是样子和MIUI的Tab一样的~~

首先仿MIUI比较简单，大家看看效果图：

?

但是呢，MIUI中所有的Tab的数量基本维持在两个到四个，但是呢，我们可能栏目比较多，假设我们10来个Tab咋办，总不能把屏幕均分10份吧，这我5.3的视力我也不能接受~~所以我们需要做类似TabPageIndicator特性，显示出几个，然后剩下的，可以Tab跟随ViewPager滑动时联动，效果图是这样的：

擦，多看一会，是联动的，上面的Tab也是支持点击的~

其实学完这个，如果你衷与下面是下划线的，简单修改几行代码就o了~不管你信或不信，反正我是信了。

对于这样的指示器，我们首先分析下如何制作。

内容区域我们基本不用考虑，ViewPager+FragmentPagerAdapter即可。

主要是顶部的Tab区域：

首先虽然是自定义控件，但是我们只需要采用组合的方式就行：

控件的选择：外层布局我准备使用LinearLayout，设置个方向水平就行了，内部的标题呢，默认的话，我决定使用TextView。

自定义属性：因为我们可视的Tab属性应该是可以由用户来定制的，所以我们对外公布一个自定义的属性，由用户来设置，每个TextView的width即ScreenWidth/mVisibleTab。

三角形的TabIndicator绘制：不管是绘制三角形还是下划线的指示器，我们肯定是在Tab的外层布局中进行绘制，那我们初始化时绘制一个三角形，最终中dispatchDraw中，根据三角形的位置，直接绘制。

三角形指示器的位置：位置的y坐标比较容易计算，这里不赘述。主要是x坐标，因为x坐标跟随ViewPager移动，那么我们如何获得移动的距离呢？有个PageChangeListener里面有个onPageScrolled方法，这个方法回调positionOffset和positionOffsetPixels，我们可以跟随这个进行控制x的位置。

LinearLayout的联动，当前Tab如果是移动到可见Tab的最后一个，我们依然是根据onPageScrolled提供的positionOffset，让我们的Linearlayout进行scrollXTo~~

好了，该分析的都分析了~~这里需要说明，自定义控件有时候组合已经有的控件实现的效果也是棒棒哒~~既然有合适的，何必自己去从无到有呢~~

在编写代码前，还是先贴下使用方式，让大家先有个感官上的认识，然后再根据这个认识，去探索代码中的实现过程~~

? ? ? ? ? ? android:id="@+id/id_indicator"
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="45dp"
? ? ? ? android:background="@drawable/title_bar_bg_one_row"
? ? ? ? android:orientation="horizontal"
? ? ? ? zhy:item_count="3" >
? ? ?
? ?

? ? ? ? ? ? android:id="@+id/id_vp"
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="0dp"
? ? ? ? android:layout_weight="1" >
? ?

首先我们在布局文件中声明下，一个是ViewPagerIndicator ,一个是我们的ViewPager.?

package com.example.demo_zhy_mms_miui;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Window;

public class MainActivity extends FragmentActivity
{
?private List mTabContents = new ArrayList();
?private FragmentPagerAdapter mAdapter;
?private ViewPager mViewPager;
//?private List mDatas = Arrays.asList("短信1", "短信2", "短信3", "短信4",
//? ?"短信5", "短信6", "短信7", "短信8", "短信9");
?private List mDatas = Arrays.asList("短信", "收藏", "推荐");

?private ViewPagerIndicator mIndicator;

?@Override
?protected void onCreate(Bundle savedInstanceState)
?{
? super.onCreate(savedInstanceState);
? requestWindowFeature(Window.FEATURE_NO_TITLE);
? setContentView(R.layout.vp_indicator);

? initView();
? initDatas();
? //设置Tab上的标题
? mIndicator.setTabItemTitles(mDatas);
? mViewPager.setAdapter(mAdapter);
? //设置关联的ViewPager
? mIndicator.setViewPager(mViewPager,0);

?}

?private void initDatas()
?{

? for (String data : mDatas)
? {
? ?VpSimpleFragment fragment = VpSimpleFragment.newInstance(data);
? ?mTabContents.add(fragment);
? }

? mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
? {
? ?@Override
? ?public int getCount()
? ?{
? ? return mTabContents.size();
? ?}