在Seekbars步骤上方添加标签，这些步骤具有不同的字体大小，垂直于seekbars拇指对齐 [英] Add labels above Seekbars steps with different font size, vertically aligned to seekbars thumb

问题描述

我想创建一个Seekbar，在每个Seekbar步骤上方都将有文本标签，其外观应如下图

I would like to create a Seekbar, above which there will be text label on each Seekbar step, what it should look like is shown in below image

这是我已经完成的预期结果，

this is the expected result, for which what i have done,

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

此输出为

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

the Layout looks similar to what is expected but, while moving the seekbar thumb, the thumb is not vertically aligned with the TextView so the problem here is the seekbar thumb is not vertically aligend with the text indicating the steps of seekBar.

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

I had also tried calculating the exact position of TextView by dividing the seekbars width by steps (Here we have 5 steps but first one is on 0th position so i divided the total seekbar Width by 4 and then placed each text accordingly) but didn't got the expected solution.

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

I am bit confused here, and want a simple solution as soon as possible.

PS:动态创建的视图输出的ScreenShot也附在参考文件中

推荐答案

布局:

    <?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"，因此有五个可能的值(您可以根据需要将其更改为任意值)

Now what i have done is aligned the width of Seekbar till the center of the last TextView which in this case is txtSize_36 and have set the ems as android:max="4" so there are five possible values(you can change this to as much as you want)

活动代码为:

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

}

}

以下是屏幕截图，仅供参考(我已经汇总了搜索栏的所有位置):

Here is screenshot for reference (I have clubbed for all positions of seekbar):

这篇关于在Seekbars步骤上方添加标签，这些步骤具有不同的字体大小，垂直于seekbars拇指对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！