Android之实现ViewPagerIndicator

PS:最近一直忙于学习任务,一直没有时间去写博客.今天周六,终于有时间了.

学习任务:

1.打造一个自己的ViewPagerIndicator

  最近被安排了一大堆的学习任务,感觉老板还是很好的,让我们在业余时间多提升自己的个人能力,就拿这个ViewPagerIndicator来说吧,当初自己没有什么好的实现方案,现在也就学了一发,看了一下Google上的实现方案,针对的情况比较的多,我这里就针对一种情况来说.大家想更深入的研究可以去Github上搜索一下Google工程师的实现方式,效果都很棒,有兴趣的可以全部研究一下.我看了一下鸿洋的实现方式,不过他做的是三角形的.我做的是线条状的,因此做了一些修改.

  原理还是比较简单的,下面是一个ViewPager,上面整体是一个ViewPagerIndicator.然后在最下面画一个线条当做指示符就可以了,当ViewPager在滑动的时候,我们只需要知道偏移的距离,然后重新绘制这条指示符,调用invalidate()函数重新绘制视图就可以了。

 首先说一下如何画才是关键，画出这个指示符其实就是画出一个实心的矩形,我们需要知道矩形的长度和宽度,以及在什么位置进行绘制,一般高度我们自己是可以人为指定的,我们需要多高就可以指定成多少单位个dp，最后转换成px就可以了,但是宽度呢？宽度其实 = 屏幕宽度 / 显示的ViewPager的数量,获取屏幕的宽度还是比较简单的,因为我们已经在xml文件中指定了这个ViewPagerIndicator的宽度,我们只需要测量一下就能够拿到他的具体宽度.

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
     super.onMeasure(widthMeasureSpec, heightMeasureSpec);
     mTop = getMeasuredHeight();
     int width = getMeasuredWidth();
     int height = mTop + DensityUtils.dip2px(context, mHeight);
     mWidth = width / mTabVisibleCount;
     setMeasuredDimension(width, height);
 }

  这样我们就能够获取到整个ViewPagerIndicator的高度和宽度,那么矩形指示符的 mTop(顶部起始位置) =  getMeasureHeight(); 因为指示符也是需要高度的,因此我们需要重新设置整个ViewPagerIndicator的高度,因此这里需要调用setMeasuredDimension(width,height)重新设置整个ViewPagerIndicator的高度和宽度。有了这个思路,我们就能够绘制出这个矩形的指示符。那么还有一个难题,就是如何设置显示的数量.总不能在自定义的时候写死吧.这样不是非常的灵活,并且在实际项目开发的时候,不同的页面,需要的指示符的数量也是不相同的.因此这里我们需要使用一种灵活的方式去设置指示符的显示数量.

 灵活的设置指示符的显示数量需要自定义视图属性,需要在attrs文件中进行声明.

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

    <!--属性的名字以及对应的类型-->
    <attr name="item_count" format="integer"></attr>
     
    <!--声明自定义属性,与上面形成关联关系-->
    <declare-styleable name="ViewPagerIndicator">
        <attr name="item_count" />
    </declare-styleable>

</resources>

  那么这东西如何使用呢？首先我们需要在xml文件中进行设置.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    <!--这里需要引入命名空间-->
    xmlns:rzx="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--修改显示数量
       rzx:item_count="我们想设置的数值",这里我设置了5个
       前面这个名字是命名空间,可以随便设置.  
     -->
   <com.example.totem.myviewpagerindicator.view.ViewPagerIndicator
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        rzx:item_count="4">
        
    </com.example.totem.myviewpagerindicator.view.ViewPagerIndicator>
    
</LinearLayout>

  因为我们是自定义控件实现的,因此我们需要在我们自定义的ViewPagerIndicator中去获取我们声明的显示数量.然后去指定指示符的显示宽度.这样就可以根据自己定义的显示数量去指定指示符的宽度了.

public ViewPagerIndicator(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
    /**
     * 存放自定义视图属性的数组容器,需要在attrs文件夹中定义属性
     * 属性支持：
     * reference string color dimension boolean integer float fraction enum flag
     * */
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ViewPagerIndicator);
   /**
     * 获取数组容器中属性数量
     * */
    mTabVisibleCount = typedArray.getInt(R.styleable.ViewPagerIndicator_item_count, COUNT_DEFAULT_TAB);
    if (mTabVisibleCount <= 0) {
        mTabVisibleCount = COUNT_DEFAULT_TAB;
    }
    /**
     * 调用recycle()函数
     * */
    typedArray.recycle();
}

  获取过程就需要使用TypedArray去进行获取,它是存放自定义视图的一个数组容器,支持的类型在上面已经声明了,我就不进行啰嗦了.obtainStyledAttributes()这个方法顾名思义,获取Styled中声明的属性,那么从哪里获取呢？从我们的attrs文件夹中获取,那么获取那个值呢？获取的就是我们声明的ViewPagerIndicator名字的属性值.因为我们已经指定了显示的数量,因此他就可以获取到我们指定的数值,如果获取不到,那么就会有一个默认值.就这么简单,这里recycle()函数是为了再次利用typedArray。不调用也没有什么问题.

 那么拿到了显示数量,以及整体宽度,我们就可以去绘制这个矩形指示符了.

