安卓基础：自定义控件实现ViewPager指示器

花了一天时间学了下Android自定义控件实现ViewPagerIndicator，ViewPagerIndicator相信大家大家都做过，特别是APP主页面的时候，一般情况下都会使用第三方的开源框架去进行实现，下面就是我自己实现的一个框架，可以更深入的了解其内部的机制。

下面我将简单介绍一下这个实例，如下图，内容区域为一个ViewPager，当滑动ViewPager的时候，顶部三角形和亮度指示器会跟随我们的手指进行移动，上面的tab也支持点击



-

- 接下来附上代码，首先是布局文件

- 这里是自定义的tab属性

<?xml version="1.0" encoding="utf-8"?>
<resources>

<!--自定义属性，format是值的类型，-->
<attr name="visible_tab_count" format="integer"/>
<!--定义标签-->
<declare-styleable name="ViewPagerIndicator">
<attr name="visible_tab_count"/>
</declare-styleable>
</resources>

这里是布局文件，其中tab选项可以在com.hwy.view.ViewPagerIndicator中自定义view，不过这里没用

<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
xmlns:hyman="http://schemas.android.com/apk/res/com.ceshi.hwy.myviewpager"
android:orientation="vertical"
>
<!--上面xmlns:hyman="http://schemas.android.com/apk/res/com.ceshi.hwy.myviewpager"
是声明attr自定义属性的明明空间
-->
<com.hwy.view.ViewPagerIndicator
android:id="@+id/id_indicator"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@mipmap/title_bar_bg_row"
android:orientation="horizontal"
hyman:visible_tab_count="4">
<!--hyman:visible_tab_count="4" 是使用自定义 attr的属性用来表示显示4个tab>

</com.hwy.view.ViewPagerIndicator>

<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/id_viewpager">

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

</LinearLayout>

接下来是ViewPagerIndicator

package com.hwy.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.View;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.ceshi.hwy.myviewpager.R;
import java.util.List;

/**
* 创建布局文件继承LinearLayout
*/
public class ViewPagerIndicator extends LinearLayout{

private Paint mPaint;//画笔
private Path mPath;//通过Path构造一个三角形
private int mTriangleWidth;//三角形宽度
private int mTriangleheight;//三角形高度
private static final float RADIO_TRIANGLE_WIDTH = 1/6F;//三角形宽度和tab的比例
private int mInitTranslationX;//初始化的偏移位置
private int mTranslationX;//移动时的位置

private int mTabVisiableCount;//可见tab的数量
private static final int COUNT_DEFAULT_TAB = 4;//创建默认显示的tab数量的一个常量

private List<String> mTitles;//用于存放传过来Titles
private static final int COLOR_TEXT_NORMAL = 0x77ffffff;//设置一个正常的颜色
private static final int COLOR_TEXT_HIGHLIGHT = 0xffffffff;//设置一个高亮的颜色

private ViewPager mViewpager;//设置一个关联的ViewPager

public ViewPagerIndicator(Context context) {
this(context, null);
}

public ViewPagerIndicator(Context context, AttributeSet attrs) {
super(context, attrs);

//获取可见tab的数量
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator);
mTabVisiableCount = a.getInt(R.styleable.ViewPagerIndicator_visible_tab_count
,COUNT_DEFAULT_TAB);
//如果传入一个小于0的数
if(mTabVisiableCount<0){
mTabVisiableCount = COUNT_DEFAULT_TAB;
}
a.recycle();//获取完成之后进行释放

//初始化画笔
mPaint = new Paint();
mPaint.setAntiAlias(true);//抗锯齿
mPaint.setColor(Color.parseColor("#ffffffff"));//设置画笔的颜色
mPaint.setStyle(Paint.Style.FILL);//设置画笔的风格
mPaint.setPathEffect(new CornerPathEffect(3));//设置一个圆角的效果
}

