一、价格区间SeekBar的核心价值与实现场景

在电商类Android应用中，价格区间筛选是提升用户体验的关键功能。传统SeekBar仅支持单点选择，而价格区间SeekBar（双滑块SeekBar）允许用户同时设置最低价和最高价，形成价格筛选区间。这种交互方式在京东、淘宝等头部电商APP中广泛使用，其核心价值体现在：

1. 精准筛选：用户可通过拖动两个滑块快速定位目标价格区间
2. 视觉直观：区间范围通过色块或渐变直观展示
3. 操作高效：相比输入框，拖动操作更符合移动端交互习惯

实现价格区间SeekBar需解决三个技术难点：双滑块同步控制、动态价格显示、区间高亮效果。本文将通过自定义View和Material Design组件两种方案详细解析实现过程。

二、基于自定义View的实现方案

1. 基础结构搭建

创建自定义RangeSeekBar类继承AppCompatSeekBar，核心属性包括：

public class RangeSeekBar extends AppCompatSeekBar {
    private float minThumbPos; // 左滑块位置
    private float maxThumbPos; // 右滑块位置
    private int minPrice;      // 最小价格
    private int maxPrice;      // 最大价格
    private Paint rangePaint;  // 区间高亮画笔
    private Paint thumbPaint;  // 滑块画笔
    private TextPaint textPaint; // 价格文本画笔
}

2. 测量与绘制逻辑

重写onMeasure()和onDraw()方法实现核心绘制：

@Override
protected synchronized void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 绘制进度条背景
    drawTrack(canvas);
    // 绘制选中区间
    drawSelectedRange(canvas);
    // 绘制左右滑块
    drawThumb(canvas, minThumbPos, true);
    drawThumb(canvas, maxThumbPos, false);
    // 绘制价格文本
    drawPriceText(canvas);
}
private void drawSelectedRange(Canvas canvas) {
    rangePaint.setColor(Color.parseColor("#4CAF50"));
    float left = minThumbPos;
    float right = maxThumbPos;
    RectF rect = new RectF(left, getHeight()/2 - 4, right, getHeight()/2 + 4);
    canvas.drawRoundRect(rect, 4, 4, rangePaint);
}

3. 触摸事件处理

通过onTouchEvent()实现双滑块拖动逻辑：

@Override
public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // 判断点击的是左滑块还是右滑块
            if (isCloseToMinThumb(x)) {
                mActivePointerId = MIN_THUMB;
            } else if (isCloseToMaxThumb(x)) {
                mActivePointerId = MAX_THUMB;
            }
            break;
        case MotionEvent.ACTION_MOVE:
            if (mActivePointerId == MIN_THUMB) {
                minThumbPos = constrain(x, 0, maxThumbPos - thumbWidth);
            } else if (mActivePointerId == MAX_THUMB) {
                maxThumbPos = constrain(x, minThumbPos + thumbWidth, getWidth());
            }
            invalidate();
            break;
    }
    return true;
}

三、基于Material Design的实现方案

AndroidX库中的RangeSlider组件提供了开箱即用的价格区间选择功能，实现步骤如下：

1. 添加依赖

implementation 'com.google.android.material:material:1.6.0'

2. XML布局配置

<com.google.android.material.slider.RangeSlider
    android:id="@+id/priceRangeSlider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:values="@array/initial_slider_values"
    app:minSeparation="0"
    android:stepSize="50.0"
    app:labelBehavior="floating"
    style="@style/Widget.Material3.RangeSlider"/>

3. 代码初始化

RangeSlider priceSlider = findViewById(R.id.priceRangeSlider);
priceSlider.setValueFrom(0f);
priceSlider.setValueTo(1000f);
priceSlider.setStepSize(50f);
// 设置值变化监听
priceSlider.addOnChangeListener((slider, value, fromUser) -> {
    float[] values = slider.getValues();
    float minPrice = values[0];
    float maxPrice = values[1];
    priceText.setText(getString(R.string.price_range, minPrice, maxPrice));
});

四、性能优化与高级功能

1. 绘制优化技巧

• 使用Canvas.save()和restore()减少状态变更
• 对静态元素（如滑块背景）进行缓存
• 避免在onDraw()中创建对象

2. 动态价格显示

实现价格标签随滑块移动的动画效果：

private void animatePriceLabel(final TextView label, final float targetX) {
    ValueAnimator animator = ValueAnimator.ofFloat(label.getX(), targetX);
    animator.setDuration(200);
    animator.addUpdateListener(animation -> {
        float x = (Float) animation.getAnimatedValue();
        label.setX(x - label.getWidth()/2);
    });
    animator.start();
}

3. 无障碍支持

为SeekBar添加无障碍描述：

priceSlider.setContentDescription(getString(R.string.price_range_description));
priceSlider.setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_YES);

五、实际应用中的注意事项

1. 价格单位处理：需考虑不同地区的货币符号和千分位显示
2. 边界值校验：防止最小价大于最大价的情况
3. 设备适配：不同屏幕尺寸下的滑块大小适配
4. 动画性能：在低端设备上禁用复杂动画

六、完整实现示例

以下是一个可运行的Material Design实现示例：

public class PriceRangeActivity extends AppCompatActivity {
    private RangeSlider priceSlider;
    private TextView priceDisplay;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_price_range);
        priceSlider = findViewById(R.id.priceRangeSlider);
        priceDisplay = findViewById(R.id.priceDisplay);
        // 初始化滑块范围
        priceSlider.setValueFrom(0f);
        priceSlider.setValueTo(10000f);
        priceSlider.setStepSize(100f);
        priceSlider.setValues(0f, 5000f);
        // 设置监听器
        priceSlider.addOnChangeListener((slider, value, fromUser) -> {
            float[] values = slider.getValues();
            String priceText = getString(R.string.price_format, 
                (int)values[0], (int)values[1]);
            priceDisplay.setText(priceText);
        });
    }
}

通过上述方案，开发者可以根据项目需求选择自定义View实现（适合需要高度定制化的场景）或Material Design组件实现（适合快速开发且符合Material规范的场景）。在实际开发中，建议结合两种方案的优点，在Material Design基础上进行必要的定制，以实现最佳的用户体验。