android seekbar 样式

最新推荐文章于 2024-10-25 14:21:40 发布
最新推荐文章于 2024-10-25 14:21:40 发布
阅读量1.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： android layout encoding xml java class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hellolinshoujie/article/details/6732611
本文详细介绍了如何自定义SeekBar的样式，包括进度条背景、颜色渐变、圆角设置及使用图片替代的方法。此外还提供了去除SeekBar小球的具体实现步骤。

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

  1. 本文即收藏，转载比较好的：
  2. 在转载上作下说明：     <item android:id="@android:id/progress"> 
    即是小球走过后的颜色，可以理解为左边的颜色
  3. <item android:id="@android:id/background">
  4.   即是小球即将走的颜色，可以理解为右边的颜色
  5. <corners android:radius="0dip"/>  即是进度条的圆角，0为长方形（90度，直角）





  3. <SeekBar   
  4.          android:id="@+id/player_seekbar"  
  5.          android:layout_width="245px"  
  6.          android:layout_height="25px"  
  7.          android:progressDrawable="@drawable/seekbar_style"  
  8.          android:thumb="@drawable/thumb"  
  9.          android:paddingLeft="16px"  
  10.          android:paddingRight="15px"  
  11.          android:paddingTop="5px"  
  12.          android:paddingBottom="5px"  
  13.          android:progress="0"  
  14.          android:max="0"  
  15.          android:secondaryProgress="0"  
  16.          />    
<SeekBar 
       android:id="@+id/player_seekbar"
       android:layout_width="245px"
       android:layout_height="25px"
       android:progressDrawable="@drawable/seekbar_style"
       android:thumb="@drawable/thumb"
       android:paddingLeft="16px"
       android:paddingRight="15px"
       android:paddingTop="5px"
          android:paddingBottom="5px"
          android:progress="0"
          android:max="0"
          android:secondaryProgress="0"
          />

android:progressDrawable="@drawable/seekbar_style"背景条

seekbar_style配置如下:

Xml代码
  1. <?xmlversion="1.0"encoding="UTF-8"?>  
  2.   
  3. <layer-listxmlns:android="http://schemas.android.com/apk/res/android">  
  4.   
  5.      <itemandroid:id="@android:id/background">  
  6.          <shape>  
  7.              <cornersandroid:radius="5dip"/>  
  8.              <gradient  
  9.                      android:startColor="#ff9d9e9d"  
  10.                      android:centerColor="#ff5a5d5a"  
  11.                      android:centerY="0.75"  
  12.                      android:endColor="#ff747674"  
  13.                      android:angle="270"  
  14.              />  
  15.          </shape>  
  16.      </item>  
  17.   
  18.      <itemandroid:id="@android:id/secondaryProgress">  
  19.          <clip>  
  20.              <shape>  
  21.                  <cornersandroid:radius="5dip"/>  
  22.                  <gradient  
  23.                          android:startColor="#80ffd300"  
  24.                          android:centerColor="#80ffb600"  
  25.                          android:centerY="0.75"  
  26.                          android:endColor="#a0ffcb00"  
  27.                          android:angle="270"  
  28.                  />  
  29.              </shape>  
  30.          </clip>  
  31.      </item>  
  32.   
  33.      <itemandroid:id="@android:id/progress">  
  34.          <clip>  
  35.              <shape>  
  36.                  <cornersandroid:radius="5dip"/>  
  37.                  <gradient  
  38.                          android:startColor="#ff0099CC"  
  39.                          android:centerColor="#ff3399CC"  
  40.                          android:centerY="0.75"  
  41.                          android:endColor="#ff6699CC"  
  42.                          android:angle="270"  
  43.                  />  
  44.              </shape>  
  45.          </clip>  
  46.      </item>  
  47.   
  48. </layer-list>  
<?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="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="#ff0099CC"
                         android:centerColor="#ff3399CC"
                         android:centerY="0.75"
                         android:endColor="#ff6699CC"
                         android:angle="270"
                 />
             </shape>
         </clip>
     </item>

 </layer-list>

