一个漂亮而强大的自定义view

谁借莪１个温暖的怀抱￠ 2022-05-11 01:50 199阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/13502.html][http_www.demodashi.com_demo_13502.html]

## 简介 ##

主要提供一个漂亮而强大的自定义SeekBar，进度变化由提示牌 (sign)展示,具有强大的属性设置，支持设置section(节点)、mark(标记)、track(轨迹)、thumb（拖动块）、progress(进度)、sign（提示框）等功能

## 主要功能 ##

*  强大的track（轨迹）和second track （选中轨迹）的最小值、最大值、轨迹粗细，颜色等设置；
 *  灵活的数字显示，支持设置进度展示、节点文本展示采用整数还是浮点数；
 *  支持设置进度单位，例如 10s,15km/h、平方，对数等；
 *  支持手柄拖动块thumb半径、颜色、阴影、透明度等；
 *  支持节点个数、文字大小、颜色设置；
 *  支持指示牌宽高、颜色、圆角半径、三角arrow指示、border边框、跟随thumb移动等；
 *  支持设置拖动进度监听回掉；
 *  支持格式化进度数字，完全自定义进度样式
 *  …

## 演示 ##

![1.gif_raw_true][] ![2.gif_raw_true][]

![3.gif_raw_true][] ![4.gif_raw_true][]

### xml ###

<com.zhouyou.view.seekbar.SignSeekBar
            android:id="@+id/seek_bar"
            android:layout_width="match_parent"
            android:layout_height="16dp"
            app:ssb_section_text_position="bottom_sides"
            app:ssb_show_progress_in_float="false"
            app:ssb_show_section_mark="false"
            app:ssb_show_section_text="true"
            app:ssb_show_sign="true"
            app:ssb_show_thumb_text="false"
            app:ssb_sign_arrow_height="5dp"
            app:ssb_sign_arrow_width="10dp"
            app:ssb_sign_border_color="@color/color_red"
            app:ssb_sign_border_size="1dp"
            app:ssb_sign_color="@color/color_gray"
            app:ssb_sign_show_border="true"/>

### java ###

signSeekBar.getConfigBuilder()
                    .min(0)
                    .max(4)
                    .progress(2)
                    .sectionCount(4)
                    .trackColor(ContextCompat.getColor(getContext(), R.color.color_gray))
                    .secondTrackColor(ContextCompat.getColor(getContext(), R.color.color_blue))
                    .thumbColor(ContextCompat.getColor(getContext(), R.color.color_blue))
                    .sectionTextColor(ContextCompat.getColor(getContext(), R.color.colorPrimary))
                    .sectionTextSize(16)
                    .thumbTextColor(ContextCompat.getColor(getContext(), R.color.color_red))
                    .thumbTextSize(18)
                    .signColor(ContextCompat.getColor(getContext(), R.color.color_green))
                    .signTextSize(18)
                    .autoAdjustSectionMark()
                    .sectionTextPosition(SignSeekBar.TextPosition.BELOW_SECTION_MARK)
                    .build();

### 回调 ###

signSeekBar.setOnProgressChangedListener(new SignSeekBar.OnProgressChangedListener() {
                @Override
                public void onProgressChanged(SignSeekBar signSeekBar, int progress, float progressFloat,boolean fromUser) {
                //fromUser 表示是否是用户触发 是否是用户touch事件产生
                    String s = String.format(Locale.CHINA, "onChanged int:%d, float:%.1f", progress, progressFloat);
                    progressText.setText(s);
                }
    
                @Override
                public void getProgressOnActionUp(SignSeekBar signSeekBar, int progress, float progressFloat) {
                    String s = String.format(Locale.CHINA, "onActionUp int:%d, float:%.1f", progress, progressFloat);
                    progressText.setText(s);
                }
    
                @Override
                public void getProgressOnFinally(SignSeekBar signSeekBar, int progress, float progressFloat,boolean fromUser) {
                    String s = String.format(Locale.CHINA, "onFinally int:%d, float:%.1f", progress, progressFloat);
                    progressText.setText(s + getContext().getResources().getStringArray(R.array.labels)[progress]);
                }
            });

### Attributes ###

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <declare-styleable name="SignSeekBar">
            <attr name="ssb_min" format="float|reference"/> 
            <attr name="ssb_max" format="float|reference"/> 
            <attr name="ssb_progress" format="float|reference"/> 
            <attr name="ssb_is_float_type" format="boolean"/> 
            <attr name="ssb_track_size" format="dimension|reference"/> 
            
            <attr name="ssb_second_track_size" format="dimension|reference"/>
            <attr name="ssb_thumb_radius" format="dimension|reference"/> 
            
            <attr name="ssb_thumb_radius_on_dragging" format="dimension|reference"/>
            <attr name="ssb_track_color" format="color|reference"/> 
            <attr name="ssb_second_track_color" format="color|reference"/> 
            <attr name="ssb_thumb_color" format="color|reference"/> 
            <attr name="ssb_section_count" format="integer|reference"/> 
            <attr name="ssb_show_section_mark" format="boolean"/> 
            <attr name="ssb_auto_adjust_section_mark" format="boolean"/> 
            <attr name="ssb_show_section_text" format="boolean"/> 
            <attr name="ssb_section_text_size" format="dimension|reference"/> 
            <attr name="ssb_section_text_color" format="color|reference"/> 
            
            <attr name="ssb_section_text_position">
                <enum name="sides" value="0"/>
                <enum name="bottom_sides" value="1"/>
                <enum name="below_section_mark" value="2"/>
            </attr>
            <attr name="ssb_section_text_interval" format="integer"/> 
            <attr name="ssb_show_thumb_text" format="boolean"/> 
            <attr name="ssb_thumb_text_size" format="dimension|reference"/> 
            <attr name="ssb_thumb_text_color" format="color|reference"/> 
            <attr name="ssb_show_progress_in_float" format="boolean"/> 
            <attr name="ssb_touch_to_seek" format="boolean"/> 
            <attr name="ssb_seek_by_section" format="boolean"/> 
            <attr name="ssb_sign_color" format="color|reference"/> 
            <attr name="ssb_sign_border_color" format="color|reference"/> 
            <attr name="ssb_sign_show_border" format="boolean"/> 
            <attr name="ssb_sign_text_size" format="dimension|reference"/> 
            <attr name="ssb_sign_border_size" format="dimension|reference"/> 
            <attr name="ssb_sign_text_color" format="color|reference"/> 
            <attr name="ssb_anim_duration" format="integer"/> 
            <attr name="ssb_show_sign" format="boolean"/> 
            <attr name="ssb_text_space" format="dimension|reference"/>
            <attr name="ssb_sides_labels" format="reference"/>
            <attr name="ssb_thumb_bg_alpha" format="float|reference"/> 
            <attr name="ssb_thumb_ratio" format="float|reference"/> 
            <attr name="ssb_show_thumb_shadow" format="boolean"/> 
            <attr name="ssb_sign_arrow_autofloat" format="boolean"/> 
            <attr name="ssb_sign_height" format="dimension|reference"/> 
            <attr name="ssb_sign_width" format="dimension|reference"/> 
            <attr name="ssb_sign_arrow_height" format="dimension|reference"/> 
            <attr name="ssb_sign_arrow_width" format="dimension|reference"/> 
            <attr name="ssb_sign_round" format="dimension|reference"/> 
        </declare-styleable>
    </resources>

## 主要实现思路介绍 ##

### 概况 ###

本库自定义控件主要是用了Canvas相关的drawXXX系列方法、一些简单的算法和动画来完成的。比如拖动轨迹、滑块thumb拖动、放大、自动滚动最近节点、指示牌、区段节点标记、进度单位显示等。接下来会讲解下主要的实现思路，对于自定义View的其它基本流程，属性获取和设置、onMeasure的重写等都不重点介绍，想了解完整流程请看[源码][Link 1]。

### track（轨道）绘制 ###

画轨道比较简单，主要实现方式就是画两条不同颜色的线条（其实画的是一条分为左右两部分，衔接的地方是有个thumb遮挡着），主要是要求出滑动thumb的中心点mThumbCenterX，mThumbCenterX的计算非常重要，本库的很多计算都是围绕mThumbCenterX，mThumbCenterX是通过onTouchEvent事件MotionEvent  
根据down、move事件实时计算出中心点x坐标。

// draw track
            mPaint.setColor(mSecondTrackColor);
            mPaint.setStrokeWidth(mSecondTrackSize);
            canvas.drawLine(xLeft, yTop, mThumbCenterX, yTop, mPaint);
    
            // draw second track
            mPaint.setColor(mTrackColor);
            mPaint.setStrokeWidth(mTrackSize);
            canvas.drawLine(mThumbCenterX, yTop, xRight, yTop, mPaint);

### track（轨道）接触有效计算 ###

