重铸安卓荣光——双向滑块增强

痛点：

公司打算做安卓软件，最近在研究安卓，打算先绘制样式

研究发现安卓并不像前端有那么多组件库，甚至有些基础的组件都需要自己实现，记录一下自己实现的组件

成品展示

上面一条是谷歌提供的双向滑块，下面是对双向滑块的增强，加了百分比以及刻度线

RangeSlider

先来认识下谷歌提供的RangeSlider，小黄在使用过程中，了解到他一些属性，在此也分享给打架

• trackColorActive：滑动条区间颜色，也就是两个滑块之间显示绿色的部分

• trackColorInactive：滑动条底色，两个滑块外的颜色，默认是灰色，上面的效果图就是默认颜色

• thumbColor：滑块颜色

• thumbRadius：滑块半径

• thumbStrokeColor：滑块边框颜色

• thumbStrokeWidth：滑块边框粗细

• thumbElevation：滑块阴影效果，值越大越明显

• haloColor：滑块点击时，弹出更大的框，上面效果图选中时橙色部分

• haloRadius：更大框的半径

• labelBehavior：选中滑块气泡效果

  • floating：气泡效果会溢出该RangeSlider
  • withinBounds：气泡效果在RangeSlider里面
  • gone：不使用气泡
  • visible：气泡总是可见

  从上到下分别是floating，withinBounds，gone，visible可以通过观察背景色来区分

  

• values：滑块的取值范围，不定义该选项的话则变成单滑块

  可以在res/values/array.xml中添加最大值和最小值，这里注意滑块默认最小值是0，最大值是1还需要配合valueTo和valueFrom属性来设置，否则会报错

  <resources>
      <array name="default_values">
          <item>0</item> <!-- 初始最小值 -->
          <item>100</item> <!-- 初始最大值 -->
      </array>
  </resources>
  

具体代码

      <com.google.android.material.slider.RangeSlider
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:values="@array/default_values"
            android:valueTo="100f"
            android:valueFrom="0f"
            app:trackColorActive="@color/count_green"
            app:thumbColor="@color/white"
            app:thumbStrokeColor="@color/count_green"
            app:thumbStrokeWidth="2dp"
            app:thumbElevation="5dp"
            app:haloColor="@color/transparent_orange"
            app:labelBehavior="floating"/>

RangeSlider增强

接下来要对RangeSlider最增强，绘制他的刻度线和百分比，直接上代码

public class CustomRangeSlider extends RangeSlider {

    private Paint paint;

    public CustomRangeSlider(Context context) {
        super(context);
        init();
    }

    public CustomRangeSlider(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomRangeSlider(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(2);
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {
        int tickCount = 11; // 刻度线的数量
        setPadding((int) UiUtils.dp2px(getContext(),15),0,(int) UiUtils.dp2px(getContext(),15),0);
        float trackWidth = getWidth() - getPaddingStart() - getPaddingEnd();
        float tickSpacing = trackWidth / (tickCount - 1);

        for (int i = 0; i < tickCount; i++) {
            float x = getPaddingStart() + i * tickSpacing;
            float height;
            if (i % 2 == 0) {
                height = (float) getHeight() / 2 + getThumbRadius();
                String text = i * 10 + "%";
                paint.setTextSize(UiUtils.dp2px(getContext(),13)); // 设置文字大小
                float textWidth = paint.measureText(text); // 计算文字宽度
                canvas.drawText(text, x - textWidth / 2,getHeight(), paint); // 绘制文字在刻度线底部
            }else {
                height = (float) getHeight() / 2 + (float) getThumbRadius() / 2;
            }
            canvas.drawLine(x, (float) getHeight() /2, x, height, paint);
        }
        super.onDraw(canvas);
    }
}