×
广告

Android自定义View之 实现一个多功能的IndicatorView

96
依然范特稀西 595a1b60 08f6 4beb 998f 2bf55e230555
2017.05.23 14:34* 字数 1647
CircleIndicatorView.png

Indicator (指示器) 可能大家都见的比较多了,在一个APP中,有很多场景都会用到Indicator,比如第一次安装APP 时的引导页,首页上面的广告Banner ,又或者是Tab下面的Indicator。Indicator 一般配合ViewPager 使用,它能很直观的反应出ViewPager 中一共有多少页,当前选中的是哪一页,用户能够很容易的看出是否还可以滑动,用户体验较好。那么本篇文章就讲一下如何通过自定义View来实现一个漂亮简洁的IndicatorView。

Indicator的展示形式

�我们使用Indicator时,常见的有三种形式,第一种是根据ViewPager 的总页数展示一排小圆点,选中和未选中分别标为不同的颜色。这也是普遍的使用Indicator的效果,效果如下:

image.png

第二种形式是根据ViewPager 的总页数展示一排圆点,并且用数字标出其顺序(1,2,3,4 ...),大概效果如下:

image.png

第三种形式和第二种形式差不多,同样根据ViewPager总页数展示一片圆点,但是用字母标出顺序(A,B,C,D ....), 比如 :魅族手机屏幕的切换的Indicator。效果如下:

image.png

本篇文章就通过自定义View来实现这三种IndicatorView。

通过自定义View 实现多功能的CircleIndicatorView

首先整理一下思路,CircleIndicatorView ,它是由一组圆 组成的,只不过圆有多种状态,选中、未选中、显示字母、显示数字等等。看着有这么多中状态,感觉挺复杂,但是其实不复杂,只是用不同的变量来控制不同的状态即可。其他的先不考虑,我们只要先把这一排圆画出来,剩下的就比较容易了。要确定一个圆的,需要知道圆的半径和圆心,半径是我们可以配置的,那么,其实核心就是计算这一排的圆点的圆心位置。圆心 y 的位置是固定的(View 高的一般),因此我们只需要计算每个圆的圆心x的位置,看下图,其实很容易就能找到规律,规律如下: 第一个圆的x 就等于圆的半径,从第二个圆开始,当前圆的圆心x 坐标为 上一个圆的x 坐标 + (radius * 2 + mSpace)。 其中mSpace 是圆之间的间距。

圆心x坐标计算公式.png

有了上面的规律,我们只需要一个循环就能找出所有圆的圆心位置。代码如下:

/**
     * 测量每个圆点的位置
     */
    private void measureIndicator(){
        mIndicators.clear();
        float cx = 0;
        for(int i=0;i<mCount;i++){
            Indicator indicator = new Indicator();
            if( i== 0){
                cx = mRadius + mStrokeWidth;
            }else{
                cx += (mRadius + mStrokeWidth) * 2 +mSpace;
            }

            indicator.cx = cx;
            indicator.cy = getMeasuredHeight() / 2;

            mIndicators.add(indicator);
        }
    }

我们用Indicator类记录了每个圆的圆心位置,并且保存在一个列表里面,现在有了所有圆的数据,我们就可以绘制 了。

  @Override
    protected void onDraw(Canvas canvas) {

        for(int i=0;i<mIndicators.size();i++){

            Indicator indicator = mIndicators.get(i);
            float x = indicator.cx;

            float y = indicator.cy;

            if(mSelectPosition == i){
                mCirclePaint.setStyle(Paint.Style.FILL);
                mCirclePaint.setColor(mSelectColor);
            }else{
                mCirclePaint.setColor(mDotNormalColor);
                if(mFillMode != FillMode.NONE){
                    mCirclePaint.setStyle(Paint.Style.STROKE);
                }else{
                    mCirclePaint.setStyle(Paint.Style.FILL);

                }
            }
            canvas.drawCircle(x,y, mRadius, mCirclePaint);

            // 绘制小圆点中的内容
            if(mFillMode != FillMode.NONE){
                String text = "";
                if(mFillMode == FillMode.LETTER){
                    if(i >= 0 && i<LETTER.length){
                        text = LETTER[i];
                    }
                }else{
                    text = String.valueOf(i+1);
                }
                Rect bound = new Rect();
                mTextPaint.getTextBounds(text,0,text.length(),bound);
                int textWidth = bound.width();
                int textHeight = bound.height();

                float textStartX = x - textWidth / 2;
                float textStartY = y + textHeight / 2;
                canvas.drawText(text,textStartX,textStartY, mTextPaint);
            }

        }

    }

