自定义 seeekbar 端点

Question

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

实现此要求的理想方法是什么？

<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

我猜你已经回答了你的问题。正如您所说，差异仅在于左右填充，那么您可以通过简单地更改视图的边距来实现这一点，如下所示。 假设这是您的 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();

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

这里有几张图片说明它的样子

Answer 2

你看起来像这样吗？我使用了布局权重，端点为 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);：礼貌 https://stackoverflow.com/a/33475281/705428

Answer 3

• Seekbar 具有默认的左右填充

解决方案

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

视图可能会增加显示滚动条所需的空间， 取决于滚动条的样式和可见性。所以价值观 从 getPaddingLeft()、getPaddingTop()、getPaddingRight() 和 getPaddingBottom() 可能与此调用中设置的值不同。

演示 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 类

oncreate()

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

不好的方法

使用硬编码值。调用 DisplayMetrics。

描述有关显示的一般信息的结构，例如 它的大小、密度和字体缩放。

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

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