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

痛点：

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

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

成品展示

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

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.RangeSliderandroid: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);}@Overrideprotected 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);}
}