绘制的代码很简单,无非就是循环我们保存的列表,拿出每一个Indicator,然后绘制圆就行了,除此之外就是一些状态的判断,比如,是否绘制数字、字母和选中状态等等 。

到此,我们的CircleIndicatorView 的绘制工作算是完成了,并且也能够显示在界面上了,但是它现在还是一个单独的View。我们前面说过,IndicatorView 一般是配合ViewPager使用的,它是随着Viewpager的切换而改变的,因此我们需要将IndicatorView 与ViewPager 进行关联。

要让CircleIndicatorView 与ViewPager 关联,首先需要 CircleIndicatorView 实现 ViewPager.OnPageChangeListener 接口。然后在onPageSelected方法中记录当前页的位置。代码如下:

 @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        mSelectPosition = position;
        invalidate();
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

第二步,向外提供一个API ,设置CircleIndicatorView 与 ViewPager 关联。

  /**
     *  与ViewPager 关联
     * @param viewPager
     */
    public void setUpWithViewPager(ViewPager viewPager){
        releaseViewPager();
        if(viewPager == null){
            return;
        }
        mViewPager = viewPager;
        mViewPager.addOnPageChangeListener(this);
        int count = mViewPager.getAdapter().getCount();
        setCount(count);
    }

通过如上两步,就建立了CircleIndicatorView 与ViewPager的关联,只需要调用方法setUpWithViewPager 就OK。

到此就完了吗?当然还没有完,其实还有一个小细节,那就是IndicatorView 因该是可以点击的,点击Indicator小圆点就能切换ViewPager 到对应的页面(如 Iphone 和 魅族手机的 屏幕切换,点击indicator小圆点就可以切换 ,以前没有注意的现在可以去试一下 ),那么我们也来实现这样一个功能,其实很简单,重写onTouchEvent方法 ,监听ACTION_DOWN 事件,然后获取点击屏幕的坐标,与所绘制的圆位置比较,如果点击区域在圆的范围内,就点击了该Indicator。点击之后,切换Viewpager到对应页面。代码如下:

  @Override
    public boolean onTouchEvent(MotionEvent event) {
        float xPoint = 0;
        float yPoint = 0;
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                xPoint = event.getX();
                yPoint = event.getY();
                handleActionDown(xPoint,yPoint);
                break;

        }

        return super.onTouchEvent(event);
    }

    private void handleActionDown(float xDis,float yDis){
        for(int i=0;i<mIndicators.size();i++){
            Indicator indicator = mIndicators.get(i);
            if(xDis < (indicator.cx + mRadius+mStrokeWidth)
                    && xDis >=(indicator.cx - (mRadius + mStrokeWidth))
                    && yDis >= (yDis - (indicator.cy+mStrokeWidth))
                    && yDis <(indicator.cy+mRadius+mStrokeWidth)){
                 // 找到了点击的Indicator
                // 切换ViewPager
                 mViewPager.setCurrentItem(i,false);
                 // 回调
                if(mOnIndicatorClickListener!=null){
                    mOnIndicatorClickListener.onSelected(i);
                }
                break;
            }
        }
    }

到此,我们自定义IndicatorView 的工作就差不多完成了,但是现在的IndicatorView 还不是很灵活,我们要让它的可配置性更强,就应该提供更多的API 来让IndicatorView 使用更加灵活方便,因此,最后一步,加上一些自定义属性来提高它的灵活性。自定义了如下一些属性:

属性名 属性意义 取值
indicatorRadius 设置指示器圆点的半径 单位为 dp 的值
indicatorBorderWidth 设置指示器的border 单位为 dp 的值
indicatorSpace 设置指示器之间的距离 单位为 dp 的值
indicatorTextColor 设置指示器中间的文字颜色 颜色值,如:#FFFFFF
indicatorColor 设置指示器圆点的颜色 颜色值
indicatorSelectColor 设置指示器选中的颜色 颜色值
fill_mode 设置指示器的模式 枚举值:有三种,分别是letter,number和none

