Android开发自定义双向SeekBar拖动条控件

下面就给大家详细讲解一下“Android开发自定义双向SeekBar拖动条控件的完整攻略”。

1. 开发自定义双向SeekBar的前期准备

在开始开发自定义双向SeekBar之前，我们需要先进行一些前期准备工作：

1. 创建一个新的Android项目；
2. 在项目的build.gradle文件中添加如下依赖：

implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'

1. 在res/values/attrs.xml文件中添加自定义属性：

<attr name="left_progress" format="integer"/>
<attr name="right_progress" format="integer"/>
<attr name="max" format="integer"/>
<attr name="progress_color" format="color"/>

2. 开发自定义双向SeekBar的布局文件

接着，我们可以开始开发自定义双向SeekBar的布局文件。在res/layout目录下创建一个custom_seek_bar.xml文件，并添加如下代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/left_progress_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="16sp"/>

    <SeekBar
        android:id="@+id/seek_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="@integer/max_seek_bar"
        android:progressDrawable="@drawable/custom_seek_bar_background"
        android:thumb="@drawable/custom_seek_bar_thumb"/>

    <TextView
        android:id="@+id/right_progress_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="16sp"/>

</LinearLayout>

接着，我们需要分别开发自定义的SeekBar背景和thumb资源文件。

3. 开发自定义背景资源文件

在res/drawable目录下创建一个custom_seek_bar_background.xml文件，并添加如下代码：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="8dp" />
            <stroke
                android:width="1dp"
                android:color="@color/black"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">    
                <size android:height="4dp" />
                <solid android:color="@color/custom_seek_bar_color" />
                <corners android:radius="8dp" />
            </shape>
        </clip>
    </item>

</layer-list>

4. 开发自定义thumb资源文件

在res/drawable目录下创建一个custom_seek_bar_thumb.xml文件，并添加如下代码：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size android:width="24dp" android:height="24dp" />

    <solid android:color="@color/custom_seek_bar_color" />

</shape>

5. 开发自定义SeekBar控件

最后，我们需要新建一个名为CustomSeekBar的Java类，该类继承自LinearLayout。

public class CustomSeekBar extends LinearLayout {

    private SeekBar seekBar;
    private TextView leftProgressText;
    private TextView rightProgressText;

    private int max;
    private int leftProgress;
    private int rightProgress;
    private int progressColor;

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

    private void init(Context context, AttributeSet attrs) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.custom_seek_bar, this, true);

        seekBar = findViewById(R.id.seek_bar);
        leftProgressText = findViewById(R.id.left_progress_text);
        rightProgressText = findViewById(R.id.right_progress_text);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomSeekBar);
        max = a.getInt(R.styleable.CustomSeekBar_max, 100);
        leftProgress = a.getInt(R.styleable.CustomSeekBar_left_progress, 0);
        rightProgress = a.getInt(R.styleable.CustomSeekBar_right_progress, max);
        progressColor = a.getColor(R.styleable.CustomSeekBar_progress_color, ContextCompat.getColor(context, R.color.custom_seek_bar_color));
        a.recycle();

        seekBar.setMax(max);
        seekBar.setProgressDrawable(ContextCompat.getDrawable(context, R.drawable.custom_seek_bar_background));
        seekBar.setThumb(ContextCompat.getDrawable(context, R.drawable.custom_seek_bar_thumb));

        updateProgress(leftProgress, rightProgress);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                if (fromUser) {
                    if (progress <= leftProgress) {
                        updateProgress(progress, rightProgress);
                    } else {
                        updateProgress(leftProgress, progress);
                    }
                }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }

    private void updateProgress(int leftProgress, int rightProgress) {
        this.leftProgress = leftProgress;
        this.rightProgress = rightProgress;

        seekBar.setProgressDrawable(getSeekBarDrawable());

        leftProgressText.setText(String.valueOf(leftProgress));
        rightProgressText.setText(String.valueOf(rightProgress));
    }

    private Drawable getSeekBarDrawable() {
        Bitmap bitmap = Bitmap.createBitmap(seekBar.getWidth(), seekBar.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);

        // draw left progress
        Paint leftPaint = new Paint();
        leftPaint.setColor(progressColor);
        RectF leftRect = new RectF(0, 0, getProgressWidth(leftProgress), seekBar.getHeight());
        canvas.drawRect(leftRect, leftPaint);

        // draw right progress
        Paint rightPaint = new Paint();
        rightPaint.setColor(progressColor);
        RectF rightRect = new RectF(getProgressWidth(leftProgress), 0, seekBar.getWidth(), seekBar.getHeight());
        canvas.drawRect(rightRect, rightPaint);

        // draw thumb
        Drawable thumbDrawable = seekBar.getThumb();
        int thumbX = (int) (getProgressWidth(leftProgress) - (thumbDrawable.getIntrinsicWidth() / 2.0f));
        int thumbY = seekBar.getHeight() / 2 - thumbDrawable.getIntrinsicHeight() / 2;

        canvas.translate(thumbX, thumbY);
        thumbDrawable.draw(canvas);

        return new BitmapDrawable(getResources(), bitmap);
    }

    private int getProgressWidth(int progress) {
        int progressBarWidth = seekBar.getWidth() - seekBar.getPaddingLeft() - seekBar.getPaddingRight();
        float ratio = (float) (progress - seekBar.getMin()) / (float) (seekBar.getMax() - seekBar.getMin());
        return (int) (ratio * progressBarWidth);
    }

    public int getLeftProgress() {
        return leftProgress;
    }

    public int getRightProgress() {
        return rightProgress;
    }

}

以上就是开发一个自定义双向SeekBar拖动条控件的完整攻略，下面给出一个使用示例。

示例

在布局文件中使用自定义SeekBar：

<com.example.customseekbar.CustomSeekBar
    android:id="@+id/custom_seek_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:left_progress="20"
    app:right_progress="80"
    app:max="100"
    app:progress_color="@color/custom_seek_bar_color"/>

在代码中获取自定义SeekBar的左右进度值：

CustomSeekBar customSeekBar = findViewById(R.id.custom_seek_bar);
int leftProgress = customSeekBar.getLeftProgress();
int rightProgress = customSeekBar.getRightProgress();