痛点:
公司打算做安卓软件,最近在研究安卓,打算先绘制样式
研究发现安卓并不像前端有那么多组件库,甚至有些基础的组件都需要自己实现,记录一下自己实现的组件
成品展示
上面一条是谷歌提供的双向滑块,下面是对双向滑块的增强,加了百分比以及刻度线
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);
}
}