在 Seekbars 步骤上方添加不同字体大小的标签，垂直对齐到 seekbars thumb

Question

我想创建一个Seekbar，上面每个Seekbar步骤都会有文本标签，它应该如下图所示

这是我所做的预期结果，

<RelativeLayout
                android:id="@+id/layout_font_size"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/txtFont_size_hint"
                    style="@style/textStyle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/Aa" />

                <LinearLayout
                    android:id="@+id/layout_seekbar_interval_holder"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/txtFont_size_hint"
                    android:layout_marginLeft="16dp"
                    android:layout_marginRight="@dimen/margin_16dp"
                    android:orientation="horizontal"
                    android:weightSum="5">

                    <TextView
                        android:id="@+id/txtSize_14"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:focusable="false"
                        android:gravity="center"
                        android:text="@string/setting_font_text"
                        android:textSize="@dimen/font_size_14" />

                    <TextView
                        android:id="@+id/txtSize_18"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:focusable="false"
                        android:gravity="center"
                        android:text="@string/setting_font_text"
                        android:textSize="@dimen/font_size_18sp" />

                    <TextView
                        android:id="@+id/txtSize_24"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:focusable="false"
                        android:gravity="center"
                        android:text="@string/setting_font_text"
                        android:textSize="@dimen/font_size_24sp" />

                    <TextView
                        android:id="@+id/textSize_30"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:focusable="false"
                        android:gravity="center"
                        android:text="@string/setting_font_text"
                        android:textSize="@dimen/font_size_30sp" />

                    <TextView
                        android:id="@+id/txtSize_36"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:focusable="false"
                        android:gravity="center"
                        android:text="@string/setting_font_text"
                        android:textSize="@dimen/font_size_36sp" />
                </LinearLayout>

                <SeekBar
                    android:id="@+id/seekBarSetting_font_size"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"                       android:layout_below="@id/layout_seekbar_interval_holder"
                    android:layout_marginLeft="@dimen/margin_16dp"
                    android:layout_marginRight="@dimen/margin_16dp"
                    android:max="4"
                    android:theme="@style/seekBarYelloStyle" />
            </RelativeLayout>

这个输出是

布局看起来与预期的相似，但是在移动搜索栏拇指时，拇指未与 TextView 垂直对齐，因此这里的问题是搜索栏拇指未与指示的文本垂直对齐seekBar.

的步骤

我还尝试通过将搜索栏宽度除以步长来计算 TextView 的确切位置（这里我们有 5 个步骤，但第一个是第 0 个位置，所以我将总搜索栏宽度除以 4，然后相应地放置每个文本) 但没有得到预期的解决方案。

这里有点乱，希望尽快有一个简单的解决办法

P.S: 附上动态创建的视图输出截图供参考

Answer 1

布局：

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="android.sample.MainActivity">

<TextView
    android:id="@+id/txtFont_size_hint"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Sizes"/>
<LinearLayout
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:weightSum="5">

        <LinearLayout
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="5">

    <TextView
        android:id="@+id/txtSize1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/setting_font_text"
        android:textSize="15sp"/>

    <TextView
        android:id="@+id/txtSize_18"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="@string/setting_font_text"
        android:textSize="20sp"/>

    <TextView
        android:id="@+id/txtSize_24"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:focusable="false"
        android:gravity="center"
        android:text="@string/setting_font_text"
        android:textSize="25sp"/>

    <TextView
        android:id="@+id/textSize_30"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:focusable="false"
        android:gravity="center"
        android:text="@string/setting_font_text"
        android:textSize="30sp"/>

    <TextView
        android:id="@+id/txtSize_36"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:focusable="false"
        android:gravity="center"
        android:text="@string/setting_font_text"
        android:textSize="35sp"/>
</LinearLayout>

<SeekBar
    android:id="@+id/seekBarSetting_font_size"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="4"/>

现在我所做的是将 Seekbar 的宽度对齐到最后一个 TextView 的中心，在本例中是 txtSize_36 并将 ems 设置为 android:max="4" 因此有五个可能的值（您可以根据需要更改它）

Activity 的代码是：

public class MainActivity extends AppCompatActivity {
SeekBar seekBar;

private LinearLayout bar, ll;
TextView txtSize_14, txtSize_36;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    seekBar = (SeekBar) findViewById(R.id.seekBarSetting_font_size);

