Android笔记--一个可以指定滑块宽度的进度条

本文介绍了一种自定义的DragBar组件实现方法,该组件可在Android应用中作为进度条使用,支持调整进度条的宽度、颜色等属性,并提供了触摸交互功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果图:

 

调用:


        //都是可选项,已有默认值
        dragBar.setSliderWidth(600);//进度条宽度,可以随时更改
        dragBar.setBgColor(0xffcccccc);//进度条背景颜色
        dragBar.setSliderColor(0xffff8585);//滑块颜色
        dragBar.setSliderColor(0xffffffff);//滑块的描边颜色

布局:

<com.imxiaoyu.common.widget.DragBar
                android:id="@+id/dragBar"
                android:layout_width="match_parent"
                android:layout_height="26dp" />

代码:

package com.imxiaoyu.common.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * 可左右拖动的一个条
 * Created by 庞光渝 on 2017/3/22.
 */

public class DragBar extends View {

    /**
     * 变量
     */
    private int width;//宽度
    private int height;//高度

    private int bgColor = 0xffcccccc;//背景颜色

    private int sliderWidth = 80;//滑块的宽度
    private int sliderX;//滑块的起始
    private int sliderColor = 0xffff8585;//滑块颜色
    private int sliderStrokeColor = 0xffffffff;//描边,按下的时候会有一个描边的效果

    private float touchDownX;

    private boolean isMustTouckSlider = true;//是否拖动滑块的时候才能滑动滑块
    private boolean isTouch = false;

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

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

    public DragBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        width = getWidth();
        height = getHeight();
        if (sliderWidth < height) {
            sliderWidth = height;//最小宽度是高度
        }

        /**
         * 画背景
         */
        Paint paint = new Paint();
        paint.setColor(bgColor);
        RectF r2 = new RectF();                           //RectF对象
        r2.left = 0;                                 //左边
        r2.top = 0;                                 //上边
        r2.right = width;                                   //右边
        r2.bottom = height;                              //下边
        canvas.drawRoundRect(r2, height / 2, height / 2, paint);        //绘制圆角矩形

        /**
         * 画滑块
         */
        paint = new Paint();
        paint.setColor(sliderColor);
        r2 = new RectF();                           //RectF对象
        r2.left = sliderX;                                 //左边
        r2.top = 0;                                 //上边
        r2.right = sliderX + sliderWidth;                                   //右边
        r2.bottom = height;                              //下边
        canvas.drawRoundRect(r2, height / 2, height / 2, paint);        //绘制圆角矩形
        //画描边
        paint = new Paint();
        paint.setColor(sliderStrokeColor);
        paint.setStrokeWidth((float) 4.0);               //线宽
        paint.setStyle(Paint.Style.STROKE);
        r2 = new RectF();                                  //RectF对象
        r2.left = sliderX;                                 //左边
        r2.top = 0;                                        //上边
        r2.right = sliderX + sliderWidth;             //右边
        r2.bottom = height;                                 //下边
        canvas.drawRoundRect(r2, height / 2, height / 2, paint);        //绘制圆角矩形
    }

    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (isMustTouckSlider) {
                    //必须按在滑块上
                    if (event.getX() >= sliderX && event.getX() <= sliderX + sliderWidth) {
                        isTouch = true;
                    } else {
                        isTouch = false;
                    }
                } else {
                    isTouch = true;
                }
                if (isTouch) {
                    touchDownX = event.getX();
                    invalidate();
                }
                break;

            case MotionEvent.ACTION_MOVE:
                if (isTouch) {
                    float x = event.getX() - touchDownX;
                    test(x);
                    touchDownX = event.getX();
                }
                break;
            case MotionEvent.ACTION_UP:
                isTouch = false;
                invalidate();
                break;
        }
        return true;
    }

    private void test(float x) {
        width = getWidth();
        height = getHeight();
        if (sliderX + x < 0) {
            return;
        }
        if (sliderX + x + sliderWidth > width) {
            return;
        }
        sliderX += x;
        invalidate();
    }

    public int getBgColor() {
        return bgColor;
    }

    public void setBgColor(int bgColor) {
        this.bgColor = bgColor;
        invalidate();
    }

    public int getSliderWidth() {
        return sliderWidth;
    }

    public void setSliderWidth(int sliderWidth) {
        this.sliderWidth = sliderWidth;
        invalidate();
    }

    /**
     * 返回滑块的起始位置
     *
     * @return
     */
    public int getSliderX() {
        return sliderX;
    }

    public void setSliderX(int sliderX) {
        this.sliderX = sliderX;
        invalidate();
    }

    public int getSliderColor() {
        return sliderColor;
    }

    public void setSliderColor(int sliderColor) {
        this.sliderColor = sliderColor;
        invalidate();
    }

    public int getSliderStrokeColor() {
        return sliderStrokeColor;
    }

    public void setSliderStrokeColor(int sliderStrokeColor) {
        this.sliderStrokeColor = sliderStrokeColor;
        invalidate();
    }

    public boolean isMustTouckSlider() {
        return isMustTouckSlider;
    }

    public void setMustTouckSlider(boolean mustTouckSlider) {
        isMustTouckSlider = mustTouckSlider;
        invalidate();
    }

    /**
     * 返回滑块中心点的坐标
     *
     * @return
     */
    public int getCoroProgress() {
        return sliderX + sliderWidth / 2;
    }
}

http://doutugongchang.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值