如何在安卓中制作双重拖动条？

Question

我正在开发一款安卓应用程序，在该应用程序中，用户可以通过seekbar选择最大值。

我需要在同一seekbar上再添加一个按钮，以便用户可以从特定的唯一seekbar中选择最大和最小值。

这是我的单个seekbar的代码 -

package com.ui.yogeshblogspot;

public class CustomSeekBarExActivity extends Activity implements OnSeekBarChangeListener{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
 SeekBar bar=(SeekBar)findViewById(R.id.seekBar1);
 bar.setOnSeekBarChangeListener(this);
}

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
        boolean fromUser) {
    // TODO Auto-generated method stub
    TextView tv=(TextView)findViewById(R.id.textView2);
    tv.setText(Integer.toString(progress)+"%");

}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {
    // TODO Auto-generated method stub

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {
    // TODO Auto-generated method stub

}
}

这是我的 seek bar 的 XML 代码 -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" 
android:background="#FFFFFF">

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Choose Your Progress"
    android:textColor="#000000"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<SeekBar
    android:id="@+id/seekBar1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:layout_gravity="center"
    android:progressDrawable="@xml/progress"
    android:max="100"
    android:thumb="@xml/thumb"/>

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:gravity="center"
    android:layout_gravity="center"
    android:paddingTop="10dp"
    android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

- Hitesh Matnani

---

请查看此视图：https://github.com/Larpon/RangeSeekBar - Andy

@Andy 谢谢，这是所有的函数，我该如何将此代码添加到活动中？请帮帮我！ - Hitesh Matnani

@NathanWalters 谢谢，我已经阅读了它。但是如何将其集成到活动中？以及如何使用它？你能帮忙解释一下吗？ - Hitesh Matnani

有一个非常有用的库，https://github.com/anothem/android-range-seek-bar - ashraful

完全自定义SeekBar http://codingsignals.com/crystal-range-seekbar-in-android/ - Asif

Answer 1

完全自定义双向和单向拖动条，您可以提供拇指颜色等 http://codingsignals.com/crystal-range-seekbar-in-android/

在gradle中添加

dependencies {
compile 'com.crystal:crystalrangeseekbar:1.0.0' 
}

<com.crystal.crystalrangeseekbar.widgets.BubbleThumbRangeSeekbar
android:id="@+id/rangeSeekbar5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:corner_radius="10"
app:min_value="0"
app:max_value="100"
app:steps="5"
app:bar_color="#F7BB88"
app:bar_highlight_color="#E07416"
app:left_thumb_image="@drawable/thumb"
app:right_thumb_image="@drawable/thumb"
app:left_thumb_image_pressed="@drawable/thumb_pressed"
app:right_thumb_image_pressed="@drawable/thumb_pressed"
app:data_type="_integer"/>

- Asif

---

这个库很有用。但是你能告诉我如何设置初始值吗？我的意思是最初两个点应该到达某个点。 - Gevaria Purva

这个库非常不错，虽然圆的半径似乎无法配置，即使它们有一个参数（app:corner_radius）。所以如果你不在意圆很大，这是一个很棒的自定义范围拖动条。 - xarlymg89

Answer 2

Android小部件类库仅提供一个滑块控件，即只有一个拇指控制的SeekBar。在网上进行了一些研究，并发现了这个很酷的自定义小部件，RangeSeekBar。

您可以按照以下任意一种方式进行操作：

https://github.com/edmodo/range-bar

https://code.google.com/p/range-seek-bar/

https://github.com/Larpon/RangeSeekBar

- Thirumoorthy

Answer 3

现在，RangeSlider已正式添加到Material Components并且支持所需选项，我建议使用它而不是外部库。

首先，您应该将视图添加到XML布局中：

<com.google.android.material.slider.RangeSlider
android:id="@+id/range_seek_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:valueFrom="0.0"
android:valueTo="100.0"
app:values="@array/initial_slider_values"/>

然后将初始滑块值添加到数组中

<resources>
  <array name="initial_slider_values">
    <item>20.0</item>
    <item>70.0</item>
  </array>
</resources>

之后您可以在代码中访问RangeSlider的值：

binding.rangeSeekBar.addOnChangeListener { slider, value, fromUser ->
    Logger.d(slider.values)
}

其中values是一个包含2个浮点数成员的列表

- YaMiN

Answer 4

来源：这里

        <com.appyvet.rangebar.RangeBar
            xmlns:custom="http://schemas.android.com/apk/res-auto"
            android:id="@+id/SearchrangeSeekbarAge"
            android:layout_width="match_parent"
            android:layout_height="72dp"
            custom:tickStart="18"
            custom:tickInterval="1"
            custom:tickEnd="70" />


        <com.appyvet.rangebar.RangeBar
            xmlns:custom="http://schemas.android.com/apk/res-auto"
            android:id="@+id/SearchrangeSeekbarHeight"
            android:layout_width="match_parent"
            android:layout_height="72dp"
            custom:tickStart="4.5"
            custom:tickInterval="0.10"
            custom:tickEnd="7.0" />


rangebar.setOnRangeBarChangeListener(new RangeBar.OnRangeBarChangeListener() {
        @Override
        public void onRangeChangeListener(RangeBar rangeBar, int leftPinIndex,
                int rightPinIndex,
                String leftPinValue, String rightPinValue) {
        }
    });

- Nilesh Savaliya

Answer 5

您不需要使用两个滑动条，只需使用一个带有两个拇指的滑动条即可执行最小值和最大值的相同功能。

这里是一个您可以使用的库：https://code.google.com/p/range-seek-bar/

您可以使用以下代码：

private final Thumb getClosestThumb(float touchX)

{
double xValue = screenToNormalized(touchX);        
return (Math.abs(xValue - normalizedMinValue) < Math.abs(xValue - normalizedMaxValue)) ? Thumb.MIN : Thumb.MAX;
}

在"public boolean onTouchEvent(MotionEvent event)"方法中，

if(pressedThumb == null),
pressedThumb = getClosestThumb(mDownMotionX);

- Kirtikumar A.

---

谢谢，这是一段代码或者一个库，请您详细地帮助我，因为我对它还不熟悉。 - Hitesh Matnani

这是一个用于SeekBar的库。 - Kirtikumar A.

Answer 6

RangeSeekBarhttps://github.com/RanaRanvijaySingh/RangeSeekBar。此外，还有其他库可提供大量自定义选项。如果您想要更具交互性的设计，请查看Material Range Barhttp://android-arsenal.com/details/1/1272。

- Rana Ranvijay Singh

Answer 7

你可以使用我的这个库。它带有许多自定义选项。它支持双向进度寻找。

- Faisal Khan

Answer 8

我认为这个链接也可能会有所帮助。range-seek-bar。在jitpack.io上有关于它的解释。

- user12619138