Android双不同样式滑块RangeSeekbar实现问题及解决方案求助

方案一：改造现有org.florescu.android.rangeseekbar.RangeSeekBar库 #

你可以直接将该库的核心类拷贝到本地项目做自定义扩展，新增右侧滑块的自定义配置，修改点如下：

• 在项目的res/values/attrs.xml中，给RangeSeekBar的自定义属性集合添加4个属性：

  <attr name="thumbNormalRight" format="reference"/>
  <attr name="thumbPressedRight" format="reference"/>
  <attr name="thumbDisabledRight" format="reference"/>
  <attr name="thumbFocusedRight" format="reference"/>
  

• 在RangeSeekBar的Java/Kotlin类中新增对应Drawable成员变量，存储右侧滑块的各状态资源
• 找到onDraw方法中绘制滑块的逻辑，将原来左右共用同一份滑块配置的逻辑，改为左侧用原有配置、右侧用新增的右侧配置
• 调整滑块触摸事件的状态切换逻辑，确保左右滑块按下时分别加载对应pressed状态的资源

改造完成后的布局配置示例：

<org.florescu.android.rangeseekbar.RangeSeekBar
    android:id="@+id/rangeSeekBar_"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:visibility="visible"
    app:thumbPressed="@drawable/ic_seeker_left_pressed"
    app:thumbNormal="@drawable/ic_seeker_left_normal"
    app:thumbPressedRight="@drawable/ic_seeker_right_pressed"
    app:thumbNormalRight="@drawable/ic_seeker_right_normal"
    app:showLabels="false"
/>

方案二：使用AndroidX原生Slider组件实现（推荐） #

AndroidX Material 1.2.0及以上版本自带的Slider原生支持范围选择模式，可直接单独配置两个滑块的样式，无需引入第三方库，实现步骤如下：

1. 确保项目已引入AndroidX Material组件依赖
2. 布局中配置Slider，传入两个初始值即可开启双滑块范围选择模式：

   <com.google.android.material.slider.Slider
       android:id="@+id/rangeSlider"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:valueFrom="0"
       android:valueTo="100"
       android:values="@array/initial_slider_values"
       app:thumbRadius="12dp"
       app:trackHeight="4dp"/>
   

3. 在res/values/arrays.xml中定义滑块初始值：

   <array name="initial_slider_values">
       <item>20</item>
       <item>80</item>
   </array>
   

4. 代码中动态给两个滑块设置不同的drawable：
   • Kotlin示例：

   val rangeSlider = findViewById<Slider>(R.id.rangeSlider)
   val leftThumb = ContextCompat.getDrawable(this, R.drawable.ic_seeker_left)
   val rightThumb = ContextCompat.getDrawable(this, R.drawable.ic_seeker_right)
   rangeSlider.setThumbDrawable(0, leftThumb)
   rangeSlider.setThumbDrawable(1, rightThumb)
   

   • Java示例：

   Slider rangeSlider = findViewById(R.id.rangeSlider);
   Drawable leftThumb = ContextCompat.getDrawable(this, R.drawable.ic_seeker_left);
   Drawable rightThumb = ContextCompat.getDrawable(this, R.drawable.ic_seeker_right);
   rangeSlider.setThumbDrawable(0, leftThumb);
   rangeSlider.setThumbDrawable(1, rightThumb);
   

内容的提问来源于stack exchange，提问作者Waris Ali Rehmani