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

痛点:

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

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

成品展示

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

滑块

RangeSlider

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

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

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

  • thumbColor:滑块颜色

  • thumbRadius:滑块半径

  • thumbStrokeColor:滑块边框颜色

  • thumbStrokeWidth:滑块边框粗细

  • thumbElevation:滑块阴影效果,值越大越明显

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

  • haloRadius:更大框的半径

  • labelBehavior:选中滑块气泡效果

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

    从上到下分别是floatingwithinBoundsgonevisible可以通过观察背景色来区分

    4滑块

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

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

    <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);
    }
}
  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值