自定义搜索栏(拇指大小,颜色和背景)

Question

我想在我的Android项目中使用此搜索栏:

这是我的搜索栏:

<SeekBar
        android:id="@+id/seekBar_luminosite"
        android:layout_width="@dimen/seekbar_width"
        android:layout_height="@dimen/seekbar_height"
        android:minHeight="15dp"
        android:minWidth="15dp"
        android:maxHeight="15dp"
        android:maxWidth="15dp"
        android:progress="@integer/luminosite_defaut"
        android:progressDrawable="@drawable/custom_seekbar"
        android:thumb="@drawable/custom_thumb" />

这是我的custom_thumb.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <gradient
        android:angle="270"
        android:endColor="@color/colorDekraOrange"
        android:startColor="@color/colorDekraOrange" />

    <size
        android:height="35dp"
        android:width="35dp" />

</shape>

这是我的custom_seekbar.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/seekbar"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@color/colorDekraYellow" />
    </item>

</layer-list>

这是我的seekbar.png(背景):

这就是结果:

酒吧没有阴影,没有圆形边框......

我真的不明白我该怎么做.

Answer 1

全部完成XML(没有.png图像).聪明的是border_shadow.xml.

关于vectors这些日子......

截图:

这是你的SeekBar(res/layout/???.xml):

搜索栏

<SeekBar
    android:id="@+id/seekBar_luminosite"
    android:layout_width="300dp"
    android:layout_height="wrap_content"        
    android:progress="@integer/luminosite_defaut"
    android:progressDrawable="@drawable/seekbar_style"
    android:thumb="@drawable/custom_thumb"/>

让它变得时尚(所以你可以在以后轻松定制):

样式

res/drawable/seekbar_style.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item 
        android:id="@android:id/background" 
        android:drawable="@drawable/border_shadow" >
    </item>

    <item 
        android:id="@android:id/progress" > 
        <clip 
            android:drawable="@drawable/seekbar_progress" />
    </item>
</layer-list>

拇指

RES /绘制/ custom_thumb.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorDekraOrange"/>
            <size
                android:width="35dp"
                android:height="35dp"/>
        </shape>
    </item>   
</layer-list>

进展

res/drawable/seekbar_progress.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list 
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item 
        android:id="@+id/progressshape" >
        <clip>
            <shape 
                android:shape="rectangle" >
                <size android:height="5dp"/>
                <corners 
                    android:radius="5dp" />
                <solid android:color="@color/colorDekraYellow"/>        
            </shape>
        </clip>
    </item>
</layer-list>

阴影

res/drawable/border_shadow.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">       
    <item>      
        <shape> 
            <corners 
                android:radius="5dp" />
            <gradient
                android:angle="270"
                android:startColor="#33000000"
                android:centerColor="#11000000"
                android:endColor="#11000000"
                android:centerY="0.2"
                android:type="linear"
            />          
        </shape> 
    </item>
</layer-list>

Answer 2

• 首先,android:splitTrack="false"用于拇指的透明度问题.

• 对于seekbar.png,你必须使用9补丁.圆形边框和图像阴影会很好.

Answer 3

栏中没有阴影,也没有圆形边框

您正在使用图像,因此最简单的解决方案就是将您的船划入流中,

您无法手动给出高度,是的,但您可以确保它有足够的空间来显示您的完整图像视图

• 最简单的方法是使用 android:layout_height="wrap_content"了SeekBar
• 要获得更清晰的圆形边框,您可以轻松使用与其他颜色一起使用的相同图像.

我对Photoshop不好,但我设法编辑了一个背景测试

_{seekbar_brown_to_show_progress.png}

<SeekBar
    android:splitTrack="false"   // for unwanted white space in thumb
    android:id="@+id/seekBar_luminosite"
    android:layout_width="250dp"   // use your own size
    android:layout_height="wrap_content"
    android:minHeight="10dp"
    android:minWidth="15dp"
    android:maxHeight="15dp"
    android:maxWidth="15dp"
    android:progress="50"
    android:progressDrawable="@drawable/custom_seekbar_progress"
    android:thumb="@drawable/custom_thumb" />

