android中自定义SeekBar

最新推荐文章于 2022-06-01 21:03:14 发布

转载最新推荐文章于 2022-06-01 21:03:14 发布 · 3.1k 阅读

文章标签：

#android #encoding #permissions #layout #express #apache

本文介绍如何在Android中自定义SeekBar的背景颜色、进度条颜色及滑块图片。通过修改XML文件，实现SeekBar不同状态下的外观定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际的工作中经常需要根据美工的设计来改变一些控件的颜色，式样，以及背景图片，下面和大家共同探讨一下在Android中如何自定义SeekBar的背景颜色，进度条的颜色，以及滑块的图片

首先在layout文件夹中的main.xml内容如下

   1. <?xml version="1.0" encoding="utf-8"?>
   2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   3.         android:orientation="vertical" android:layout_width="fill_parent"
   4.         android:layout_height="fill_parent">
   5.

   6.         <SeekBar android:id="@+id/seek" android:layout_width="300px"
   7.                 android:layout_height="wrap_content" android:max="100"
   8.                 android:progress="50" android:progressDrawable="@drawable/seekbar_img"
   9.                 android:thumb="@drawable/thumb" />
  10. </LinearLayout>

注意它的 android:progressDrawable="@drawable/seekbar_img" 以及 android:thumb="@drawable/thumb" 它们分别对应的是进度条的图片以及拖动滑块的图片，这里的图片也可以是我们自定义的drawable中的xml文件，可以理解成这两个属性应该如何显示的意思,而 @drawable/seekbar_img和@drawable/thumb它们分别对应着 drawable 文件夹中的文件seekbar_img.xml和thumb.xml，它们表示着如何去显示进度条与滑块

系统中自带的seek_thumb.xml，内容如下

   1. <?xml version="1.0" encoding="utf-8"?>
   2. <!-- Copyright (C) 2008 The Android Open Source Project
   3.

   4.      Licensed under the Apache License, Version 2.0 (the "License");
   5.      you may not use this file except in compliance with the License.
   6.      You may obtain a copy of the License at
   7.

   8.           http://www.apache.org/licenses/LICENSE-2.0
   9.

  10.      Unless required by applicable law or agreed to in writing, software
  11.      distributed under the License is distributed on an "AS IS" BASIS,
  12.      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13.      See the License for the specific language governing permissions and
  14.      limitations under the License.
  15. -->
  16.

  17. <!-- This is the thumb on the seek bar. -->
  18. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  19.

  20.     <item android:state_pressed="true"
  21.           android:state_window_focused="true"
  22.           android:drawable="@drawable/seek_thumb_pressed" />
  23.

  24.     <item android:state_focused="true"
  25.           android:state_window_focused="true"
  26.           android:drawable="@drawable/seek_thumb_selected" />
  27.

  28.     <item android:state_selected="true"
  29.           android:state_window_focused="true"
  30.           android:drawable="@drawable/seek_thumb_selected" />
  31.

  32.     <item android:drawable="@drawable/seek_thumb_normal" />
  33.

  34. </selector>

系统中自带的progress_horizontal.xml,内容如下：

<?xml version="1.0" encoding="utf-8"?>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
有了这两个文件的源代码，我们就可以依样画葫芦了
首先在自己的工程下drawable文件夹中建立seek_bar.xml文件与thumb.xml文件
我写的两个文件内容如下seekbar_img.xml

   1. <?xml version="1.0" encoding="utf-8"?>
   2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   3.         <!-- 背景图 -->
   4.         <item android:id="@+android:id/background" android:drawable="@drawable/bg" />
   5.         <!--全部能量图  -->
   6.         <item android:id="@+android:id/SecondaryProgress"
   7.                 android:drawable="@drawable/bg" />
   8.         <!-- 进和能量图 -->
   9.         <item android:id="@+android:id/progress" android:drawable="@drawable/bg2" />
  10. </layer-list>

thumb.xml

1. <?xml version="1.0" encoding="UTF-8"?>
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
3. 
4. <item android:state_pressed="true" android:drawable="@drawable/bg3" />
6. 
7. <item android:state_focused="false" android:state_pressed="false"
8. android:drawable="@drawable/bg4" />
9. </selector>