Android SeekBar自定义使用图片和颜色显示

时间:2023-11-10 18:43:08

案例使用的图片如下:

Android SeekBar自定义使用图片和颜色显示          Android SeekBar自定义使用图片和颜色显示                Android SeekBar自定义使用图片和颜色显示

1.在res/drawable目录下新增一个xml风格文件,seekbar_define_style.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?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/hou"/>
    <!-- 中 -->
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/qian"/>
    <item
        android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/qian"/>
</layer-list>

2.在res/drawable下定义个seekbar_thumb.xml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">       
        
    <!-- 按下状态--> 
    <item   
        android:state_focused="true"   
        android:state_pressed="true"   
        android:drawable="@drawable/ic_launcher" />       
    <!-- 普通无焦点状态 -拖动按钮--> 
    <item   
        android:state_focused="false"   
        android:state_pressed="false" 
        android:drawable="@drawable/orbino_icon_pack_006" />             
    <!-- 有焦点状态--> 
    <item   
        android:state_focused="true"   
        android:state_pressed="false"             
        android:drawable="@drawable/ios" />        
    <!-- 有焦点 --> 
    <item   
        android:state_focused="true"             
        android:drawable="@drawable/ios"/>
</selector>

3.在res/layut下定义布局资源文件seekbar_define.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="<a href="http://schemas.android.com/apk/res/android" rel="nofollow">http://schemas.android.com/apk/res/android</a>"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
         android:orientation="vertical"
        >
    <TextView
    android:id="@+id/seekbar_tetview_one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="SeekBar自定义"
    />
    <TextView
    android:id="@+id/seekbar_tetview_two"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="SeekBar拖动时信息提示"
    />
    <SeekBar
    android:layout_width="321px"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:maxHeight="20px"
    android:minHeight="20px"
    android:paddingLeft="18px"
    android:paddingRight="18px"
    android:max="100"
    android:progressDrawable="@drawable/seekbar_define_style"
    android:thumb="@drawable/seekbar_thumb"
    android:id="@+id/seekBar"/>
 </LinearLayout>
</ScrollView>

4.定义java文件通过 引用布局文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
package com.test;
import android.R.integer;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;
public class SeekBarDemo_DefineDemo extends Activity {
    private SeekBar seekBar;
    private TextView textView_one, textView_two;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.seekbar_define);
        seekBar = (SeekBar) findViewById(R.id.seekBar);
        textView_one = (TextView) findViewById(R.id.seekbar_tetview_one);
        textView_two = (TextView) findViewById(R.id.seekbar_tetview_two);
        seekBar.setOnSeekBarChangeListener(seekbarChangeListener);
    }
    private OnSeekBarChangeListener seekbarChangeListener = new OnSeekBarChangeListener() {
        // 停止拖动时执行
        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
            // TODO Auto-generated method stub
            textView_two.setText("停止拖动了!");
        }
        // 在进度开始改变时执行
        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
            // TODO Auto-generated method stub
            textView_two.setText("进度开始改变");
        }
        // 当进度发生改变时执行
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress,
                boolean fromUser) {
            textView_two.setText("正在进行拖动操作,还没有停下来一直再拖动");
            Message message = new Message();
            Bundle bundle = new Bundle();// 存放数据
            float pro = seekBar.getProgress();
            float num = seekBar.getMax();
            float result = (pro / num) * 100;
            bundle.putFloat("key", result);
            message.setData(bundle);
            message.what = 0;
            handler.sendMessage(message);
        }
    };
    /**
     * 用Handler来更新UI
     */
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            textView_one.setText("当前拖动位置占 :       "
                    + msg.getData().getFloat("key") + "/100");
        }
    };
}

最后执行效果:

Android SeekBar自定义使用图片和颜色显示

Android SeekBar自定义使用图片和颜色显示

Android SeekBar自定义使用图片和颜色显示

二:使用颜色显示,和尚面是一样的,只有我们定义颜色资源来替代图片资源文件seekbar_define_color_style.xml:如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?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:paddingTop="3px"
         android:paddingBottom="3px">    
      <shape>    
         <corners android:radius="10dip" />    
         <gradient   
             android:startColor="#ffffffff" 
             android:centerColor="#ff000000"    
             android:endColor="#ff808A87"   
             android:centerY="0.45"    
             android:angle="270"/>    
      </shape>    
   </item>    
       
   <item android:id="@android:id/progress"
            android:paddingTop="3px"
         android:paddingBottom="3px" >    
       <clip>    
          <shape>    
              <corners android:radius="10dip" />    
              <gradient   
                  android:startColor="#ffffffff" 
                  android:centerColor="#ffFFFF00"    
                  android:endColor="#ffAABD00"   
                  android:centerY="0.45"    
                  android:angle="270"/>    
          </shape>    
       </clip>    
   </item>    
 </layer-list>

之后再SeekBar标签使用如下属性进行引入:其他保持不变

1
android:progressDrawable="@drawable/seekbar_define_color_style"

执行效果:

Android SeekBar自定义使用图片和颜色显示

由于SeekBar的属性thumb引入了自定义的seekbar_thumb.xml文件,拖动图标是我们自定义的图片:除去这个属性

1
android:thumb="@drawable/seekbar_thumb"

就回复系统默认状态效果最后效果如下:

Android SeekBar自定义使用图片和颜色显示

我们可以通过颜色值再次休息seekbar_thumb.xml文件,使拖动按钮设置成自定义颜色: