android - 在 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: 附上动态创建的view的输出截图，供引用

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的所有位置都拼出来了):