或者：用图片如下：

 

Xml代码
  1. <?xmlversion="1.0"encoding="utf-8"?>  
  2. <layer-listxmlns:android="http://schemas.android.com/apk/res/android">  
  3.        
  4.     <itemandroid:id="@android:id/background"   
  5.           android:drawable="@drawable/progress_bg"/>  
  6.         
  7.     <itemandroid:id="@android:id/secondaryProgress"  
  8.           android:drawable="@drawable/second_progress">  
  9.     </item>      
  10.        
  11.     <itemandroid:id="@android:id/progress"  
  12.           android:drawable="@drawable/first_progress">  
  13.            
  14.     </item>   
  15. </layer-list>  
<?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/progress_bg" />
     
 <item android:id="@android:id/secondaryProgress"
       android:drawable="@drawable/second_progress">
 </item> 
 
 <item android:id="@android:id/progress"
       android:drawable="@drawable/first_progress">
     
 </item> 
</layer-list>

方形

Xml代码
  1. <layer-listxmlns:android="http://schemas.android.com/apk/res/android">   
  2.   
  3.   
  4.     <itemandroid:id="@android:id/background"   
  5.     android:drawable="@drawable/progress_bg"/>   
  6.   
  7.   
  8.     <itemandroid:id="@android:id/secondaryProgress">   
  9.      <clipandroid:drawable="@drawable/second_progress"/>   
  10.     </item>   
  11.   
  12.   
  13.     <itemandroid:id="@android:id/progress">   
  14.          <clipandroid:drawable="@drawable/first_progress"/>   
  15.     </item>   
  16.   
  17.   
  18. </layer-list>  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 

    <item android:id="@android:id/background" 
    android:drawable="@drawable/progress_bg" /> 

    <item android:id="@android:id/secondaryProgress"> 
     <clip android:drawable="@drawable/second_progress" /> 
    </item> 

    <item android:id="@android:id/progress"> 
         <clip android:drawable="@drawable/first_progress" /> 
    </item> 

</layer-list>

 

 

 

android:thumb="@drawable/thumb"就是那个会动的球

配置如下：

 

Xml代码
  1. <?xmlversion="1.0"encoding="UTF-8"?>  
  2. <selectorxmlns:android="http://schemas.android.com/apk/res/android">        
  3.        
  4.     <!-- 按下状态-->  
  5.     <item   
  6.         android:state_focused="true"   
  7.         android:state_pressed="true"   
  8.         android:drawable="@drawable/thumb_pressed"/>        
  9.     <!-- 普通无焦点状态 -->  
  10.     <item   
  11.         android:state_focused="false"   
  12.         android:state_pressed="false"  
  13.         android:drawable="@drawable/thumb_normal"/>              
  14.     <!-- 有焦点状态-->  
  15.     <item   
  16.         android:state_focused="true"   
  17.         android:state_pressed="false"              
  18.         android:drawable="@drawable/thumb_focused"/>         
  19.     <!-- 有焦点 -->  
  20.     <item   
  21.         android:state_focused="true"              
  22.         android:drawable="@drawable/thumb_focused"/>     
  23. </selector>








3.去掉THUMB 这个小球方式：

去掉布局中的：

 android:thumb="@drawable/thumb"

<SeekBar
            android:id="@+id/seekbar"
            android:layout_width="fill_parent"
            android:layout_height="4dip"
            android:paddingLeft="16dip"
            android:paddingRight="16dip"
            android:layout_marginTop="4dip"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:clickable="false"
            android:progressDrawable="@drawable/seekbar"
            >
然后在JAVA代码里面设置:SEEKBAR.setThumb(getThumb());


private ShapeDrawable getThumb() {
        ShapeDrawable thumb = new ShapeDrawable(new RectShape());
        thumb.getPaint().setColor(0x006cff);
        thumb.setIntrinsicHeight(5);
        thumb.setIntrinsicWidth(5);
        return thumb;
    }

 

 

 

demo java code:

 

package com.android.sharefres.five;

