具有最高价值的自定义搜索栏 [英] Custom Seekbar with on top value
问题描述
我正在尝试为我的应用制作一些Seekbar作为距离值.我喜欢它看起来像这样(图像取自-
有人可以举一个简单的例子来说明如何制作这样的东西吗?
我知道我可以使用Github的现成的"搜索棒,但是我试图理解这个概念,以便我可以对其进行进一步的设计.
谢谢
使用Google提供的材料组件库版本 1.2.0 ,您可以使用
您可以使用以下属性自定义颜色:
< com.google.android.material.slider.Sliderapp:activeTrackColor =" @ color/primaryDarkColor"app:inactiveTrackColor =" @ color/primaryLightColor"app:thumbColor =" @ color/primaryDarkColor".../>
,或者您可以使用具有 materialThemeOverlay
属性的自定义样式来覆盖默认颜色:
< com.google.android.material.slider.Sliderstyle ="@ style/Custom_Slider_Style"
具有:
< style name =" Custom_Slider_Style"parent="Widget.MaterialComponents.Slider">< item name ="materialThemeOverlay"> @ style/slider_overlay</item></style><样式名="slider_overlay"><项目名称="colorPrimary"> @color/...& lt;/item>< item name ="colorOnPrimary"> @color/...& lt;/item></style>
或在布局中使用 android:theme
attr:
< com.google.android.material.slider.Sliderandroid:theme =" @ style/slider_overlay"../>
示例:
如果要自定义工具提示形状,可以使用 labelStyle
属性:
< com.google.android.material.slider.Sliderapp:labelStyle =" @ style/tooltip"
具有:
<样式名="tooltip"parent ="Widget.MaterialComponents.Tooltip".<项目名称="shapeAppearanceOverlay"> @ style/tooltipShOverylay</项目>< item name ="backgroundTint"> @color/....</style><样式名="tooltipShOverylay">< item name ="cornerSize"> 50%</item></style>
I'm trying to make some Seekbar for my app as a distance value. I had liked it to looks something like this (image was taken from - link):
Can someone please show a simple example of how to make something like this?
I know that I can use "already made" Seekbars from Github but I'm trying to understand the concept so I can further design it.
Thank you
With the Material Components Library version 1.2.0 provided by Google you can use the Slider
component.
Just add in your layout:
<LinearLayout
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
...>
<com.google.android.material.slider.Slider
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:labelBehavior="withinBounds"
android:value="7"
android:valueFrom="0"
android:valueTo="10"
.../>
</LinearLayout>
You can customize the colors using these attrs:
<com.google.android.material.slider.Slider
app:activeTrackColor="@color/primaryDarkColor"
app:inactiveTrackColor="@color/primaryLightColor"
app:thumbColor="@color/primaryDarkColor"
.../>
or you can override the default colors using a custom style with the materialThemeOverlay
attribute:
<com.google.android.material.slider.Slider
style="@style/Custom_Slider_Style"
with:
<style name="Custom_Slider_Style" parent="Widget.MaterialComponents.Slider">
<item name="materialThemeOverlay">@style/slider_overlay</item>
</style>
<style name="slider_overlay">
<item name="colorPrimary">@color/...</item>
<item name="colorOnPrimary">@color/...</item>
</style>
or use the android:theme
attr in the layout:
<com.google.android.material.slider.Slider
android:theme="@style/slider_overlay"
../>
Example:
If you want to customize the tooltip shape you can use the labelStyle
attribute:
<com.google.android.material.slider.Slider
app:labelStyle="@style/tooltip"
with:
<style name="tooltip" parent="Widget.MaterialComponents.Tooltip">
<item name="shapeAppearanceOverlay">@style/tooltipShOverylay</item>
<item name="backgroundTint">@color/....</item>
</style>
<style name="tooltipShOverylay">
<item name="cornerSize">50%</item>
</style>
这篇关于具有最高价值的自定义搜索栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!