android - 我们如何创建如下 UI，如 Native Android 所示

Question

我必须实现下面的搜索栏，如下所示。

左侧圆形拇指图标可以拖动并放置到各个对应的数字上。数字保持不变，只有拇指图标可以用手指拖动到每个位置。如何让拇指单独滚动？

Answer 1

对于垂直SeekBar，您可以使用自定义 View here无需太多(如果有的话)修改。

更新:除替换外没有任何修改

int i=0;
i=getMax() - (int) (getMax() * event.getY() / getHeight());

与

int i = getMax() - (int) (getMax() * (event.getY() - getPaddingEnd()) / (getHeight() - getPaddingEnd()));

SeekBar 拇指可以定义如下:

seekbar_thumb.xml

<shape 
    android:shape="oval">
    <solid android:color="@android:color/white" />
    <size
        android:width="24dp"
        android:height="24dp" />
</shape>

这些共同为我们提供了以下内容:

现在的目标是用文本覆盖我们所拥有的内容。我们可以使用带有九个 TextView 的 ConstraintLayout 来实现此目的。我们将设置顶部和底部的 TextView，并将中间的 TextView 放置在垂直链中。嵌入的注释提供有关布局的更多信息。

activity_main.xml

<androidx.constraintlayout.widget.
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--    Since the SeekBar is rotated -90 degrees by the custom view, paddingEnd becomes
            the padding from the top of the rotated view.
    -->
    <com.example.verticalseekbar.VerticalSeekBar
        android:id="@+id/seekbar"
        android:layout_width="30dp"
        android:layout_height="350dp"
        android:layout_marginStart="36dp"
        android:background="@drawable/seekbar_background"
        android:max="9"
        android:min="1"
        android:paddingEnd="48dp"
        android:progressDrawable="@null"
        android:thumb="@drawable/seekbar_thumb"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!--    The SeekBar has an implicit left padding of 16dp, so the top margin for the top line
            of text is 48dp - 16dp == 36dp (SeekBar top padding less the left padding of this view.
            This value and the positioning of the top and bottom TextViews might be better under
            program control rather than specifying them here.
    -->
    <TextView
        android:id="@+id/textView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="36dp"
        android:paddingStart="8dp"
        android:text="9     Incredible"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="@id/seekbar"
        app:layout_constraintTop_toTopOf="@+id/seekbar"
        app:layout_constraintVertical_chainStyle="spread_inside" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="8dp"
        android:text="8     Great"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/textView7"
        app:layout_constraintStart_toStartOf="@id/seekbar"
        app:layout_constraintTop_toBottomOf="@+id/textView9" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="8dp"
        android:text="7     Good"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/textView6"
        app:layout_constraintStart_toStartOf="@id/seekbar"
        app:layout_constraintTop_toBottomOf="@+id/textView8" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="8dp"
        android:text="6     Above Average"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/textView5"
        app:layout_constraintStart_toStartOf="@id/seekbar"
        app:layout_constraintTop_toBottomOf="@+id/textView7" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="8dp"
        android:text="5     Average (I'd drink it if it's free)"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/textView4"
        app:layout_constraintStart_toStartOf="@id/seekbar"
        app:layout_constraintTop_toBottomOf="@+id/textView6" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="8dp"
        android:text="4     Below Average"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintStart_toStartOf="@id/seekbar"
        app:layout_constraintTop_toBottomOf="@+id/textView5" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="8dp"
        android:text="3     Poor"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintStart_toStartOf="@id/seekbar"
        app:layout_constraintTop_toBottomOf="@+id/textView4" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="8dp"
        android:text="2     Terrible"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/textView1"
        app:layout_constraintStart_toStartOf="@id/seekbar"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:paddingStart="8dp"
        android:text="1     Undrinkable"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@id/seekbar"
        app:layout_constraintStart_toStartOf="@id/seekbar" />

</androidx.constraintlayout.widget.ConstraintLayout>