自定义 seeekbar 端点

Question

我想更新 seekbar UI 以便在 seekbar 的两个端点都有一条垂直线。我通过在 android:progressDrawable 属性中设置自定义可绘制图像（端点处带有垂直线的水平线）来尝试此操作，但该搜索栏不可见（只有拇指可见）。我还尝试在搜索栏的左侧和右侧创建自定义视图，但垂直线在不同设备中不会保持在准确位置。此外，由于 seekbar 具有默认的左右填充，我需要提供边距以准确显示 seekbar 端点处的垂直线，这对于不同的设备可能不同。

达到此要求的理想方法是什么？

<SeekBar 
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="@dimen/dp1" 
android:paddingLeft="0px" 
android:paddingRight="0px" 
android:progressDrawable="@color/white"/>

<View
android:layout_width="@dimen/dp1"
android:layout_height="@dimen/dp10"
android:layout_alignLeft="@+id/seekBar"
android:layout_alignTop="@+id/seekBar"
android:layout_marginLeft="@dimen/dp16"
android:bawrckground="@color/white"
android:id="@+id/view" />
<View
android:layout_width="@dimen/dp1"
android:layout_height="@dimen/dp10"
android:layout_alignRight="@+id/seekBar"
android:layout_alignTop="@+id/seekBar"
android:layout_marginRight="@dimen/dp16"
android:background="@color/white”/>

Answer 1

你看起来像这样吗？我使用布局权重，端点为 0.05，搜索栏为 0.90 (%)...也给了拇指。您可以根据您的要求进行更改。

<LinearLayout
    android:id="@+id/ll_wizard_bar"
    style="@style/Widget.AppCompat.ButtonBar"
    android:layout_width="match_parent"
    android:layout_gravity="center_vertical"
    android:layout_height="30dp"
    android:layout_margin="18dp"
    android:orientation="horizontal">
    <View
        android:layout_width="0dp"
        android:layout_weight=".05"
        android:layout_height="30dp"
        android:background="#FF0000FF" />

    <SeekBar
        android:id="@+id/my_seekbar"
        android:layout_width="0dp"
        android:layout_weight=".90"
        android:layout_height="wrap_content"
        android:maxHeight="15dip"
        android:minHeight="15dip"
        android:thumb="@android:drawable/star_big_off"
        android:progressDrawable="@drawable/oval_shape"
         android:layout_below="@+id/iv_consumericon"
        android:indeterminate="false"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        />

    <View
        android:layout_width="0dp"
        android:layout_weight=".05"
        android:layout_height="30dp"
        android:background="#FF0000FF" />
</LinearLayout>

删除边

要将搜索栏附加到您的垂直线.. 以编程方式切断填充。 my_seekbar.setPadding(0, 0, 0, 0);：礼貌

Answer 2

Seekbar 有默认的左右填充

解决方案

您可以使用Programmatic方式。在这里，调用setPadding。

The view may add on the space required to display the scrollbars, depending on the style and visibility of the scrollbars. So the values returned from getPaddingLeft(), getPaddingTop(), getPaddingRight() and getPaddingBottom() may be different from the values set in this call.

演示 XML

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <View
        android:id="@+id/view1"
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="#54d66a"
         />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:progress="0"
         android:max="100"
        android:layout_toRightOf="@+id/view1"/>

    <View
        android:layout_width="10dp"
        android:layout_height="50dp"
        android:background="#000000"
        android:layout_toRightOf="@+id/seekBar"
        />
</RelativeLayout>

Java Class

oncreate()

SeekBar SeekBarOb=(SeekBar)findViewById(R.id.seekBar);
SeekBarOb.setPadding(20,0,0,0);

错误的方法

使用硬编码值 .Call DisplayMetrics .

A structure describing general information about a display, such as its size, density, and font scaling.

DisplayMetrics metrics = getResources().getDisplayMetrics();

        int DeviceTotalWidth = metrics.widthPixels;
        int DeviceTotalHeight = metrics.heightPixels;

现在响应式

 SeekBarOb.setPadding(DeviceTotalWidth*2/100 ,0,0,0); // add your value

终于

仅供参考

不要更改演示 XML ，将其添加到您的 java class

 DisplayMetrics metrics = getResources().getDisplayMetrics();

    int DeviceTotalWidth = metrics.widthPixels;
    int DeviceTotalHeight = metrics.heightPixels;

    SeekBar SeekBarOb=(SeekBar)findViewById(R.id.seekBar);
    SeekBarOb.setPadding((int) (DeviceTotalWidth*.85/100),0, (int) (DeviceTotalWidth*2.10/100),0);

Answer 3

我猜你已经回答了你的问题。正如您所说，区别仅在于左右填充，然后您可以通过简单地更改视图的边距来实现，如下所示。假设这是你的 XML:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <View
        android:id="@+id/view1"
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/seekBar"
        android:layout_alignParentLeft="true"
        android:layout_alignTop="@+id/seekBar"
        android:background="@android:color/black" />

    <View
        android:id="@+id/view2"
        android:layout_width="1dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/seekBar"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/seekBar"
        android:background="@android:color/black" />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:maxHeight="1dp"
        android:progressDrawable="@android:color/black" />
</RelativeLayout>

然后只需将以下行添加到您的 java 文件中：

SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar);
((ViewGroup.MarginLayoutParams) findViewById(R.id.view1).getLayoutParams()).leftMargin = seekBar.getPaddingLeft();
((ViewGroup.MarginLayoutParams) findViewById(R.id.view2).getLayoutParams()).rightMargin = seekBar.getPaddingRight();

这绝对不是最好的解决方案，但它非常简单。

这里有几张它的外观图片

自定义 seeekbar 端点

Customize seeekbar endpoints

android

seekbar

android-layout

android-seekbar

解决方案