/**
* 在dispatchDraw中绘制三角形
*/
@Override
protected void dispatchDraw(Canvas canvas) {
canvas.save();
canvas.translate(mInitTranslationX + mTranslationX, getHeight() + 2);
canvas.drawPath(mPath, mPaint);//绘制
canvas.restore();
super.dispatchDraw(canvas);
}

/**
* 当view的大小发生变化时触发
*/
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);

mTriangleWidth = (int) (w / mTabVisiableCount * RADIO_TRIANGLE_WIDTH);
mInitTranslationX = w / mTabVisiableCount / 2 -mTriangleWidth / 2;//初始时的偏移量
initTrangle();//初始化三角形
}

/**
* 当xml加载完成之后会回调这个方法，可以在这个方法里面判断子view的个数
* 通过mTabvisiableCount去设置他们的宽度，显示4个则必须为屏幕宽度的1/4
*/
@Override
protected void onFinishInflate() {
super.onFinishInflate();
//拿到子元素的一个个数
int cCount = getChildCount();
if(cCount == 0){
return;
}
for(int i = 0; i < cCount; i++){
View view = getChildAt(i);
LinearLayout.LayoutParams lp = (LayoutParams) view.getLayoutParams();
lp.weight = 0;
lp.width = getScreenWidth()/mTabVisiableCount;
view.setLayoutParams(lp);
}
setItemClickEvent();
}

/**
* 获得屏幕的宽度
*/
private int getScreenWidth(){
WindowManager wm = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
return outMetrics.widthPixels;
}

/**
* 初始化三角形
*/
private void initTrangle() {

mTriangleheight = mTriangleWidth/2;
mPath = new Path();
mPath.moveTo(0, 0);
mPath.lineTo(mTriangleWidth, 0);
mPath.lineTo(mTriangleWidth / 2, -mTriangleheight);
mPath.close();
}

//指示器和容器跟随手指进行滚动
public void scroll(int position, float offset) {
int tabWidth = getWidth()/mTabVisiableCount;//获取到每一个tab的宽度
mTranslationX = (int) (tabWidth*(offset+position));//设置x轴的偏移量

//容器移动，当tab处于移动至最后一个时
if(position >= (mTabVisiableCount-2) && offset > 0 && getChildCount() > mTabVisiableCount){
/**
* scrollTo（int x,int y）;
* 如果偏移位置发生了改变，就会给mScrollX和mScrollY赋新值，改变当前位置。
* 注意：x,y代表的不是坐标点，而是偏移量。
* 例如：
* 我要移动view到坐标点（100，100），那么我的偏移量就是(0,，0)  - （100，100） = （-100 ，-100）  ，我就要执行view.scrollTo(-100,-100),达到这个效果。
*/
if(mTabVisiableCount != 1){
this.scrollTo((position -(mTabVisiableCount-2))*tabWidth + (int)(tabWidth*offset),0);
}else{
this.scrollTo(position*tabWidth+(int)(tabWidth*offset),0);
}

}
invalidate();//进行重绘
}

/**
* 动态的生成tab，不用布局文件
*/
public void setTabItemTitle(List<String> titles){
//检查title的有效性
if(titles != null && titles.size() > 0){
this.removeAllViews();//无视布局文件里设置的tab
mTitles = titles;
for (String title:mTitles) {
addView(gennerateTextView(title));
}
setItemClickEvent();
}
}

/**
* 设置可见tab的数量
*/
public void setVisiableTabCount(int count){
mTabVisiableCount = count;
}