custom_seekbar_progress.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/seekbar" />
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_brown_to_show_progress" />
    </item>
</layer-list>

custom_thumb.xml与您的相同

最后android:splitTrack="false"将删除拇指中不需要的空白区域

我们来看看输出:

Answer 4

您可以使用SliderMaterial Components Library 中的官方。

使用app:trackHeight="xxdp"（默认值为4dp）更改轨迹栏的高度。

还可以使用这些属性来自定义颜色：

• app:activeTrackColor：活动轨道颜色
• app:inactiveTrackColor：非活动轨道颜色
• app:thumbColor: 填充拇指

就像是：

    <com.google.android.material.slider.Slider
        android:id="@+id/slider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:activeTrackColor="#ffd400"
        app:inactiveTrackColor="#e7e7e7"
        app:thumbColor="#ffb300"
        app:trackHeight="12dp"
        .../>

它需要库的1.2.0版。

Answer 5

Android自定义SeekBar - 自定义跟踪或进度,形状,大小,背景和拇指以及其他搜索栏自定义请参阅http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples

自定义轨道可绘制

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle"
            android:tint="#ffd600">
            <corners android:radius="8dp"/>
            <size android:height="30dp" />
            <solid android:color="#ffd600" />
        </shape>
    </item>
    <item android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <selector>
                <item android:state_enabled="false"
                    android:drawable="@android:color/transparent" />
                <item>
                    <shape android:shape="rectangle"
                        android:tint="#f50057">
                        <corners android:radius="8dp"/>
                        <size android:height="30dp" />
                        <solid android:color="#f50057" />
                    </shape>
                </item>
            </selector>
        </scale>
    </item>
</layer-list>

自定义拇指可绘制

?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:thickness="4dp"
    android:useLevel="false"
    android:tint="#ad1457">
    <solid
        android:color="#ad1457" />
    <size
        android:width="32dp"
        android:height="32dp" />
</shape>

产量

Answer 6

起初礼貌去了@Charuka.

做

你可以用android:progressDrawable="@drawable/seekbar"而不是android:background="@drawable/seekbar".

progressDrawable用于进度模式.

你应该试试

安卓了minHeight

定义视图的最小高度.不保证视图将能够达到此最小高度(例如,如果其父布局以较低的可用高度约束它).

机器人:minWidth

定义视图的最小宽度.不保证视图将能够实现此最小宽度(例如,如果其父布局以较小的可用宽度约束它)

    android:minHeight="25p"
    android:maxHeight="25dp" 

供参考:

使用android:minHeight和android:maxHeight不是很好的解决方案.需要纠正你的Custom Seekbar(从Class Level).

Answer 7

使用色调;)

<SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="15dp"
        android:minWidth="15dp"
        android:maxHeight="15dp"
        android:maxWidth="15dp"
        android:progress="20"
        android:thumbTint="@color/colorPrimaryDark"
        android:progressTint="@color/colorPrimary"/>

在 thumbTint 和 progressTint 中使用您需要的颜色。它要快得多！:)

您可以结合使用 Edit ofc android:progressDrawable="@drawable/seekbar"

Answer 8

android:minHeight android:maxHeight对此很重要。

<SeekBar
    android:id="@+id/pb"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="2dp"
    android:minHeight="2dp"
    android:progressDrawable="@drawable/seekbar_bg"
    android:thumb="@drawable/seekbar_thumb"
    android:max="100"
    android:progress="50"/>

搜索栏_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="3dp" />
            <solid android:color="#ECF0F1" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="3dp" />
                <solid android:color="#C6CACE" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="3dp" />
                <solid android:color="#16BC5C" />
            </shape>
        </clip>
    </item>
</layer-list>

seekbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#16BC5C" />
    <stroke
        android:width="1dp"
        android:color="#16BC5C" />
    <size
        android:height="20dp"
        android:width="20dp" />
</shape>