[英]Android: Drawable vertically alignment for SeekBar
This is waht I need to achieve with xml
drawable
for SeekBar
: 这是我需要用
SeekBar
xml
drawable
实现的:
I tried many different variations and this is best I could make. 我尝试了很多不同的变化,这是我能做的最好的。
This is seekbar_thumb_drawable.xml
: 这是
seekbar_thumb_drawable.xml
:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="@color/accent_color"/>
<size
android:height="20dp"
android:width="20dp" />
</shape>
This is seekbar_drawable.xml
: 这是
seekbar_drawable.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:height="5dp"
android:top="7.5dp">
<shape
android:shape="rectangle">
<solid android:color="@color/seekbar_background" />
<corners android:radius="2.5dp" />
</shape>
</item>
<item
android:id="@android:id/progress"
android:height="10dp"
android:top="5dp">
<clip>
<shape
android:shape="rectangle">
<solid android:color="@color/seekbar_progress" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
</layer-list>
Result on API 18: Problem is that lines are not verticaly centered. API 18的结果:问题是线不是以verticaly为中心。
Result on API 24: This display exactly how I want it to display. API 24上的结果:这显示了我希望它显示的方式。
Is there any possible solution to make this appear as on first picture on all devices from API 16
? 是否有任何可能的解决方案使其显示在
API 16
所有设备上的第一张图片上?
I do not want to use nine-patch, because I need to use color from resources. 我不想使用九补丁,因为我需要使用资源中的颜色。 I tried
padding
, gravity
, top
, bottom
, inter-shape
, line
, rectangle
but I could not find solution... 我尝试了
padding
, gravity
, top
, bottom
, inter-shape
, line
, rectangle
但我找不到解决方案......
This is because the android:height
and android:width
for <item>
are only available for API 23 and above. 这是因为
<item>
的android:height
和android:width
仅适用于API 23及更高版本。 If you use these attributes for API below 23, it will not give you an error, but simply ignore it. 如果您将这些属性用于23以下的API,它将不会给您一个错误,但只是忽略它。
In your case, android:height="5dp"
, and android:height="10dp"
are not being applied. 在你的情况下,没有应用
android:height="5dp"
和android:height="10dp"
。
If you look at the relevant docs or , it says that these were added in API level 23. 如果您查看相关文档,或者说它们是在API级别23中添加的。
You probably faced with already known issue, here is the solution for it. 您可能面临已知问题, 这是解决方案。 You should define
maxHeight
and minHeight
of the SeekBar
the same as the height of it. 您应该将
SeekBar
的maxHeight
和minHeight
定义为与其高度相同。 Or you can even set maxHeight
to some big value like 1000dp
, if you exepect your height to be wrap_content
, like mentioned below the suggested answer in the same thread. 或者你甚至可以将
maxHeight
设置为像1000dp
这样的大值,如果你将你的身高视为wrap_content
,就像在同一个帖子中提到的答案一样。
<SeekBar
android:thumb="@drawable/seekbar_thumb_drawable"
android:progressDrawable="@drawable/seekbar_drawable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="1000dp"
<!-- OR -->
android:maxHeight="16dp"
android:minHeight="16dp"/>
Make update in your drawable files. 在可绘制文件中进行更新。
In seekbar_thumb_drawable.xml : 在seekbar_thumb_drawable.xml中:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
<shape android:shape="oval">
<solid android:color="@color/accent_color" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
</item>
</layer-list>
seekbar_drawable.xml: seekbar_drawable.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:height="5dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="@color/seekbar_background" />
<corners android:radius="2.5dp" />
</shape>
</item>
<item
android:id="@android:id/progress"
android:height="10dp"
android:gravity="center">
<clip>
<shape android:shape="rectangle">
<solid android:color="@color/seekbar_progress" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
</layer-list>
I m using gravity in item, So that drawable item draw in center. 我在项目中使用重力,因此可绘制项目在中心绘制。
I am also facing same issue in Low API of thumb drawable come above the line So what I did for it. 我也面临同样的问题, 拇指可绘制的 低API在线上面所以我为它做了什么。
<SeekBar
android:id="@+id/seekbar_transparency"
android:layout_width="match_parent"
android:layout_height="40dp"
android:paddingTop="@dimen/seekbar_thumb_size_space"
android:paddingBottom="@dimen/seekbar_thumb_size_space"
android:progress="100"
android:theme="@style/SeekbarTheme"
android:thumb="@drawable/thumb_drawable" />
style.xml style.xml
<!--Seekbar background change-->
<style name="SeekbarTheme" parent="Theme.AppCompat.Light">
<!-- active seekbar progress track color -->
<item name="colorControlActivated">@color/colorSeekBar</item>
<!-- inactive seekbar progress track color -->
<item name="colorControlNormal">@color/colorGray</item>
</style>
thumb_drawable.xml thumb_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="2.5dp"
android:left="2.5dp"
android:right="2.5dp"
android:top="2.5dp">
<shape android:shape="rectangle">
<size
android:width="@dimen/seekbar_thumb_size"
android:height="@dimen/seekbar_thumb_size" />
<corners android:radius="20dp" />
<solid android:color="#201DE9B6" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle">
<size
android:width="@dimen/seekbar_thumb_size"
android:height="@dimen/seekbar_thumb_size" />
<corners android:radius="20dp" />
<solid android:color="#AA1DE9B6" />
</shape>
</item>
</layer-list>
dimes.xml dimes.xml
<!--Seeckbar thumb size-->
<dimen name="seekbar_thumb_size">10dp</dimen>
<dimen name="seekbar_thumb_size_space">5dp</dimen>
<SeekBar
android:id="@+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="3dp"
android:minHeight="3dp"
android:progressDrawable="@drawable/nnl_bg_seek_bar_progress"
android:splitTrack="false"
android:thumb="@drawable/nnl_sel_seek_bar_thumb"
tools:ignore="UnusedAttribute"
/>
The code above is my way. 上面的代码是我的方式。 You may need to pay attention to these attributes: maxHeight / minHeight / splitTrack.
您可能需要注意以下属性:maxHeight / minHeight / splitTrack。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.