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垂直对齐，因此问题在于搜索栏拇指不是垂直对齐的，文本指示步骤of seekBar。

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

我在这里有点困惑，并希望尽快找到一个简单的解决方案。

P.S：动态创建的视图输出的ScreenShot也附加供参考

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"，因此有五个可能的值（您可以根据需要更改此值）

活动代码是：

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);
        }
    });

}

}

这是截图供参考（我已经为搜索栏的所有位置添加了棒球）：

Answer 2

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

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

2 个答案: