问题
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>
Output of this is
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.
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.
P.S: ScreenShot of output of view created dynamically is also attached for reference
回答1:
layout for this :
<?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"/>
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)
Code for Activity is :
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):
回答2:
Frankly speaking it took me a while to sort this out using XML only. The first and last label are differently positioned than the others.... In case you will change the size of the thumb from 15dp - you must also change the margin of first and last TextView and size of Spaces (margin + Space = thumb size)
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>
来源：https://stackoverflow.com/questions/41757786/add-labels-above-seekbars-steps-with-different-font-size-vertically-aligned-to