import android.app.Activity;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RectShape;
import android.os.Bundle;
import android.widget.SeekBar;

public class SharefresFiveActivity extends Activity {
    /** Called when the activity is first created. */
 private SeekBar mSeekbar;
 public void init(){
  mSeekbar=(SeekBar) findViewById(R.id.seekbar);
  mSeekbar.setThumb(getThumb());
 }
 
 private ShapeDrawable getThumb() {
         ShapeDrawable thumb = new ShapeDrawable(new RectShape());
         thumb.getPaint().setColor(0x006cff);
         thumb.setIntrinsicHeight(5);
         thumb.setIntrinsicWidth(5);
         return thumb;
     }

 

 

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        init();
    }
}

 

 

main.xml

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <SeekBar  android:id="@+id/seekbar" 
            android:layout_width="fill_parent" 
            android:layout_height="4dip" 
            android:paddingLeft="16dip" 
            android:paddingRight="16dip" 
            android:layout_marginTop="4dip" 
            android:focusable="false" 
            android:focusableInTouchMode="false" 
            android:clickable="false" 
            android:progressDrawable="@drawable/seekbar" 
        />

</LinearLayout>

 

seekbar.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="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="#ff0099CC" 
                         android:centerColor="#ff3399CC" 
                         android:centerY="0.75" 
                         android:endColor="#ff6699CC" 
                         android:angle="270" 
                 /> 
             </shape> 
         </clip> 
     </item> 
  
</layer-list> 