public Rect(int left, int top, int right, int bottom) {
    this.left = left;
    this.top = top;
    this.right = right;
    this.bottom = bottom;
}

  绘制矩形需要传递四个参数,top我们已经获取到了.起初的ViewPagerIndicator的高度位置.bottom就是最终的ViewPagerIndicator的高度,left的获取其实是比较重要的,其实他的位置也很容易获取.left = (position(当前位置) + offset(偏移量)) * mWidth(指示符的宽度). left1(第一个位置的指示符位置) = (0 + 0) * mWidth。偏移的过程中,offset是始终改变的.那么这个left也是随之变动的.然后不断的重新绘制.

/**
    * 指示符滚动
    */
public void scroll(int position, float offset) {
    mLeft = (int) ((position + offset) * mWidth);
    /**
     * 重新绘制视图
     * */
    invalidate();
}

  那么谁给我们时刻传递这个偏移量是个关键.偏移是一个过程,因此如果希望指示符是移动过去的,需要时刻获取当前的偏移量,这个偏移量就得交给ViewPager了.我们需要把我们的ViewPagerIndicator与ViewPager进行绑定,这样就能能够时刻获取到偏移量了.这取决于ViewPager的方法.

 /**
   * 设置关联的ViewPager
   */
public void setViewPager(ViewPager mViewPager, int pos) {
    this.mViewPager = mViewPager;
    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            scroll(position, positionOffset);
        }

        @Override
        public void onPageSelected(int position) {
            resetTextViewColor();
            highLightTextView(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });
    mViewPager.setCurrentItem(pos);
    highLightTextView(pos);
}

  ViewPager的滑动监听能够帮助我们时刻获取到偏移量.这里我们没有必要再对外暴露接口什么的了.如果还想做其他的操作,我们只需要封装方法.让其执行就可以了..剩下的就是一些琐碎的东西,比如说,改变字体的颜色,以及设置相关的点击事件等等.

/**
     * 高亮文本
     */
    protected void highLightTextView(int position) {
        View view = getChildAt(position);
        if (view instanceof TextView) {
            ((TextView) view).setTextColor(COLOR_SELECT);
        }
    }

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

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

  核心的地方基本都说完了.小细节问题就是在设置高度的时候别忘了dp和px之间的转换,否则画出来的线条实际上是有高度偏差的.MainActivity就只需要做一些初始化操作,为ViewPager添加相关的Fragment就行了.

package com.example.totem.myviewpagerindicator.activity;

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;

import com.example.totem.myviewpagerindicator.R;
import com.example.totem.myviewpagerindicator.fragment.FinallyFragment;
import com.example.totem.myviewpagerindicator.fragment.FirstFragment;
import com.example.totem.myviewpagerindicator.fragment.FouthFragment;
import com.example.totem.myviewpagerindicator.fragment.SecondFragment;
import com.example.totem.myviewpagerindicator.fragment.ThirdFragment;
import com.example.totem.myviewpagerindicator.view.ViewPagerIndicator;

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

public class MainActivity extends FragmentActivity {

    private List<Fragment> mTabContents = new ArrayList<>();
    private FragmentPagerAdapter mAdapter;
    private ViewPager mViewPager;
    private List<String> mDatas = Arrays.asList("1", "2", "3", "4", "5");
    private ViewPagerIndicator mIndicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
        initData();
        //设置Tab上的标题
        mIndicator.setTabItemTitles(mDatas);
        mViewPager.setAdapter(mAdapter);
        //设置关联的ViewPager
        mIndicator.setViewPager(mViewPager, 0);
    }

    private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mIndicator = (ViewPagerIndicator) findViewById(R.id.Indicator);
    }

    private void initData() {

        FirstFragment firstFragment = new FirstFragment();
        SecondFragment secondFragment = new SecondFragment();
        ThirdFragment thirdFragment = new ThirdFragment();
        FouthFragment fouthFragment = new FouthFragment();
        FinallyFragment finallyFragment = new FinallyFragment();

        mTabContents.add(firstFragment);
        mTabContents.add(secondFragment);
        mTabContents.add(thirdFragment);
        mTabContents.add(fouthFragment);
        mTabContents.add(finallyFragment);

        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {


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

            @Override
            public Fragment getItem(int position) {
                return mTabContents.get(position);
            }
        };
    }
}

  最后放上一个源代码分享：http://pan.baidu.com/s/1i56onAX