MotionEvent的getX()和getY()获得的永远是相对view的触摸位置坐标，getRawX()和getRawY()获得的是相对屏幕的位置，轨道计算用的是getX,getY 相对于容器的位置坐标x,y，计算x,y坐标是否在轨道的矩形方框内,从而判断是否在轨道上。

private boolean isTrackTouched(MotionEvent event) {
            return isEnabled() && event.getX() >= getPaddingLeft() && event.getX() <= getMeasuredWidth() - getPaddingRight()
                    && event.getY() >= getPaddingTop() && event.getY() <= getMeasuredHeight() - getPaddingBottom();
        }

### thumb（滑块）接触有效计算 ###

thumb就是轨道上的圆形滑块，如何判断手指拖动的区域是否在滑块上呢，使用圆的标准方程(x－a)²+(y－b)²=r²来判断

private boolean isThumbTouched(MotionEvent event) {
            if (!isEnabled())
                return false;
            float mCircleR = isThumbOnDragging ? mThumbRadiusOnDragging : mThumbRadius;
            float x = mTrackLength / mDelta * (mProgress - mMin) + mLeft;
            float y = getMeasuredHeight() / 2f;
            return (event.getX() - x) * (event.getX() - x) + (event.getY() - y) * (event.getY() - y)
                    <= (mLeft + mCircleR) * (mLeft + mCircleR);
        }

### thumb（滑块）透明度实现 ###

滑块的透明度，是将滑块的颜色值进行计算加上alpha,求出一个新的颜色值，主要是使用Color这个工具类的方法，大家经常用到的是Color的parseColor(@Size(min=1) String colorString)方法，库中主要用的是Color的另一些方法alpha(int color)、red(int color)、green(int color)、blue(int color)方法分别求出argb值，求出的透明度经过计算修改后，再用 Color.argb(alpha, r, g, b)组合得出一个新的颜色值。

/**
         * 计算新的透明度颜色
         *
         * @param color 旧颜色
         * @param ratio 透明度系数
         */
        public int getColorWithAlpha(int color, float ratio) {
            int newColor = 0;
            int alpha = Math.round(Color.alpha(color) * ratio);
            int r = Color.red(color);
            int g = Color.green(color);
            int b = Color.blue(color);
            newColor = Color.argb(alpha, r, g, b);
            return newColor;
        }

### thumb（滑块） 最近节点位置计算方法 ###

根据节点个数mSectionCount和两个节点之间的间隔mSectionOffset，与滑块当前位置mThumbCenterX的比较，求出最近一个节点的位置。

//计算最近节点位置，mSectionCount：节点个数，mSectionOffset：两个节点间隔距离，mThumbCenterX：滑块中心点位置
            float x = 0;
            for (i = 0; i <= mSectionCount; i++) {
                x = i * mSectionOffset + mLeft;
                if (x <= mThumbCenterX && mThumbCenterX - x <= mSectionOffset) {
                    break;
                }
            }

### thumb（滑块） 滚动最近节点动画效果实现 ###

滑块自动滚动到最近节点增加了动画移动效果，使用ValueAnimator实现动画，Property Animation提供了Animator.AnimatorListener和Animator.AnimatorUpdateListener两个监听器用于动画在播放过程中的重要动画事件。其中AnimatorUpdateListener监听中onAnimationUpdate() 方法，动画每播放一帧时调用，在动画过程中，可侦听此事件来获取并使用 ValueAnimator 计算出来的属性值。利用传入事件的 ValueAnimator 对象，调用其 getAnimatedValue() 方法即可获取当前的属性值,就是修改后滑块的位置mThumbCenterX。此动画还配合有Interpolator，动画播放采用LinearInterpolator线性插值的方式执行动画。插值器它定义了动画变化过程中的属性变化规则，它根据时间比例因子计算出一个插值因子，用于设定目标对象的动画执行是否为线性变化、非线性变化或先加速后减速等等。Android系统本身内置了一些通用的Interpolator(插值器),如下:

