Seekbar -添加与点相同的图像

Question

我想实现类似的UI，如图中所示。我有相同的分布点，但如何添加图像下面的平等分布。在这里输入图像描述

github.com/woxingxiao/BubbleSeekBar

结果

<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

，检查一下

结果

<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>

​

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