自定义属性文件如下:

 <declare-styleable name="CircleIndicatorView">
        <attr name="indicatorRadius" format="dimension"/>
        <attr name="indicatorBorderWidth" format="dimension"/>
        <attr name="indicatorSpace" format="dimension"/>
        <attr name="indicatorTextColor" format="color"/>
        <attr name="indicatorColor" format="color"/>
        <attr name="indicatorSelectColor" format="color"/>
        <attr name="fill_mode">
            <enum name="letter" value="0"/>
            <enum name="number" value="1"/>
            <enum name="none" value="2"/>
        </attr>
    </declare-styleable>

通过上面这些属性,我们就可以很好的定制IndicaotorView 了,比如,自定义圆的大小,颜色,border,文字的颜色,选中的颜色和展示的模式等等。

最终的效果如下:

CircleIndicator最终效果.gif

CircleIndicatorView 使用方法

上面讲了自定义IndicatorView 的思路、过程 和一些关键代码,为了使用方便,已经将CircleIndicatorView封装成了一个库,以下介绍一下CircleIndicatorView API的使用。Github 地址:https://github.com/pinguo-zhouwei/CircleIndicatorView

** Dependency**

1, 最外层build.gradle添加如下代码:

   allprojects {
       repositories {
    ...
    maven { url 'https://jitpack.io' }
   }
}

2, app 层buid.gradle dependencies 中 添加如下代码:

compile 'com.github.pinguo-zhouwei:CircleIndicatorView:v1.0.0'
    

使用方法如下:
** 1, xml 添加CircleIndicatorView,配置相关属性 **

 <com.zhouwei.indicatorview.CircleIndicatorView
         android:id="@+id/indicator_view"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:layout_marginBottom="50dp"
         android:layout_centerHorizontal="true"
         app:indicatorSelectColor="#00A882"
         app:fill_mode="letter"
         app:indicatorBorderWidth="2dp"
         app:indicatorRadius="8dp"
         app:indicatorColor="@color/colorAccent"
         app:indicatorTextColor="@android:color/white"
         />

2, 在代码中与ViewPager 关联

       // 初始化ViewPager 相关
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mPagerAdapter = new ViewPagerAdapter();
        mViewPager.setAdapter(mPagerAdapter);

        mIndicatorView = (CircleIndicatorView) findViewById(R.id.indicator_view);
        // 关联ViewPager 
        mIndicatorView.setUpWithViewPager(mViewPager);

上面所有列举的属性,出了在xml 中配置外,也可以在代码中设置,如下:

        // 在代码中设置相关属性
        
        CircleIndicatorView indicatorView = (CircleIndicatorView) findViewById(R.id.indicator_view3);
        // 设置半径
        indicatorView.setRadius(DisplayUtils.dpToPx(15));
        // 设置Border
        indicatorView.setBorderWidth(DisplayUtils.dpToPx(2));

        // 设置文字颜色
        indicatorView.setTextColor(Color.WHITE);
        // 设置选中颜色
        indicatorView.setSelectColor(Color.parseColor("#FEBB50"));
        //
        indicatorView.setDotNormalColor(Color.parseColor("#E38A7C"));
        // 设置指示器间距
        indicatorView.setSpace(DisplayUtils.dpToPx(10));
        // 设置模式
        indicatorView.setFillMode(CircleIndicatorView.FillMode.LETTER);

        // 最重要的一步:关联ViewPager
        indicatorView.setUpWithViewPager(mViewPager);

最后

以上就是通过自定义View的方式实现一个多功能的IndicatorView的全部内容,内容很简单,通过自定义的View方式实现很方便,免得每次还得找设计师要切图啊(能自己动手的,就不找设计师要了。😄)。如有问题欢迎交流,最后,如果你觉得不错的话,欢迎github 赏个start啊!!轮子传送门 https://github.com/pinguo-zhouwei/CircleIndicatorView

技术博客
Web note ad 1