<table> 
 <thead> 
  <tr> 
   <th>类或接口名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>AccelerateDecelerateInterpolator</td> 
   <td>在动画开始与结束的地方速率改变比较慢，在中间的时候加速</td> 
  </tr> 
  <tr> 
   <td>AccelerateInterpolator</td> 
   <td>在动画开始的地方速率改变比较慢，然后开始加速</td> 
  </tr> 
  <tr> 
   <td>AnticipateInterpolator</td> 
   <td>开始的时候向后然后向前甩</td> 
  </tr> 
  <tr> 
   <td>AnticipateOvershootInterpolator</td> 
   <td>开始的时候向后然后向前甩一定值后返回最后的值</td> 
  </tr> 
  <tr> 
   <td>BounceInterpolator</td> 
   <td>动画结束的时候弹起</td> 
  </tr> 
  <tr> 
   <td>CycleInterpolator</td> 
   <td>动画循环播放特定的次数，速率改变沿着正弦曲线</td> 
  </tr> 
  <tr> 
   <td>DecelerateInterpolator</td> 
   <td>在动画开始的地方快然后慢</td> 
  </tr> 
  <tr> 
   <td>LinearInterpolator</td> 
   <td>以常量速率改变</td> 
  </tr> 
  <tr> 
   <td>OvershootInterpolator</td> 
   <td>向前甩一定值后再回到原来位置</td> 
  </tr> 
 </tbody> 
</table>

**完整源码：**

private void autoAdjustSection() {
            int i;
            //计算最近节点位置，mSectionCount：节点个数，mSectionOffset：两个节点间隔距离，mThumbCenterX：滑块中心点位置
            float x = 0;
            for (i = 0; i <= mSectionCount; i++) {
                x = i * mSectionOffset + mLeft;
                if (x <= mThumbCenterX && mThumbCenterX - x <= mSectionOffset) {
                    break;
                }
            }
    
            BigDecimal bigDecimal = BigDecimal.valueOf(mThumbCenterX);
            //BigDecimal setScale保留1位小数，四舍五入，2.35变成2.4
            float x_ = bigDecimal.setScale(1, BigDecimal.ROUND_HALF_UP).floatValue();
            boolean onSection = x_ == x; // 就在section处，不作valueAnim，优化性能
    
            AnimatorSet animatorSet = new AnimatorSet();
            ValueAnimator valueAnim = null;
            if (!onSection) {
                if (mThumbCenterX - x <= mSectionOffset / 2f) {
                    valueAnim = ValueAnimator.ofFloat(mThumbCenterX, x);
                } else {
                    valueAnim = ValueAnimator.ofFloat(mThumbCenterX, (i + 1) * mSectionOffset + mLeft);
                }
                valueAnim.setInterpolator(new LinearInterpolator());
                valueAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        mThumbCenterX = (float) animation.getAnimatedValue();
                        mProgress = (mThumbCenterX - mLeft) * mDelta / mTrackLength + mMin;
                        invalidate();
    
                        if (mProgressListener != null) {
                            mProgressListener.onProgressChanged(SignSeekBar.this, getProgress(), getProgressFloat(),true);
                        }
                    }
                });
            }
            if (!onSection) {
                animatorSet.setDuration(mAnimDuration).playTogether(valueAnim);
            }
            animatorSet.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    mProgress = (mThumbCenterX - mLeft) * mDelta / mTrackLength + mMin;
                    isThumbOnDragging = false;
                    isTouchToSeekAnimEnd = true;
                    invalidate();
                    if (mProgressListener != null) {
                        mProgressListener.getProgressOnFinally(SignSeekBar.this, getProgress(), getProgressFloat(),true);
                    }
                }
    
                @Override
                public void onAnimationCancel(Animator animation) {
                    mProgress = (mThumbCenterX - mLeft) * mDelta / mTrackLength + mMin;
                    isThumbOnDragging = false;
                    isTouchToSeekAnimEnd = true;
                    invalidate();
                }
            });
            animatorSet.start();
        }

### 采用BigDecimal处理小数 ###

代码中的小数采用BigDecimal来处理，只介绍setScale相关方法，其它更多方法可以自己去学习，这里只是抛砖引玉。  
BigDecimal.setScale()方法用于格式化小数点  
setScale(1)表示保留一位小数，默认用四舍五入方式  
setScale(1,BigDecimal.ROUND\_DOWN)直接删除多余的小数位，如2.35会变成2.3  
setScale(1,BigDecimal.ROUND\_UP)进位处理，2.35变成2.4  
setScale(1,BigDecimal.ROUND\_HALF\_UP)四舍五入，2.35变成2.4  
setScaler(1,BigDecimal.ROUND\_HALF\_DOWN)四舍五入，2.35变成2.3，如果是5则向下舍

### Sign 提示框–三角形边框绘制 ###

