Android之实现ViewPagerIndicator

2023-01-20 11:50:53

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

码农公寓

相关文章