Android - 样式搜索栏
Posted
技术标签:
【中文标题】Android - 样式搜索栏【英文标题】：Android - styling seek bar 【发布时间】：2013-04-16 07:20:04 【问题描述】：我想设计一个搜索栏，如下图所示。
通过使用默认搜索栏，我会得到这样的结果：
所以我只需要改变颜色。我不需要额外的样式。是否有任何直接的方法可以做到这一点，或者我应该构建我的自定义可绘制对象。
我尝试构建自定义一个，但我无法获得如上所示的确切一个。 使用自定义drawable后，我得到如下图：
如果我需要构建自定义的，那么请建议如何减少进度线的宽度以及形状。
我的自定义实现：
background_fill.xml：
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FF555555"
android:endColor="#FF555555"
android:startColor="#FF555555" />
<corners android:radius="1dp" />
<stroke
android:
android:color="#50999999" />
<stroke
android:
android:color="#70555555" />
</shape>
progress_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FFB80000"
android:endColor="#FFFF4400"
android:startColor="#FF470000" />
<corners android:radius="1dp" />
<stroke
android:
android:color="#50999999" />
<stroke
android:
android:color="#70555555" />
</shape>
progress.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/background_fill"/>
<item android:id="@android:id/progress">
<clip android:drawable="@drawable/progress_fill" />
</item>
</layer-list>
thumb.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:angle="270"
android:endColor="#E5492A"
android:startColor="#E5492A" />
<size
android:
android: />
</shape>
搜索栏：
<SeekBar
android:id="@+id/seekBarDistance"
android:layout_
android:layout_
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="88dp"
android:progressDrawable="@drawable/progress"
android:thumb="@drawable/thumb" >
</SeekBar>
【问题讨论】：
感谢您展示一个有效的搜索栏样式更改示例 XD。 （网上不多）。 【参考方案1】：我将从 Android 源代码中提取可绘制对象和 xml，并将其颜色更改为红色。 这是我如何为 mdpi drawables 完成此操作的示例：
自定义red_scrubber_control.xml（添加到res/drawable）：
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/red_scrubber_control_disabled_holo" android:state_enabled="false"/>
<item android:drawable="@drawable/red_scrubber_control_pressed_holo" android:state_pressed="true"/>
<item android:drawable="@drawable/red_scrubber_control_focused_holo" android:state_selected="true"/>
<item android:drawable="@drawable/red_scrubber_control_normal_holo"/>
</selector>
自定义：red_scrubber_progress.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:drawable="@drawable/red_scrubber_track_holo_light"/>
<item android:id="@android:id/secondaryProgress">
<scale
android:drawable="@drawable/red_scrubber_secondary_holo"
android:scaleWidth="100%" />
</item>
<item android:id="@android:id/progress">
<scale
android:drawable="@drawable/red_scrubber_primary_holo"
android:scaleWidth="100%" />
</item>
</layer-list>
然后从Android源代码中复制需要的drawables，我取了from this link
最好为每个 hdpi、mdpi、xhdpi 复制这些可绘制对象。例如我只使用 mdpi：
然后使用 Photoshop 将颜色从蓝色变为红色：
red_scrubber_control_disabled_holo.png：
red_scrubber_control_focused_holo.png：
red_scrubber_control_normal_holo.png：
red_scrubber_control_pressed_holo.png：
red_scrubber_primary_holo.9.png：
red_scrubber_secondary_holo.9.png：
red_scrubber_track_holo_light.9.png：
将 SeekBar 添加到布局中：
<SeekBar
android:id="@+id/seekBar1"
android:layout_
android:layout_
android:progressDrawable="@drawable/red_scrubber_progress"
android:thumb="@drawable/red_scrubber_control" />
结果：
【讨论】：
安德鲁，感谢您的出色回答。我有这个问题。当为拇指使用red_scrubber_control drawable 时，我遇到了崩溃。如果选择器中的所有可绘制对象都相同，则可以正常工作，但如果我更改其中一个，我会得到 Resources$NotFoundException: File .../red_scrubber_control.xml from drawaable resource ID... 有什么想法吗？
哎呀。原来它与***.com/questions/6669296/… 有关。我试图添加的新图像意外地是 37MB 而不是 2KB...
有没有办法使用@dimen根据屏幕设置拇指大小？
@SiKni8 您可以根据 values 文件夹的 normal、large、xlarge、sw 或 w 参数为不同的屏幕尺寸定义不同的尺寸。然后只需在您的布局、样式或主题中使用此维度。检查这个link
感谢您提供指向 Android Holo 颜色生成器的链接。这很有帮助。【参考方案2】：
Android seekbar 自定义材质样式，用于其他seekbar 自定义http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples
<style name="MySeekBar" parent="Widget.AppCompat.SeekBar">
<item name="android:progressBackgroundTint">#f4511e</item>
<item name="android:progressTint">#388e3c</item>
<item name="android:thumbTint">#c51162</item>
</style>
更新：colorControlActivated 现在是 thumbTint。
【讨论】：
适用于 Android 的绝佳解决方案 > 21 您确定colorControlActivated 是拇指的正确参数吗？应该是thumbTint。
API 21以下的解决方案是什么？
那张图帮了大忙！！效果很好
这样设置：android:theme="@style/MySeekBar"【参考方案3】：
我的回答灵感来自 Andras Balázs Lajtha 的回答 它允许在没有 xml 文件的情况下工作
seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
【讨论】：
进度对话框颜色改变了，但拇指颜色没有改变..为什么？ 如果您不需要在代码中执行此操作并且不想创建图层列表和可绘制对象等，您也可以在搜索栏的 xml 中执行此操作android:progressTint="@color/my_color" android:thumbTint="@color/another_color"
这是自定义 SEEKBAR 的方法 - 只需观看此视频。 youtu.be/O48ahJPTvJc【参考方案4】：
如果您想要完全相同但为红色的条形，您可以通过编程方式添加 PorterDuff 滤色器。您可以通过ProgressBar 基类的方法获取每个要着色的drawable。然后为它设置一个color filter。
mySeekBar.getProgressDrawable().setColorFilter(new PorterDuffColorFilter(srcColor, PorterDuff.Mode.MULTIPLY));
如果无法通过 Porter Duff 滤镜进行所需的颜色调整，您可以specify your own color filter。
【讨论】：
不确定从哪个SDK，proly 21，但是如果你想相同的图标只是不同的颜色，只需在colors.xml中添加“colorAccent”颜色，它就会使用它【参考方案5】：Google 在 SDK 21 中使这变得更容易。现在我们有用于指定拇指色调颜色的属性：
android:thumbTint
android:thumbTintMode
android:progressTint
http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTint http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTintMode
【讨论】：
从 API 21 开始，色调列表适用于 Android 上的每个 UI 元素，这就是 colorAccent 的应用方式。【参考方案6】：只需用你的颜色替换颜色属性
背景.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android: android:color="#D9D9D9"/>
<corners android:radius="1dp" />
</shape>
进度.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android: android:color="#2EA5DE"/>
<corners android:radius="1dp" />
</shape>
style.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:drawable="@drawable/seekbar_background"/>
<item android:id="@android:id/progress">
<clip android:drawable="@drawable/seekbar_progress" />
</item>
</layer-list>
thumb.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android: android:/>
<stroke android: android:color="#882EA5DE"/>
<solid android:color="#2EA5DE" />
<corners android:radius="1dp" />
</shape>
【讨论】：
如何使用搜索栏中的文件？ @RahulRastogi 你是如何使用这些文件的？有点愚蠢，这个答案是如此受欢迎，对它的工作原理的解释为 0... @AssortedTrailmix 我很久以前就做过了。尝试设置如下属性： android:thumb="@drawable/thumb" 并在 android:progressDrawable 属性中设置上述图层列表可绘制文件。你可以试试：mindfiremobile.wordpress.com/2014/05/20/…【参考方案7】：所有这些答案都已弃用。
在 2019 年，通过将您的 ProgressBar 更改为此，可以更轻松地将搜索栏设置为您喜欢的颜色
<SeekBar
android:id="@+id/seekBar"
android:layout_
android:layout_
android:progressTint="#36970f"
android:thumbTint="#36970f"
/>
以编程方式设置搜索栏颜色的样式，尝试以下代码
seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
【讨论】：
为什么不推荐使用？ 因为库已经改变 您可以看到@Ahamadullah Saikat (***.com/a/50074961/2914140) 或lvguowei.me/post/customize-android-seekbar-color 的答案。他们不使用库并为旧 API 设置 SeekBar 颜色。【参考方案8】：对于 = 21）的 API，您可以使用 @Ahamadullah Saikat 或 https://www.lvguowei.me/post/customize-android-seekbar-color/ 的答案。
<SeekBar
android:id="@+id/seekBar"
android:layout_
android:layout_
android:maxHeight="3dp"
android:minHeight="3dp"
android:progress="50"
android:progressDrawable="@drawable/seek_bar_ruler"
android:thumb="@drawable/seek_bar_slider"
/>
drawable/seek_bar_ruler.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 android:shape="rectangle">
<solid
android:color="#94A3B3" />
<corners android:radius="2dp" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape android:shape="rectangle">
<solid
android:color="#18244D" />
<corners android:radius="2dp" />
</shape>
</clip>
</item>
</layer-list>
drawable/seek_bar_slider.xml：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<solid android:color="#FFFFFF" />
<stroke
android:
android:color="#18244D"
/>
<size
android:
android:
/>
</shape>
【讨论】：
【参考方案9】：设置好了
android:maxHeight="3dp"
android:minHeight="3dp"
就是这样
【讨论】：
【参考方案10】：输出：
更改进度颜色：
int normalColor = ContextCompat.getColor(context, R.color.normal_color);
int selectedColor = ContextCompat.getColor(context, R.color.selected_color);
Drawable normalDrawable = new ColorDrawable(normalColor);
Drawable selectedDrawable = new ColorDrawable(selectedColor);
ClipDrawable clipDrawable = new ClipDrawable(selectedDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);
Drawable[] layers = normalDrawable, clipDrawable, clipDrawable;
LayerDrawable seekbarDrawable = new LayerDrawable(layers);
seekBar.setProgressDrawable(seekbarDrawable);
更改拇指颜色：
int thumbColor = ContextCompat.getColor(context, R.color.thumb_color);
Drawable unwrappedDrawable = AppCompatResources.getDrawable(context, R.drawable.ic_seekbar_thumb);
assert unwrappedDrawable != null;
Drawable wrappedDrawable = DrawableCompat.wrap(unwrappedDrawable);
DrawableCompat.setTint(wrappedDrawable, thumbColor);
seekBar.setThumb(wrappedDrawable);
【讨论】：
不知道 AppCompat Seekbar 存在【参考方案11】：如上所述 (@andrew)，使用此站点创建自定义 SeekBar 非常简单 - http://android-holo-colors.com/
只需在此处启用 SeekBar，选择颜色，然后接收所有资源并复制到项目。 然后在xml中应用，例如：
android:thumb="@drawable/apptheme_scrubber_control_selector_holo_light"
android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_light"
【讨论】：
【参考方案12】：<SeekBar
android:id="@+id/seekBar1"
android:layout_
android:layout_
android:layout_gravity="center"
android:progressTint="@color/red"
android:thumbTint="@color/red" />
works 与所选答案相同。无需制作任何可绘制文件或其他。（仅限 IN 5.0） 问候
【讨论】：
【参考方案13】：LayerDrawable progressDrawable = (LayerDrawable) mSeekBar.getProgressDrawable();
// progress bar line *progress* color
Drawable processDrawable = progressDrawable.findDrawableByLayerId(android.R.id.progress);
// progress bar line *background* color
Drawable backgroundDrawable = progressDrawable.findDrawableByLayerId(android.R.id.background);
// progress bar line *secondaryProgress* color
Drawable secondaryProgressDrawable = progressDrawable.findDrawableByLayerId(android.R.id.secondaryProgress);
processDrawable.setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
// progress bar line all color
mSeekBar.getProgressDrawable().setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_IN);
// progress circle color
mSeekBar.getThumb().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);
【讨论】：
【参考方案14】：默认情况下，android会将你的滑块的进度颜色匹配到
`<item name="colorAccent">`
styles.xml 中的值。然后，要设置自定义滑块缩略图，只需在 SeekBar xml 布局的块中使用此代码：
android:thumb="@drawable/slider"
【讨论】：
【参考方案15】：如果您使用的是 android Sdk 提供的默认 SeekBar，那么它们是一种更改其颜色的简单方法。只需转到 /res/values/colors.xml 中的 color.xml 并更改 colorAccent。
<resources>
<color name="colorPrimary">#212121</color>
<color name="colorPrimaryDark">#1e1d1d</color>
<!-- change below line -->
<color name="colorAccent">#FF4081</color>
</resources>
【讨论】：
【参考方案16】：改变搜索栏颜色的简单方法...
<ProgressBar
android:id="@+id/progress"
android:layout_
android:layout_
android:layout_gravity="center"
android:theme="@style/Progress_color"/>
风格：Progress_color
<style name="Progress_color">
<item name="colorAccent">@color/white</item> <!-- Whatever color you want-->
</style>
java类改ProgressDrawable()
seek_bar.getProgressDrawable().setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.MULTIPLY);
【讨论】：
【参考方案17】：我改了background_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size android: />
<gradient
android:angle="0"
android:centerColor="#616161"
android:endColor="#616161"
android:startColor="#616161" />
<corners android:radius="0dp" />
<stroke
android:
android:color="#616161" />
<stroke
android:
android:color="#616161" />
</shape>
还有progress_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size android: />
<gradient
android:angle="0"
android:centerColor="#fafafa"
android:endColor="#fafafa"
android:startColor="#fafafa" />
<corners android:radius="1dp" />
<stroke
android:
android:color="#cccccc" />
<stroke
android:
android:color="#cccccc" />
</shape>
制作背景和进度1dp 高度。
【讨论】：
【参考方案18】：如果你看 Android 资源，搜索栏实际上使用图像。
您必须制作一个在顶部和底部透明的可绘制对象，例如 10 像素，并且中心 5 像素的线可见。
参考附图。您需要将其转换为 NinePatch。
【讨论】：
你能推荐一些相同的帖子吗？ 我发现的一个很好的链接 - mokasocial.com/2011/02/… Sunday G Akinsete 的解决方案有效，无需使用 NinePatch【参考方案19】：借助材料组件库版本 1.2.0，您可以使用新的 Slider 组件。
<com.google.android.material.slider.Slider
android:valueFrom="0"
android:valueTo="300"
android:value="200"
android:theme="@style/slider_red"
/>
您可以使用以下内容覆盖默认颜色：
<style name="slider_red">
<item name="colorPrimary">#......</item>
</style>
否则您可以在布局中使用这些属性来定义颜色或颜色选择器：
<com.google.android.material.slider.Slider
app:activeTrackColor="@color/...."
app:inactiveTrackColor="@color/...."
app:thumbColor="@color/...."
/>
或者您可以使用自定义样式：
<style name="customSlider" parent="Widget.MaterialComponents.Slider">
<item name="activeTrackColor">@color/....</item>
<item name="inactiveTrackColor">@color/....</item>
<item name="thumbColor">@color/....</item>
</style>
【讨论】：
官方文档声明其仍在计划中。还有其他选择吗？ @tejaspatel 在答案中有官方组件的link。第一个版本现已在 1.2.0-alpha01 中发布。【参考方案20】：对于那些使用数据绑定的人：
将以下静态方法添加到任何类中
@BindingAdapter("app:thumbTintCompat")
public static void setThumbTint(SeekBar seekBar, @ColorInt int color)
seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN);
将app:thumbTintCompat 属性添加到您的 SeekBar
<SeekBar
android:id="@+id/seek_bar"
style="@style/Widget.AppCompat.SeekBar"
android:layout_
android:layout_
app:thumbTintCompat="@@android:color/white"
/>
就是这样。现在您可以将app:thumbTintCompat 与任何SeekBar 一起使用。可以用相同的方式配置进度色调。
注意：此方法也适用于棒棒糖之前的设备。
【讨论】：
【参考方案21】：@arnav-rao 对答案的小修正：
要确保拇指正确着色，请使用：
<style name="MySeekBar" parent="Widget.AppCompat.SeekBar">
<item name="android:progressBackgroundTint">@color/colorBgTint</item>
<item name="android:progressTint">@color/colorProgressTint</item>
<item name="android:thumbTint">@color/colorThumbTint</item>
</style>
这里 android:thumbTint 实际上为“拇指”着色
【讨论】：
【参考方案22】：看这个教程很好
https://www.lvguowei.me/post/customize-android-seekbar-color/
简单：
<SeekBar
android:id="@+id/seekBar"
android:layout_
android:layout_
android:max="100"
android:maxHeight="3dp"
android:minHeight="3dp"
android:progressDrawable="@drawable/seekbar_style"
android:thumbTint="@color/positive_color"/>
然后是样式文件：
<?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 android:shape="rectangle" >
<solid
android:color="@color/positive_color" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape android:shape="rectangle" >
<solid
android:color="@color/positive_color" />
</shape>
</clip>
</item>
</layer-list>
【讨论】：
【参考方案23】：我想为搜索栏创建一个样式，然后将该样式添加到主题中，这样我就可以将其应用于整个主题，同时仍允许子样式覆盖它。这是我所做的：
<!-- Blue App Theme -->
<style name="AppTheme.Blue" parent="BaseTheme.Blue">
<item name="android:seekBarStyle">@style/SeekbarStyle.Blue</item>
<item name="seekBarStyle">@style/SeekbarStyle.Blue</item> <!--This is essential for some devices, e.g. Samsung-->
</style>
<!-- Slider Styles -->
<style name="SeekbarStyle.Blue" parent="Widget.AppCompat.SeekBar">
<item name="android:progressBackgroundTint">@color/material_blue_a700_pct_30</item>
<item name="android:thumbTint">@color/material_blue_a700</item>
<item name="android:thumbTintMode">src_in</item>
<item name="android:progressTint">@color/material_blue_a700</item>
</style>
<style name="SeekbarStyle.Green" parent="Widget.AppCompat.SeekBar">
<item name="android:progressBackgroundTint">@color/material_green_a700_pct_30</item>
<item name="android:thumbTint">@color/material_green_a700</item>
<item name="android:thumbTintMode">src_in</item>
<item name="android:progressTint">@color/material_green_a700</item>
</style>
上面将所有 21 岁以上设备的 Theme seekbar 样式设置为蓝色，包括三星（除了 android:seekBarStyle 之外还需要应用 seekBarStyle；不知道为什么，但我亲眼看到了这个问题）。如果您希望所有搜索栏都保持主题样式并且仅将绿色搜索栏样式应用于少数小部件，则将以下内容添加到您想要的小部件中：
<SeekBar
android:layout_
android:layout_
android:theme="@style/AppTheme.Green"/>
【讨论】：
【参考方案24】：现在变得非常容易，使用材质滑块并使用它来自定义颜色：
app:thumbColor="@color/colorPrimary"
app:trackColorInactive="@color/grey"
app:trackColorActive="@color/colorPrimary"
【讨论】：
【参考方案25】：你也可以这样：
<SeekBar
android:id="@+id/redSeekBar"
android:layout_
android:layout_
android:progressDrawable="@color/red"
android:maxHeight="3dip"/>
希望对您有所帮助！
【讨论】：
我不认为你可以在寻找可绘制对象的地方使用颜色以上是关于Android - 样式搜索栏的主要内容，如果未能解决你的问题，请参考以下文章