单纯的进度提示框实现比较简单，主要是由矩形框+三角形组成，但是加边框绘制的时候比较麻烦一点，需要留出矩形和三角形交接的地方不能画线，这里做了假象交接的地方其实额外绘制了三角形的底边，颜色采用的是矩形库填充的颜色。三角形边框绘制如下：

private void drawTriangleBoder(Canvas canvas, Point point1, Point point2, Point point3, Paint paint) {
            triangleboderPath.reset();
            triangleboderPath.moveTo(point1.x, point1.y);
            triangleboderPath.lineTo(point2.x, point2.y);
            paint.setColor(signPaint.getColor());
            float value = mSignBorderSize / 6;
            paint.setStrokeWidth(mSignBorderSize + 1f);
            canvas.drawPath(triangleboderPath, paint);
            triangleboderPath.reset();
            paint.setStrokeWidth(mSignBorderSize);
            triangleboderPath.moveTo(point1.x - value, point1.y - value);
            triangleboderPath.lineTo(point3.x, point3.y);
            triangleboderPath.lineTo(point2.x + value, point2.y - value);
            paint.setColor(mSignBorderColor);
            canvas.drawPath(triangleboderPath, paint);
        }

### Sign 提示框–进度单位unit实现方式 ###

进度单位很多需求也是需要的，不是单纯的用canvas.drawText来绘制。这里采用的是**StaticLayout**。使用Canvas的drawText绘制文本是不会自动换行的，即使一个很长很长的字符串，drawText也只显示一行，超出部分被隐藏在屏幕之外。可以逐个计算每个字符的宽度，通过一定的算法将字符串分割成多个部分，然后分别调用drawText一部分一部分的显示， 但是这种显示效率会很低。StaticLayout是android中处理文字换行的一个工具类，**StaticLayout**已经实现了文本绘制换行处理，也支持标签属性`<small>，m/s<sup>2</sup>，μmol/l，μ/l`从而实现强大灵活的单位设置。

private void createValueTextLayout() {
            String value = isShowProgressInFloat ? String.valueOf(getProgressFloat()) : String.valueOf(getProgress());
            if (value != null && unit != null && !unit.isEmpty())
                value += String.format(" <small>%s</small>", unit);
            Spanned spanned = Html.fromHtml(value);
            valueTextLayout = new StaticLayout(spanned, valueTextPaint, mSignWidth, Layout.Alignment.ALIGN_CENTER, 1, 0, false);
        }

### 圆圈中心绘制文本 ###

圆圈中心绘制文字，高度是比较难控制的，特别是中文，不能简单的通过bounds.height()来获取高度的方式计算，需要先求出baseline这种方式来处理，求baseline的方式是固定的。下面提供一个通用的方法：

/**
         * 精确画圆圈中心文字（通用方法），其中文字的高度是最难计算适配的，采用此方法，可以完美解决
         *
         * @param canvas  画板
         * @param paint   画笔panit
         * @param centerX 圆圈中心X坐标
         * @param centerY 圆圈中心Y坐标
         * @param radius  半径
         * @param text    显示的文本
         */
        private void drawCircleText(Canvas canvas, Paint paint, float centerX, float centerY, float radius, String text) {
            paint.setTextAlign(Paint.Align.LEFT);
            Rect bounds = new Rect();
            paint.getTextBounds(text, 0, text.length(), bounds);
            Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();
            float baseline = centerY - radius + (2 * radius - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
            canvas.drawText(text, centerX - radius + radius - bounds.width() / 2, baseline, paint);
        }

## 项目结构目录截图 ##

![lmq9xZ633u2Uxe9wpiv.png][]

一个漂亮而强大的自定义view

> 代码地址如下：  
> [http://www.demodashi.com/demo/13502.html][http_www.demodashi.com_demo_13502.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_13502.html]: http://www.demodashi.com/demo/13502.html
[1.gif_raw_true]: https://github.com/zhou-you/EasySignSeekBar/blob/master/screenshot/1.gif?raw=true
[2.gif_raw_true]: https://github.com/zhou-you/EasySignSeekBar/blob/master/screenshot/2.gif?raw=true
[3.gif_raw_true]: https://github.com/zhou-you/EasySignSeekBar/blob/master/screenshot/3.gif?raw=true
[4.gif_raw_true]: https://github.com/zhou-you/EasySignSeekBar/blob/master/screenshot/4.gif?raw=true
[Link 1]: https://github.com/zhou-you/EasySignSeekBar
[lmq9xZ633u2Uxe9wpiv.png]: /images/20220511/c03bcd7607b2490998b1d87e8459eb99.png