java - Seekbar - 添加与点均匀分布的图像

Question

我想实现如图所示的类似用户界面。我的点均匀分布，但如何在均匀分布的下方添加图像。 enter image description here

github.com/woxingxiao/BubbleSeekBar

result

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.xw.repo.BubbleSeekBar
                    android:id="@+id/bubbleSeekBar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"

                    android:layout_marginTop="8dp"
                    app:bsb_auto_adjust_section_mark="true"
                    app:bsb_bubble_color="@color/colorVitalRed"
                    app:bsb_bubble_text_color="@color/colorWhite"
                    app:bsb_max="10"
                    app:bsb_min="0"
                    app:bsb_progress="0"
                    app:bsb_second_track_color="@color/blue"
                    app:bsb_section_count="10"
                    app:bsb_section_text_position="below_section_mark"
                    app:bsb_show_progress_in_float="false"
                    app:bsb_show_section_mark="true"
                    app:bsb_show_section_text="true"
                    app:bsb_show_thumb_text="false"
                    app:bsb_track_color="@color/colorWhite" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:src="@drawable/ic_pain_0_emoticon" />

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:src="@drawable/ic_pain_0_emoticon" />

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:src="@drawable/ic_pain_0_emoticon" />

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:src="@drawable/ic_pain_0_emoticon" />

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:src="@drawable/ic_pain_0_emoticon" />
            </LinearLayout>
        </LinearLayout>

Answer 1

看看这个

Result

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

<com.xw.repo.BubbleSeekBar
    android:id="@+id/bubbleSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginTop="8dp"
    app:bsb_auto_adjust_section_mark="true"
    app:bsb_bubble_color="@color/colorPrimary"
    app:bsb_bubble_text_color="@color/colorAccent"
    app:bsb_max="10"
    app:bsb_min="0"
    app:bsb_progress="0"
    app:bsb_second_track_color="@color/colorPrimary"
    app:bsb_section_count="10"
    app:bsb_section_text_position="below_section_mark"
    app:bsb_show_progress_in_float="false"
    app:bsb_show_section_mark="true"
    app:bsb_show_section_text="true"
    app:bsb_show_thumb_text="false"
    app:bsb_track_color="@color/colorAccent"/>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="45dp"
        android:layout_height="50dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="10dp"
        android:src="@mipmap/ic_launcher"/>

    <ImageView
        android:layout_width="45dp"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:src="@mipmap/ic_launcher"/>

    <ImageView
        android:layout_width="45dp"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:src="@mipmap/ic_launcher"/>

    <ImageView
        android:layout_width="45dp"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:src="@mipmap/ic_launcher"/>

    <ImageView
        android:layout_width="45dp"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:src="@mipmap/ic_launcher"/>
    <ImageView
        android:layout_width="45dp"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:src="@mipmap/ic_launcher"/>
</LinearLayout>

注意: 请用我的图像和颜色资源更改您的图像资源