Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI

731 查看

1、概述

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

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

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

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

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

ok，实现前感谢下这位哥们，博客地址：http://blog.csdn.net/qibin0506/article/details/42046559 ，没看到这篇博客，也不会有此篇了（目测博主群里的）。

2、实现前的分析

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

内容区域我们基本不用考虑，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~~

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

3、使用方式

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

1、布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:zhy="http://schemas.android.com/apk/res/com.example.demo_zhy_mms_miui"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#ffffffff"

android:orientation="vertical" >

<com.example.demo_zhy_mms_miui.ViewPagerIndicator

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" >

</com.example.demo_zhy_mms_miui.ViewPagerIndicator>

<android.support.v4.view.ViewPager

android:id="@+id/id_vp"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" >

</android.support.v4.view.ViewPager>

</LinearLayout>

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

2、MainActivity

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<Fragment> mTabContents = new ArrayList<Fragment>();

private FragmentPagerAdapter mAdapter;

private ViewPager mViewPager;

// private List<String> mDatas = Arrays.asList("短信1", "短信2", "短信3", "短信4",

// "短信5", "短信6", "短信7", "短信8", "短信9");

private List<String> mDatas = Arrays.asList("短信",pan class="crayon-v">List<String> mDatas = Arrays.asList("短信",到有的实现这样一个指示器，当然了，不准备一模一样，搞得没有创新似的，再看标题，跟MIUI相关，所以我们准备做一个特性与TabPageIndicator一致的，但是样子和MIUI的Tab一样的~~

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

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

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

ok，实现前感谢下这位哥们，博客地址：http://blog.csdn.net/qibin0506/article/details/42046559 ，没看到这篇博客，也不会有此篇了（目测博主群里的）。

2、实现前的分析

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

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

主要是顶部的Tab区域：

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

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

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

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

3、使用方式

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

1、布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:zhy="http://schemas.android.com/apk/res/com.example.demo_zhy_mms_miui"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#ffffffff"

android:orientation="vertical" >

<com.example.demo_zhy_mms_miui.ViewPagerIndicator

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" >

</com.example.demo_zhy_mms_miui.ViewPagerIndicator>

<android.support.v4.view.ViewPager

android:id="@+id/id_vp"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" >

</android.support.v4.view.ViewPager>

</LinearLayout>

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

2、MainActivity

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<Fragment> mTabContents = new ArrayList<Fragment>(