    txtSize_14 = (TextView) findViewById(R.id.txtSize1);
    txtSize_36 = (TextView) findViewById(R.id.txtSize_36);
    ll = (LinearLayout) findViewById(R.id.ll);

}
    float density;
    @Override
    protected void onResume() {
    super.onResume();

    ViewTreeObserver vto = ll.getViewTreeObserver();
//****old code (may not work on all orientations)****
/*vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                ll.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            } else {
                ll.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
            int width  = ll.getMeasuredWidth();
            int height = ll.getMeasuredHeight();

            ViewGroup.LayoutParams params = seekBar.getLayoutParams();

            density = getResources().getDisplayMetrics().density;
            int newwidth = (int) (txtSize_14.getLeft() / density);
            newwidth = newwidth+ (txtSize_36.getLeft() + txtSize_36.getRight()) / 2;
            params.width = newwidth;
            seekBar.setLayoutParams(params);

        }
    });*/

    //****new code (should work on all orientations)****
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                ll.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            } else {
                ll.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
            seekBar.setPadding(15, 0, 15, 0);
            seekBar.setX(((txtSize_14.getLeft() + txtSize_14.getRight()) / 2) - 15);

            ViewGroup.LayoutParams params = seekBar.getLayoutParams();

            int centerwidth = ((txtSize_36.getLeft() + txtSize_36.getRight()) / 2) - ((txtSize_14.getLeft() + txtSize_14.getRight()) / 2) + 15;
            params.width = centerwidth;
            seekBar.setLayoutParams(params);
        }
    });

}

}

这里是截图供参考（我已经把seekbar的所有位置都拼出来了）：

Answer 2

坦率地说，我花了一段时间才使用 XML 来解决这个问题。第一个和最后一个标签的位置与其他标签不同.... 如果您要将缩略图的大小从 15dp 更改 - 您还必须更改第一个和最后一个 TextView 的边距以及 Spaces 的大小（边距 + Space = 缩略图大小）

preview

               <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:paddingRight="0dp"
                    android:paddingLeft="0dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:paddingLeft="0dp">

                        <TextView
                            android:text="7 days"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:textColor="@color/colorPrimaryBackground"
                            android:gravity="left|center"
                            android:textSize="@dimen/textSize_smallest"
                            android:layout_weight="0.5"
                            android:layout_marginLeft="5dp"/>

                        <Space
                            android:layout_width="10dp"
                            android:layout_height="match_parent"/>

                        <TextView
                            android:text="1 month"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:textColor="@color/colorPrimaryBackground"
                            android:gravity="center"
                            android:textSize="@dimen/textSize_smallest"
                            android:layout_weight="1"
                            android:layout_marginRight="0dp"
                            android:id="@+id/textView" />

                        <TextView
                            android:text="3 months"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:textColor="@color/colorPrimaryBackground"
                            android:gravity="center"
                            android:textSize="@dimen/textSize_smallest"
                            android:layout_weight="1"
                            android:layout_marginRight="0dp"/>

                        <TextView
                            android:text="1 year"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:textColor="@color/colorPrimaryBackground"
                            android:gravity="center"
                            android:textSize="@dimen/textSize_smallest"
                            android:layout_weight="1"
                            android:layout_marginLeft="0dp"/>

                        <TextView
                            android:text="3 years"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:textColor="@color/colorPrimaryBackground"
                            android:gravity="center"
                            android:textSize="@dimen/textSize_smallest"
                            android:layout_weight="1"
                            android:layout_marginLeft="0dp"/>

                        <Space
                            android:layout_width="10dp"
                            android:layout_height="match_parent"/>

                        <TextView
                            android:text="5 years"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:textColor="@color/colorPrimaryBackground"
                            android:gravity="right|center"
                            android:textSize="@dimen/textSize_smallest"
                            android:layout_weight="0.5"
                            android:layout_marginRight="5dp"/>

                    </LinearLayout>


                </RelativeLayout>

在 Seekbars 步骤上方添加不同字体大小的标签，垂直对齐到 seekbars thumb

Add labels above Seekbars steps with different font size, vertically aligned to seekbars thumb

android

android-custom-view

android-view

android-seekbar