/**
* 根据title创建tab
*/
private View gennerateTextView(String title) {
TextView tv = new TextView(getContext());
//设置布局文件LinearLayout
LinearLayout.LayoutParams lp = new LayoutParams(
LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
lp.width = getScreenWidth()/mTabVisiableCount;
tv.setText(title);
tv.setGravity(Gravity.CENTER);
tv.setTextColor(COLOR_TEXT_NORMAL);
tv.setLayoutParams(lp);
return tv;
}

/**
*重置tab的文本颜色
*/
private void resetTextViewColor(){
for(int i = 0; i < getChildCount(); i++){
View view = getChildAt(i);
if(view instanceof TextView){
((TextView) view).setTextColor(COLOR_TEXT_NORMAL);
}
}
}

/**
* 高亮某个tab的文本
*/
public void highLightTextView(int pos){
resetTextViewColor();
View view = getChildAt(pos);
if(view instanceof TextView){
((TextView) view).setTextColor(COLOR_TEXT_HIGHLIGHT);
}
}

/**
* 设置关联的Viewpager
*/
public void setViewPager(ViewPager viewPager){
mViewpager = viewPager;
}

/**
* 设置tab的点击事件
*/
public void setItemClickEvent(){
int cCount = getChildCount();
for(int i = 0;i < cCount; i++){
final int j = i;
final View view = getChildAt(i);
view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mViewpager.setCurrentItem(j);
}
});
}
}
}

接着是Fragment

package com.ceshi.hwy.myviewpager;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
* 编写我们的Fragment
*/
public class VpSimpleFragment extends Fragment {

private String mTitle;
public static final String BUNDLE_TITLE = "title";

//在onCreateView方法中取出来
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

//首先拿到bundle;
Bundle bundle = getArguments();
if(bundle != null){
mTitle = bundle.getString(BUNDLE_TITLE);
}
//使用一个TextView作为布局文件
TextView tv = new TextView(getActivity());
tv.setText(mTitle);
tv.setGravity(Gravity.CENTER);
return tv;
}

//通过newInstance方法创建Fragment,来传递参数
public static VpSimpleFragment newInstance(String title){
Bundle bundle = new Bundle();
bundle.putString(BUNDLE_TITLE,title);
VpSimpleFragment fragment = new VpSimpleFragment();
fragment.setArguments(bundle);
return fragment;
}

}

最后是MainActivity

package com.ceshi.hwy.myviewpager;

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.os.Bundle;
import android.view.Window;
import com.hwy.view.ViewPagerIndicator;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class MainActivity extends FragmentActivity {

private ViewPager mViewPager;
private ViewPagerIndicator mIndicator;

private List<String> mTitles = Arrays.asList("短信1","收藏2","推荐3","短信4",
"收藏5","推荐6","短信7","收藏8","推荐9");
private List<VpSimpleFragment> mContents = new ArrayList<VpSimpleFragment>();
//mContent相当于ViewPager的一个数据集,故我们的ViewPager还需要一个Adapter
private FragmentPagerAdapter mAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main2);

initViews();
initDatas();
mIndicator.setViewPager(mViewPager);
mIndicator.setVisiableTabCount(5);
mIndicator.setTabItemTitle(mTitles);
mIndicator.highLightTextView(0);//默认显示第一个tab高亮

mViewPager.setAdapter(mAdapter);

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
//当页面在滑动的时候会调用此方法，在滑动被停止之前，此方法回一直得到
//调用。其中三个参数的含义分别为：
// :当前页面，及你点击滑动的页面
//:当前页面偏移的百分比
//:当前页面偏移的像素位置
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//总的偏移量为:tabWidth * positionOffset + position * tabWidth
mIndicator.scroll(position,positionOffset);
}

@Override
//此方法是页面跳转完后得到调用，position是你当前选中的页面的Position（位置编号）。
public void onPageSelected(int position) {
mIndicator.highLightTextView(position);
}
//此方法是在状态改变的时候调用，其中state这个参数
//有三种状态（0，1，2）。arg0 ==1的时辰默示正在滑动，arg0==2的时辰默示滑动完毕了，arg0==0的时辰默示什么都没做。
// 当页面开始滑动的时候，三种状态的变化顺序为（1，2，0），
@Override
public void onPageScrollStateChanged(int state) {

}
});
}

//初始化数据
private void initDatas() {
for (String title: mTitles) {
VpSimpleFragment fragment = VpSimpleFragment.newInstance(title);
mContents.add(fragment);
}

mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mContents.get(position);
}

@Override
public int getCount() {
return mContents.size();
}
};
}

private void initViews() {
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
mIndicator = (ViewPagerIndicator) findViewById(R.id.id_indicator);
}
}