优雅的Android SeekBar样式实现
CyberSparkZ的博客
08-18 376
默认情况下，SeekBar的样式比较简单，但我们可以自定义它的外观，使其更加漂亮和符合我们的应用设计。上述代码中，我们为SeekBar设置了一个SeekBar.OnSeekBarChangeListener监听器，可以根据需要重写其中的回调方法来处理相应的事件，例如在进度变化时更新UI或执行其他操作。上述代码使用了shape元素来创建一个圆角矩形，然后使用gradient元素定义了进度条的渐变颜色，这里使用了粉红色作为示例。你可以根据自己的需求修改颜色、形状和尺寸等属性，以获得你想要的效果。
自定义漂亮的Android SeekBar样式
热门推荐
04-17 11万+
系统自带的SeekBar真是太难看了，不能容忍！ 只能自己做了,先来张效果图 第1个Seekbar 背景是颜色，thumb是图片，上代码： <SeekBar android:id="@+id/timeline" android:layout_width="fill_parent" android:layout_height...
Android自定义SeekBar样式
08-07
NULL 博文链接：https://chenzheng8975.iteye.com/blog/2124165
Android UI , QuickContactBadge, SeekBar, 自定义漂亮的Android SeekBar样式
kevin_xiang的专栏
11-13 1726
1.  <QuickContactBadge android:id="@+id/quickContactBadge1" android:layout_width="wrap_content" android:layout_height="wrap_content" style="?android:attr/quickContactB
android SeekBar 样式设置
Dream It Possible
05-19 1万+
UI参考                     Xml代码   SeekBar          android:id="@+id/seekbar"          style="?android:attr/progressBarStyleHorizontal"          an
Android 圆弧形 SeekBar。
未来很长，但我会努力的走下去。
01-25 1785
arc-seekbar 项目地址：GcsSloop/arc-seekbar  简介：Android 圆弧形 SeekBar。 更多：作者   提 Bug    标签：   这个是在公司项目中准备使用的一个控件，本准备直接在网上搜一个用，可惜找到的很多都是 ProgressBar，并不具备拖拽功能，于是自己动手实现了一个，其功能和特性均仿照 SeekBar 进行设计。 效果预览 ...
android seekbar样式
Alex的博客
03-24 402
<SeekBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:minWidth="300dp" android:minHeight="30dp" android:maxWidth="500dp" android:max="40" android:lay...
Android seekbar样式
最新发布
03-21
### 自定义Android SeekBar样式的教程与示例 #### 1. 基础概念 Android 中的 `SeekBar` 是一种允许用户通过滑动来选择数值的控件。为了满足特定的设计需求，通常需要对其进行自定义。这包括调整外观、行为以及交互...
Android 开发 调节声音 SeekBar自定义样式
afufufufu的博客
10-25 507
【代码】Android 开发 调节声音 SeekBar自定义样式。
Android seekbar样式介绍
u013598111的专栏
11-24 523
转载请标明出处：，本文出自：【王俊涛的博客】 <SeekBar android:id="@+id/seekbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:maxHeight="4dp" a
Android 自定义SeekBar样式
06-03
自定义的 SeekBar 样式，实现很简单，有需要的可以看看，本demo是仿酷狗SeekBar 的样式，进度条上小圆球可以随意拖动，如果不需要小圆球的只需要将main.xml里面的android:thumb="@drawable/seek_thumb"去掉就行了……
Android自定义圆形SeekBar
07-24
自定义的圆弧行SeekBar。(PS:不支持0%-100%跳转)
Android-CircularSeekBar用于Android的定制圆形SeekBar圆形半圆形和椭圆形
08-13
CircularSeekBar用于Android的定制圆形SeekBar（圆形，半圆形和椭圆形）
适用于Android的自定义圆形SeekBar（圆形，半圆形和椭圆形）-Android开发
05-26
CircularSeekBar丰富的功能，适用于Android的圆形SeekBar（圆形，半圆形和椭圆形）。 该库基于Matt Joseph（devadvance）的CircularSeekBar。 但是原始作者似乎已经停止维护（l的CircularSeekBar丰富功能Circular SeekBar（圆，半圆和椭圆））。该库基于Matt Joseph的CircularSeekBar（devadvance）。但是原始作者似乎已经停止了。维护（最后一次提交是在2016年），所以我决定自己解决这个问题。我将其构建在Android Studio（Gradle）上，然后修复并向库中添加了更多功能。我添加的功能支持浮动进度，而不是仅整数。重构属性的名称，以避免con
Android的SeekBar自定义样式
lihonghao1017的专栏
08-07 3414
SeekBar的布局             android:id="@+id/mp3_seekBar"             android:layout_width="fill_parent"             android:layout_height="20dp"             android:layout_centerVertical="true"
Android自定义SeekBar的样式
殇神马的博客
08-28 2139
SeekBar就是拖动条，是继承自ProgressBar的。SeekBar与ProgressBar一样都是用来显示进度的，不同的SeekBar有一个可拖动的滑块，可以用来改变进度。所以SeekBar主要使用来实现对数值进行调节，如调节音量，亮度等。 但是Android系统的SeekBar的样式基本上是不能满足我们的需求，所以自定义SeekBar的样式就是必然的了。 SeekBar自定义样式与Prog
自定义seekbar
ATHENAMAX的专栏
11-12 1577
Android系统自带的SeekBar的样式比较单一，而且不同品牌手机被定制了之后样式也不一样，为了SeekBar的样式和应用的风格统一，就需要自定义SeekBar的样式，先看效果图： android:layout_width=”192dip” android:layout_height=”wrap_content” android:progressDrawable=”@drawab
Android seekBar1.自定义样式
Mr.Lau的博客
01-23 621
1.在布局文件中添加seekBar控件了解控件属性：  从sdk中可以得知，它是ProgressBar的扩展，它比进度条多了一个功能就是可拖动性，这样用户就可以控制进度条，比如播放电影，用户可以通过拖动SeekBar进行快进与快退. SeekBar的属性如下： android:max   设置值的大小 .android:thumb="@drawable/"   显示的那个可拖动图
android 自定义SeekBar 样式
ink_s的博客
10-26 421
xml使用 &lt;SeekBar android:id="@+id/seebar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_gravity="c...
轻松自定义Android SeekBar样式指南
6. **主题与样式继承：** 在自定义seekbar样式时，可以利用Android的主题和样式继承机制来简化开发过程。通过定义一个基础主题，然后在需要的地方继承并覆盖其中的属性，可以轻松实现样式的统一和复用。 7. **兼容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值