Android开发之自定义ViewPager三角形指示器
2017-07-18 本文已影响825人
李晨玮
最近公司的产品要进行改版，其中涉及到了登陆页面的UI，需要把注册和登陆功能换成ViewPager的页面切换，本想利用下原生自带的TabLayout作为ViewPager指示器就完事了，谁知UI设计在指示器上多了个小三角，虽然网上已经有封装的很完善的ViewPager指示器，不过这个小东西确实没什么难度，就没必要引入第三方了，顺手自己写了个，先来看下实现效果：
ViewPager三角形指示器
我准备从三部分来讲
1、ViewPager指示器的简单实现
2、ViewPager指示器的完整封装
3、ViewPager指示器的封装使用(两行代码完成)
1、ViewPager指示器的实现
这部分其实很简单，我们先不考虑其他过多的干扰因素，我们就单纯的把它当成一个可跟随ViewPager滑动的标题栏，来看下这张图：
简易版ViewPager指示器拆分图
实现思路：
1、首先这个页面是由一个横向排列的线性布局LinearLayout和ViewPager组成，其中这个线性布局LinearLayout里包含了多个大小一样的TextView。
2、再来我们去监听这个ViewPager的滑动事件把对应位置上的文字进行高亮显示即可。
3、然后我们要做的就是在这个线性布局LinearLayou里去绘制小三角形，让其也跟随着ViewPager的移动，位置上的相关数据我们在监听ViewPager的滑动事件里的回调方法中就可以得到，所以应该没什么大问题。
接下来我们分析下这个三角形的绘制：
所需要的数据：三角形的底边宽，高度，绘制的起始位置
为了能够适应不同屏幕大小，这里我们就不对三角形的底边宽和高度进行固定值写死了，我们通过测量的方式去得到，然后用闭合路径Path去勾勒。
三角形的底边宽：我们取Tab宽度的六分之一（屏幕宽度/可见Tab数量/6）
三角形的高度：我们取底边宽的一半（屏幕宽度/可见Tab数量/6/2）
三角形绘制的起始位置：第一个Tab的中点减去底边宽度的一半（屏幕宽度/可见Tab数量/2-屏幕宽度/可见Tab数量/6/2）
附加：怎么确定三角形跟随着ViewPager滑动的位置呢？
在ViewPager的滑动监听回调接口中的onPageScrolled里的positionOffset参数已经给我们提供好了，它代表着页面滑动的偏移值，区间在[0,1)，也就是当前页面的滑动距离为：Tab的宽度*偏移值，这样三角形的某事某刻的x轴位置也就确定了，即初始位置+偏移距离
/**
* This method will be invoked when the current page is scrolled, either as part
* of a programmatically initiated smooth scroll or a user initiated touch scroll.
*
* @param position Position index of the first page currently being displayed.
* Page position+1 will be visible if positionOffset is nonzero.
* @param positionOffset Value from [0, 1) indicating the offset from the page at position.
* @param positionOffsetPixels Value in pixels indicating the offset from position.
*/
void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
这里是简单版本的代码实现(固定三个Tab页)：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.lcw.viewpagertriangleindicator.ViewPagerTriangleIndicator
android:id="@+id/vpti_main_tab"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@color/colorAccent"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="新闻"
android:textColor="#FFFFFF" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="音乐"
android:textColor="#FFFFFF" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="游戏"
android:textColor="#FFFFFF" />
</com.lcw.viewpagertriangleindicator.ViewPagerTriangleIndicator>
<android.support.v4.view.ViewPager
android:id="@+id/vp_main_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
package com.lcw.viewpagertriangleindicator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.WindowManager;
import android.widget.LinearLayout;
/**
* 自定义ViewPager指示器(三角形)
* Create by: chenwei.li
* Date: 2017/7/16
* Time: 下午1:39
* Email: lichenwei.me@foxmail.com
*/
public class ViewPagerTriangleIndicator extends LinearLayout {
private int mTriangleWidth;//三角形底边宽
private int mTriangleHeigh;//三角形高度
private int mTriangleInitPos;//三角形起始点
private int mTriangleMoveWidth;//三角形移动偏移
private Paint mPaint;
private Path mPath;
public ViewPagerTriangleIndicator(Context context) {
super(context, null);
}
public ViewPagerTriangleIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
initPaint();
}
/**
* 初始化画笔
*/
private void initPaint() {
mPaint = new Paint();
mPaint.setColor(Color.parseColor("#FFFFFF"));
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
}
/**
* 初始化三角形
*/
private void initTriangle() {
mPath = new Path();
mPath.moveTo(0, 0);
mPath.lineTo(mTriangleWidth, 0);
mPath.lineTo(mTriangleWidth / 2, -mTriangleHeigh);
mPath.close();
}
/**
* 当布局大小发生变化时回调
*
* @param w
* @param h
* @param oldw
* @param oldh
*/
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mTriangleWidth = w / 3 / 6;
mTriangleHeigh = mTriangleWidth / 2 - 12;
mTriangleInitPos = getScreenWidth() / 3 / 2 - mTriangleWidth / 2;
initTriangle();
}
/**
* 绘制子View
*
* @param canvas
*/
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
canvas.translate(mTriangleInitPos + mTriangleMoveWidth, getHeight());
canvas.drawPath(mPath, mPaint);
}
/**
* 监听ViewPager滑动,联动Indicator
*
* @param position
* @param positionOffset
*/
protected void scroll(int position, float positionOffset) {
int tabWidth = getScreenWidth() / 3;
mTriangleMoveWidth = (int) (tabWidth * position + tabWidth * positionOffset);
invalidate();
}
/**
* 获取屏幕宽度
*
* @return
*/
private int getScreenWidth() {
WindowManager windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics displayMetrics = new DisplayMetrics();
windowManager.getDefaultDisplay().getMetrics(displayMetrics);
return displayMetrics.widthPixels;
}
}
package com.lcw.viewpagertriangleindicator;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
/**
* ViewPgaer三角形指示器演示
* Create by: chenwei.li
* Date: 2017/7/16
* Time: 下午1:54
* Email: lichenwei.me@foxmail.com
*/
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
private ViewPagerTriangleIndicator mViewPagerTriangleIndicator;
private List<String> mTitles = Arrays.asList("新闻", "音乐", "游戏");
private List<Fragment> mFragments = new ArrayList<Fragment>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.vp_main_content);
mViewPagerTriangleIndicator = (ViewPagerTriangleIndicator) findViewById(R.id.vpti_main_tab);
//创建Fragment
for (String title : mTitles) {
SimpleFragmet simpleFragmet = SimpleFragmet.newInstance(title);
mFragments.add(simpleFragmet);
}
//设置适配器
mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
});
//添加滑动监听
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
mViewPagerTriangleIndicator.scroll(position, positionOffset);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}
看下效果图：
简单版本ViewPager指示器实现
2、ViewPager指示器的封装
在上面我们已经实现了简单版本的ViewPager带三角形的滑动指示器实现，接下来我们需要对其进行封装，当它变得更加简单易用。
首先我们来分析下简单版本的不足：
1、Tab数量是固定的，每次都需要在XML里编写TextView，太过繁琐，当Tab数量很多的时候，并且weight都是1时，就会挤在一屏幕里。
2、调用太复杂，需要在Activity里去实现滑动监听，并调用三角形联动。
3、其他一些小细节，比如当Tab页只有1页或者2页的时候，指示器三角形会变得很大，影响美观等。
带着这些问题，我们开启ViewPagerTriangleIndicator的优化之旅吧！
首先我们需要一个当前页面可显示的最大Tab数，也就是屏幕可见区域的最大Tab数，这里引入我们的自定义属性（关于自定义属性的使用，这里就不再做过多阐述）:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="visible_tab_num" format="integer" />
<declare-styleable name="ViewPagerTriangleIndicator">
<attr name="visible_tab_num" />
</declare-styleable>
</resources>
/**
* 获取自定义属性值(获取xml设置最大可见Tab数量)
*
* @param context
* @param attrs
*/
private void initAttr(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerTriangleIndicator);
if (typedArray != null) {
mVisibleTabNum = typedArray.getInt(R.styleable.ViewPagerTriangleIndicator_visible_tab_num, VISIBLE_COUNT_NUM);
}
}
通过上面的代码我们就可以拿到在XML文件中visible_tab_num的值了，根据这个值我们按照上文提到的思路就可以得到一些数据，比如三角形的底边宽，高度，起始位置等。
需要注意的是当前的Tab的宽度就需要动态去计算了，我们根据屏幕宽度/可见Tab数，就可以得到每个Tab的宽度，我们在XML加载完毕的时候去进行动态的修改。
/**
* 在XML布局加载完毕后回调
*/
@Override
protected void onFinishInflate() {
super.onFinishInflate();
//根据可显示的Tab数量动态去改变Tab的宽度
int totalTabNum = getChildCount();
if (mVisibleTabNum != 0 && totalTabNum != 0) {
for (int i = 0; i < totalTabNum; i++) {
View view = getChildAt(i);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) view.getLayoutParams();
layoutParams.weight = 0;
layoutParams.width = getScreenWidth() / mVisibleTabNum;
view.setLayoutParams(layoutParams);
}
}
}
还有，我们还需要对scroll方法进行一些改造：
/**
* 监听ViewPager滑动,联动Indicator
*
* @param position
* @param positionOffset
*/
protected void scroll(int position, float positionOffset) {
int tabWidth = getScreenWidth() / mVisibleTabNum;
mTriangleMoveWidth = (int) (tabWidth * position + tabWidth * positionOffset);
if ((mVisibleTabNum - 2) <= position && positionOffset > 0 && getChildCount() > mVisibleTabNum) {
this.scrollTo((int) ((position - (mVisibleTabNum - 2)) * tabWidth + tabWidth * positionOffset), 0);
}
invalidate();
}
当Tab数量超出一页的时候，随着三角形的滑动我们也需要对Tab进行一个滑动处理，这里举个例子：
当屏幕可见Tab数为4时，那么Tab从第3个滑动到第4个的时候，需要同时把第1个Tab往左移出屏幕，此时滑动距离相对于整个指示器为1个Tab的距离。
当屏幕可见Tab数为4时，那么Tab从第4个滑动到第5个的时候，需要同时把第2个Tab往左移出屏幕，此时滑动距离相对于整个指示器为2个Tab的距离。
哈哈，是不是有点绕，没想明白的朋友拿笔在纸上吧，上面的判断也是由此得出。
好了，接下来就要开始解决我们的问题了。
解决问题1：
既然ViewPager指示器是继承于线性布局LinearLayout，那也就是ViewGroup，我们很自然的可以想到addView这个方法，所以我们只需要让其接收一个List<String>的集合对象并根据集合元素的文字信息动态添加子View即可，实现代码如下：
/**
* 设置指示器标题并给标题添加监听事件
*
* @param titles
*/
public void setPageTitle(List<String> titles) {
this.mTitles = titles;
if (mTitles != null && mTitles.size() > 0) {
removeAllViews();
for (int i = 0; i < mTitles.size(); i++) {
TextView textView = new TextView(getContext());
LinearLayout.LayoutParams layoutParams = new LayoutParams(getScreenWidth() / mVisibleTabNum, LayoutParams.MATCH_PARENT);
layoutParams.width = getScreenWidth() / mVisibleTabNum;
textView.setText(mTitles.get(i));
textView.setGravity(Gravity.CENTER);
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
textView.setTextColor(Color.parseColor("#FFFFFF"));
textView.setLayoutParams(layoutParams);
addView(textView);
}
}
}
解决问题2：
我们可以在ViewPager指示器内部去持有外部ViewPager的引用并且去实现滑动监听即可：
/**
* 绑定ViewPager
*
* @param viewPager
*/
public void setViewPagerWithIndicator(ViewPager viewPager) {
this.mViewPager = viewPager;
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (mAddPageChangeListener != null) {
mAddPageChangeListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
scroll(position, positionOffset);
}
@Override
public void onPageSelected(int position) {
setInitPageTitlesColor();
setPageTitleHighColor(position);
mViewPager.setCurrentItem(position);
if (mAddPageChangeListener != null) {
mAddPageChangeListener.onPageSelected(position);
}
}
@Override
public void onPageScrollStateChanged(int state) {
if (mAddPageChangeListener != null) {
mAddPageChangeListener.onPageScrollStateChanged(state);
}
}
});
}
这里大家可能会注意到mAddPageChangeListener这个变量，这里是重写了原生自带addOnPageChangeListener的一个回调函数，因为我们在内部去实现了addOnPageChangeListener监听，当外部的ViewPager再去实现滑动监听时，此时就会把我们内部的实现方法覆盖，也就是会导致 scroll(position, positionOffset);方法失效，所以这里我们需要再去定义一个滑动监听器即可，并且提供注册监听器方法。
/**
* 复制官方addOnPageChangeListener对应的接口方法
* Callback interface for responding to changing state of the selected page.
*/
public interface AddPageChangeListener {
/**
* This method will be invoked when the current page is scrolled, either as part
* of a programmatically initiated smooth scroll or a user initiated touch scroll.
*
* @param position Position index of the first page currently being displayed.
* Page position+1 will be visible if positionOffset is nonzero.
* @param positionOffset Value from [0, 1) indicating the offset from the page at position.
* @param positionOffsetPixels Value in pixels indicating the offset from position.
*/
void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
/**
* This method will be invoked when a new page becomes selected. Animation is not
* necessarily complete.
*
* @param position Position index of the new selected page.
*/
void onPageSelected(int position);
/**
* Called when the scroll state changes. Useful for discovering when the user
* begins dragging, when the pager is automatically settling to the current page,
* or when it is fully stopped/idle.
*
* @param state The new scroll state.
* @see ViewPager#SCROLL_STATE_IDLE
* @see ViewPager#SCROLL_STATE_DRAGGING
* @see ViewPager#SCROLL_STATE_SETTLING
*/
void onPageScrollStateChanged(int state);
}
/**
* 避免用户监听ViewPager复写了addOnPageChangeListener使得三角形滑动效果失效
*
* @param addPageChangeListener
*/
public void addPageChangeListener(AddPageChangeListener addPageChangeListener) {
this.mAddPageChangeListener = addPageChangeListener;
}
解决问题3：
这里我们只需要去定义一个三角形底部宽度的默认最大值即可，这个默认值可以是屏幕宽度的三分之一的六分之一，也就是当有3个Tab时候，三角形底部的宽度。
private int DEFAULT_TRIANGLE_WIDTH = getScreenWidth() / 3 / 6;//最大三角形底边宽度
if (mTriangleWidth > DEFAULT_TRIANGLE_WIDTH) {
mTriangleWidth = DEFAULT_TRIANGLE_WIDTH;
}
再来我们还可以去做一些事情，比如设置Tab的文字默认颜色，高亮颜色，监听事件等。
这里我把完整的ViewPagerTriangleIndicator代码贴一下：
package com.lcw.viewpagertriangleindicator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.List;
/**
* 自定义ViewPager指示器(三角形)
* Create by: chenwei.li
* Date: 2017/7/16
* Time: 下午1:39
* Email: lichenwei.me@foxmail.com
*/
public class ViewPagerTriangleIndicator extends LinearLayout {
private int mTriangleWidth;//三角形底边宽
private int mTriangleHeigh;//三角形高度
private int mTriangleInitPos;//三角形起始点
private int mTriangleMoveWidth;//三角形移动偏移
private int DEFAULT_TRIANGLE_WIDTH = getScreenWidth() / 3 / 6;//最大三角形底边宽度
private Paint mPaint;
private Path mPath;
private int mVisibleTabNum;//最大可显示Tab数量值
private static final int VISIBLE_COUNT_NUM = 4;//默认可显示的TAB数量为4个
private List<String> mTitles;//保存指示器标题
private ViewPager mViewPager;//次有外部ViewPager引用
private AddPageChangeListener mAddPageChangeListener;
public ViewPagerTriangleIndicator(Context context) {
super(context, null);
}
public ViewPagerTriangleIndicator(Context context, AttributeSet attrs) {
super(context, attrs);
initAttr(context, attrs);
initPaint();
}
/**
* 获取自定义属性值(获取xml设置最大可见Tab数量)
*
* @param context
* @param attrs
*/
private void initAttr(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerTriangleIndicator);
if (typedArray != null) {
mVisibleTabNum = typedArray.getInt(R.styleable.ViewPagerTriangleIndicator_visible_tab_num, VISIBLE_COUNT_NUM);
}
}
/**
* 初始化画笔
*/
private void initPaint() {
mPaint = new Paint();
mPaint.setColor(Color.parseColor("#FFFFFF"));
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
}
/**
* 初始化三角形
*/
private void initTriangle() {
mPath = new Path();
mPath.moveTo(0, 0);
mPath.lineTo(mTriangleWidth, 0);
mPath.lineTo(mTriangleWidth / 2, -mTriangleHeigh);
mPath.close();
}
/**
* 当布局大小发生变化时回调
*
* @param w
* @param h
* @param oldw
* @param oldh
*/
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mTriangleWidth = w / mVisibleTabNum / 6;
if (mTriangleWidth > DEFAULT_TRIANGLE_WIDTH) {
mTriangleWidth = DEFAULT_TRIANGLE_WIDTH;
}
mTriangleHeigh = mTriangleWidth / 2 - 8;
mTriangleInitPos = w / mVisibleTabNum / 2 - mTriangleWidth / 2;
initTriangle();
}
/**
* 在XML布局加载完毕后回调
*/
@Override
protected void onFinishInflate() {
super.onFinishInflate();
//根据可显示的Tab数量动态去改变Tab的宽度
int totalTabNum = getChildCount();
if (mVisibleTabNum != 0 && totalTabNum != 0) {
for (int i = 0; i < totalTabNum; i++) {
View view = getChildAt(i);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) view.getLayoutParams();
layoutParams.weight = 0;
layoutParams.width = getScreenWidth() / mVisibleTabNum;
view.setLayoutParams(layoutParams);
}
}
}
/**
* 绘制子View
*
* @param canvas
*/
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
canvas.translate(mTriangleInitPos + mTriangleMoveWidth, getHeight());
canvas.drawPath(mPath, mPaint);
}
/**
* 监听ViewPager滑动,联动Indicator
*
* @param position
* @param positionOffset
*/
protected void scroll(int position, float positionOffset) {
int tabWidth = getScreenWidth() / mVisibleTabNum;
mTriangleMoveWidth = (int) (tabWidth * position + tabWidth * positionOffset);
if ((mVisibleTabNum - 2) <= position && positionOffset > 0 && getChildCount() > mVisibleTabNum) {
this.scrollTo((int) ((position - (mVisibleTabNum - 2)) * tabWidth + tabWidth * positionOffset), 0);
}
invalidate();
}
/**
* 获取屏幕宽度
*
* @return
*/
private int getScreenWidth() {
WindowManager windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics displayMetrics = new DisplayMetrics();
windowManager.getDefaultDisplay().getMetrics(displayMetrics);
return displayMetrics.widthPixels;
}
/**
* 设置指示器标题并给标题添加监听事件
*
* @param titles
*/
public void setPageTitle(List<String> titles) {
this.mTitles = titles;
if (mTitles != null && mTitles.size() > 0) {
removeAllViews();
for (int i = 0; i < mTitles.size(); i++) {
final int pageIndex = i;
TextView textView = new TextView(getContext());
LinearLayout.LayoutParams layoutParams = new LayoutParams(getScreenWidth() / mVisibleTabNum, LayoutParams.MATCH_PARENT);
layoutParams.width = getScreenWidth() / mVisibleTabNum;
textView.setText(mTitles.get(i));
textView.setGravity(Gravity.CENTER);
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
textView.setTextColor(Color.parseColor("#FFFFFF"));
textView.setLayoutParams(layoutParams);
textView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//点击高亮文本
setInitPageTitlesColor();
((TextView) v).setTextColor(Color.parseColor("#FFFFFF"));
mViewPager.setCurrentItem(pageIndex);
}
});
addView(textView);
}
}
setInitPageTitlesColor();
setPageTitleHighColor(0);
}
/**
* 把所有标题颜色置为不高亮
*/
private void setInitPageTitlesColor() {
int totalView = getChildCount();
for (int i = 0; i < totalView; i++) {
View view = getChildAt(i);
if (view instanceof TextView) {
((TextView) view).setTextColor(Color.parseColor("#70FFFFFF"));
}
}
}
/**
* 设置标题高亮
*
* @param pos
*/
private void setPageTitleHighColor(int pos) {
View view = getChildAt(pos);
if (view instanceof TextView) {
((TextView) view).setTextColor(Color.parseColor("#FFFFFF"));
}
}
/**
* 绑定ViewPager
*
* @param viewPager
*/
public void setViewPagerWithIndicator(ViewPager viewPager) {
this.mViewPager = viewPager;
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (mAddPageChangeListener != null) {
mAddPageChangeListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
}
scroll(position, positionOffset);
}
@Override
public void onPageSelected(int position) {
setInitPageTitlesColor();
setPageTitleHighColor(position);
mViewPager.setCurrentItem(position);
if (mAddPageChangeListener != null) {
mAddPageChangeListener.onPageSelected(position);
}
}
@Override
public void onPageScrollStateChanged(int state) {
if (mAddPageChangeListener != null) {
mAddPageChangeListener.onPageScrollStateChanged(state);
}
}
});
}
/**
* 避免用户监听ViewPager复写了addOnPageChangeListener使得三角形滑动效果失效
*
* @param addPageChangeListener
*/
public void addPageChangeListener(AddPageChangeListener addPageChangeListener) {
this.mAddPageChangeListener = addPageChangeListener;
}
/**
* 复制官方addOnPageChangeListener对应的接口方法
* Callback interface for responding to changing state of the selected page.
*/
public interface AddPageChangeListener {
/**
* This method will be invoked when the current page is scrolled, either as part
* of a programmatically initiated smooth scroll or a user initiated touch scroll.
*
* @param position Position index of the first page currently being displayed.
* Page position+1 will be visible if positionOffset is nonzero.
* @param positionOffset Value from [0, 1) indicating the offset from the page at position.
* @param positionOffsetPixels Value in pixels indicating the offset from position.
*/
void onPageScrolled(int position, float positionOffset, int positionOffsetPixels);
/**
* This method will be invoked when a new page becomes selected. Animation is not
* necessarily complete.
*
* @param position Position index of the new selected page.
*/
void onPageSelected(int position);
/**
* Called when the scroll state changes. Useful for discovering when the user
* begins dragging, when the pager is automatically settling to the current page,
* or when it is fully stopped/idle.
*
* @param state The new scroll state.
* @see ViewPager#SCROLL_STATE_IDLE
* @see ViewPager#SCROLL_STATE_DRAGGING
* @see ViewPager#SCROLL_STATE_SETTLING
*/
void onPageScrollStateChanged(int state);
}
}
3、ViewPager指示器的使用
经过我们封装之后，我们的调用就非常简单了，只需要短短的2行代码：
//设置指示器标题
mViewPagerTriangleIndicator.setPageTitle(mTitles);
//绑定ViewPager
mViewPagerTriangleIndicator.setViewPagerWithIndicator(mViewPager);
好了，文章到这里就结束了，由于篇幅限制，这里不能对一些东西讲的太细，比如一些自定义View的基础，大家自行查阅相关资料哈。
源码下载:
这里附上源码地址（欢迎Star，欢迎Fork）：源码下载
