Android：自定义Seekbar

效果图：

好了直接上代码：

1：先看布局文件：

[java]  view plain copy

1. <com.android.camera.ui.EffectSettingPopupModify xmlns:android="http://schemas.android.com/apk/res/android"  
2.         style="@style/EffectSettingPopupWindow"  
3.         android:layout_width="491px"  
4.         android:layout_height="500px">  
5.     <RelativeLayout android:background="@drawable/floor"  
6.         android:layout_height="fill_parent"  
7.         android:layout_width="fill_parent"  
8.         android:layout_alignParentBottom="true">  
9.     <TextView  
10.         android:id="@+id/Title_id"  
11.         android:layout_width="wrap_content"  
12.         android:layout_height="wrap_content"  
13.         android:text="@string/effects"  
14.         android:textColor="#ffffff"  
15.         android:paddingLeft="15px"  
16.         android:layout_marginTop="8px"  
17.         android:textSize="@dimen/effect_title_size" />  
18.   
19.     <View  
20.         android:id="@+id/view"  
21.         android:layout_width="fill_parent"  
22.         android:layout_height="2px"  
23.         android:layout_below="@+id/Title_id"  
24.         android:alpha="0.8"  
25.         android:layout_marginTop="8px"  
26.         android:background="#7eff00" />  
27.     <!-- 1 -->  
28.     <ImageView  
29.         android:id="@+id/luminance_id"  
30.         android:layout_width="51px"  
31.         android:layout_height="51px"  
32.         android:layout_below="@+id/view"  
33.         android:background="@drawable/luminance"  
34.         android:layout_marginLeft="43px"  
35.         android:layout_marginTop="10px"  
36.        />  
37.   
38.     <TextView  
39.         android:id="@+id/luminance_title"  
40.         android:layout_width="wrap_content"  
41.         android:layout_height="wrap_content"  
42.         android:layout_alignLeft="@+id/luminance_id"  
43.         android:layout_below="@+id/control01"  
44.         android:textColor="#ffffff"  
45.         android:text="@string/luminance_title" />  
46.     <LinearLayout  
47.         android:id="@+id/control01"  
48.         android:layout_alignTop="@+id/luminance_id"  
49.         android:layout_toRightOf="@+id/luminance_id"  
50.         android:layout_marginLeft="30px"  
51.         android:layout_width="350px"   
52.         android:layout_height="60px"  
53.         android:orientation="horizontal"  
54.         android:gravity="center"  
55.         >      
56.     <SeekBar  
57.         android:id="@+id/SeekBar01"  
58.         android:layout_width="fill_parent"  
59.         android:layout_height="40px"  
60.         android:maxHeight="40px"  
61.         android:minHeight="40px"  
62.         android:max="100"  
63.         android:progress="50"  
64.         android:secondaryProgress="0"   
65.         android:progressDrawable="@drawable/effect_seekbar_style"    
66.         android:thumb="@drawable/slide_one"  
67.         android:thumbOffset="20px">  
68.     </SeekBar>  
69. </LinearLayout>  
70.     <TextView  
71.         android:id="@+id/luminance_min"  
72.         android:layout_width="wrap_content"  
73.         android:layout_height="wrap_content"  
74.         android:layout_alignLeft="@+id/control01"  
75.         android:layout_below="@+id/control01"  
76.         android:paddingLeft="28px"  
77.         android:textColor="#ffffff"  
78.         android:text="@string/luminance_min" />  
79.   
80.     <TextView  
81.         android:id="@+id/luminance_cent"  
82.         android:layout_width="wrap_content"  
83.         android:layout_height="wrap_content"  
84.         android:layout_below="@+id/control01"  
85.         android:layout_marginLeft="280px"  
86.         android:textColor="#ffffff"  
87.         android:text="@string/luminance_cent" />  
88.   
89.     <TextView  
90.         android:id="@+id/luminance_max"  
91.         android:layout_width="wrap_content"  
92.         android:layout_height="wrap_content"  
93.         android:layout_alignRight="@+id/control01"  
94.         android:layout_below="@+id/control01"  
95.         android:paddingRight="15px"  
96.         android:textColor="#ffffff"  
97.         android:text="@string/luminance_max" />  
98.      <!-- 2 -->  
99.   
100.     <ImageView  
101.         android:id="@+id/contrast_id"  
102.         android:layout_width="wrap_content"  
103.         android:layout_height="wrap_content"  
104.         android:layout_below="@+id/luminance_title"  
105.         android:src="@drawable/contrast"  
106.         android:layout_marginLeft="@dimen/effect_margin_left"  
107.         android:layout_marginTop="10px"/>  
108.   
109.     <TextView  
110.         android:id="@+id/contrast_title"  
111.         android:layout_width="wrap_content"  
112.         android:layout_height="wrap_content"  
113.         android:layout_marginLeft="25px"  
114.         android:layout_below="@+id/control02"  
115.         android:textColor="#ffffff"  
116.         android:text="@string/contrast_title" />  
117. <LinearLayout  
118.         android:id="@+id/control02"  
119.         android:layout_alignTop="@+id/contrast_id"  
120.         android:layout_toRightOf="@+id/contrast_id"  
121.         android:layout_marginLeft="30px"  
122.         android:layout_width="350px"   
123.         android:layout_height="60px"  
124.         android:orientation="horizontal"  
125.         android:gravity="center"  
126.         >  
127.     <SeekBar  
128.         android:id="@+id/SeekBar02"  
129.         android:layout_width="match_parent"  
130.         android:layout_height="40px"  
131.         android:maxHeight="40px"  
132.         android:minHeight="40px"  
133.         android:max="100"  
134.         android:progress="50"  
135.         android:secondaryProgress="0"   
136.         android:progressDrawable="@drawable/effect_seekbar_style"    
137.         android:thumb="@drawable/slide_one"  
138.         android:thumbOffset="20px" >  
139.     </SeekBar>  
140. </LinearLayout>      
141.     <TextView  
142.         android:layout_width="wrap_content"  
143.         android:layout_height="wrap_content"  
144.         android:layout_alignLeft="@+id/control02"  
145.         android:layout_below="@+id/control02"  
146.         android:paddingLeft="28px"  
147.         android:textColor="#ffffff"  
148.         android:text="@string/luminance_min" />  
149.   
150.     <TextView  
151.         android:layout_width="wrap_content"  
152.         android:layout_height="wrap_content"  
153.         android:layout_below="@+id/control02"  
154.         android:layout_marginLeft="280px"  
155.         android:textColor="#ffffff"  
156.         android:text="@string/luminance_cent" />  
157.   
158.     <TextView  
159.         android:layout_width="wrap_content"  
160.         android:layout_height="wrap_content"  
161.         android:layout_alignRight="@+id/control02"  
162.         android:layout_below="@+id/control02"  
163.         android:paddingRight="15px"  
164.         android:textColor="#ffffff"  
165.         android:text="@string/luminance_max" />  
166.         <!-- 3 -->  
167.   
168.     <ImageView  
169.         android:id="@+id/saturation_id"  
170.         android:layout_width="wrap_content"  
171.         android:layout_height="wrap_content"  
172.         android:layout_below="@+id/contrast_title"  
173.         android:src="@drawable/saturation"  
174.         android:layout_marginLeft="43px" />  
175.   
176.     <TextView  
177.         android:id="@+id/saturation_title"  
178.         android:layout_width="wrap_content"  
179.         android:layout_height="wrap_content"  
180.         android:layout_marginLeft="25px"  
181.         android:layout_below="@+id/control03"  
182.         android:textColor="#ffffff"  
183.         android:text="@string/saturation_title" />  
184. <LinearLayout  
185.         android:id="@+id/control03"  
186.         android:layout_alignTop="@+id/saturation_id"  
187.         android:layout_toRightOf="@+id/saturation_id"  
188.         android:layout_marginLeft="30px"  
189.         android:layout_width="350px"   
190.         android:layout_height="60px"  
191.         android:orientation="horizontal"  
192.         android:gravity="center"  
193.         >  
194.     <SeekBar  
195.         android:id="@+id/SeekBar03"  
196.         android:layout_width="match_parent"  
197.         android:layout_height="40px"  
198.         android:maxHeight="40px"  
199.         android:minHeight="40px"  
200.         android:max="100"  
201.         android:progress="50"  
202.         android:secondaryProgress="0"   
203.         android:progressDrawable="@drawable/effect_seekbar_style"    
204.         android:thumb="@drawable/slide_one"  
205.         android:thumbOffset="20px">  
206.     </SeekBar>  
207. </LinearLayout>      
208.     <TextView  
209.         android:layout_width="wrap_content"  
210.         android:layout_height="wrap_content"  
211.         android:layout_alignLeft="@+id/control03"  
212.         android:layout_below="@+id/control03"  
213.         android:paddingLeft="28px"  
214.         android:textColor="#ffffff"  
215.         android:text="@string/luminance_min" />  
216.   
217.     <TextView  
218.         android:layout_width="wrap_content"  
219.         android:layout_height="wrap_content"  
220.         android:layout_below="@+id/control03"  
221.         android:layout_marginLeft="280px"  
222.         android:textColor="#ffffff"  
223.         android:text="@string/luminance_cent" />  
224.   
225.     <TextView  
226.         android:layout_width="wrap_content"  
227.         android:layout_height="wrap_content"  
228.         android:layout_alignRight="@+id/control03"  
229.         android:layout_below="@+id/control03"  
230.         android:paddingRight="15px"  
231.         android:textColor="#ffffff"  
232.         android:text="@string/luminance_max" />  
233.     <!-- 4 -->  
234.   
235.     <ImageView  
236.         android:id="@+id/acutance_id"  
237.         android:layout_width="wrap_content"  
238.         android:layout_height="wrap_content"  
239.         android:layout_below="@+id/saturation_title"  
240.         android:src="@drawable/acutance"  
241.         android:layout_marginLeft="43px"/>  
242.   
243.     <TextView  
244.         android:id="@+id/acutance_title"  
245.         android:layout_width="wrap_content"  
246.         android:layout_height="wrap_content"  
247.         android:layout_alignRight="@+id/acutance_id"  
248.         android:layout_below="@+id/control04"  
249.         android:textColor="#ffffff"  
250.         android:text="@string/acutance_title" />  
251. <LinearLayout  
252.         android:id="@+id/control04"  
253.         android:layout_alignTop="@+id/acutance_id"  
254.         android:layout_toRightOf="@+id/acutance_id"  
255.         android:layout_marginLeft="30px"  
256.         android:layout_width="350px"   
257.         android:layout_height="60px"  
258.         android:orientation="horizontal"  
259.         android:gravity="center"  
260.         >  
261.     <SeekBar  
262.         android:id="@+id/SeekBar04"  
263.        android:layout_width="match_parent"  
264.         android:layout_height="40px"  
265.         android:maxHeight="40px"  
266.         android:minHeight="40px"  
267.         android:max="100"  
268.         android:progress="50"  
269.         android:secondaryProgress="0"   
270.         android:progressDrawable="@drawable/effect_seekbar_style"    
271.         android:thumb="@drawable/slide_one"  
272.         android:thumbOffset="20px">  
273.     </SeekBar>  
274. </LinearLayout>      
275.     <TextView  
276.         android:layout_width="wrap_content"  
277.         android:layout_height="wrap_content"  
278.         android:layout_alignLeft="@+id/control04"  
279.         android:layout_below="@+id/control04"  
280.         android:paddingLeft="28px"  
281.         android:textColor="#ffffff"  
282.         android:text="@string/luminance_min" />  
283.   
284.     <TextView  
285.         android:layout_width="wrap_content"  
286.         android:layout_height="wrap_content"  
287.         android:layout_below="@+id/control04"  
288.         android:layout_marginLeft="280px"  
289.         android:textColor="#ffffff"  
290.         android:text="@string/luminance_cent" />  
291.   
292.     <TextView  
293.         android:layout_width="wrap_content"  
294.         android:layout_height="wrap_content"  
295.         android:layout_alignRight="@+id/control04"  
296.         android:layout_below="@+id/control04"  
297.         android:paddingRight="15px"  
298.         android:textColor="#ffffff"  
299.         android:text="@string/luminance_max" />  
300.      </RelativeLayout>  
301. </com.android.camera.ui.EffectSettingPopupModify>  

关键点： <SeekBar
        android:id="@+id/SeekBar01"
        android:layout_width="fill_parent"
        android:layout_height="40px"
        android:maxHeight="40px"
        android:minHeight="40px"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="0" 
        android:progressDrawable="@drawable/effect_seekbar_style"  
        android:thumb="@drawable/slide_one"
        android:thumbOffset="20px">
    </SeekBar>

看看这个style：android:progressDrawable="@drawable/effect_seekbar_style"  

[java]  view plain copy

1. <layer-list    
2.     xmlns:android="http://schemas.android.com/apk/res/android">    
3.     <item    
4.         android:id="@android:id/background"    
5.         android:drawable="@drawable/slip_line_normal"/>    
6.     <item    
7.         android:id="@android:id/progress"    
8.         android:drawable="@drawable/slip_line_green"/>    
9.     <item    
10.         android:id="@android:id/secondaryProgress"    
11.         android:drawable="@drawable/slip_line_green"/>    
12. </layer-list>      

好了布局就已经完成了，只要在Activity里面继承implements SeekBar.OnSeekBarChangeListener 实现几个方法去改变响应的值就ok，是不是很简单呀！

上代码看看吧：

[java]  view plain copy

1. public class EffectSettingPopupModify extends RotateLayout implements SeekBar.OnSeekBarChangeListener {  
2.     private OnPreferenceChangedListener mListener;  
3.     protected CameraPicker mCameraPicker;  
4.     private SeekBar seekBar01,seekBar02,seekBar03,seekBar04;  
5.     private ComboPreferences mPreferences;  
6.     private final int MAX = 2;  
7.     private final int SEC_MAX = 1;  
8.     private final int MIDDLE = 0;  
9.     private final int SEC_MIN = -1;  
10.     private final int MIN = -2;  
11.     private int value_temp;  
12.       
13.     public void setListener(OnPreferenceChangedListener listener) {  
14.         mListener = listener;  
15.         if (mCameraPicker != null) mCameraPicker.setListener(listener);  
16.     }  
17.     public EffectSettingPopupModify(Context context, AttributeSet attrs) {  
18.         super(context, attrs);  
19.         // TODO Auto-generated constructor stub  
20.     }  
21.     public void initEffectSettingPopupModify(ComboPreferences preferences){  
22.         mPreferences = preferences;  
23.           
24.     }  
25.     private SeekBar[] mSeekBar = new SeekBar[4];  
26.     public void setSeekBar(int which,String progress){  
27.         int temp = Integer.valueOf(progress);  
28.         switch(temp){  
29.         case MAX:  
30.             mSeekBar[which].setProgress(100);  
31.             break;  
32.         case SEC_MAX:  
33.             mSeekBar[which].setProgress(75);  
34.             break;  
35.         case MIDDLE:  
36.             mSeekBar[which].setProgress(50);  
37.             break;  
38.         case SEC_MIN:  
39.             mSeekBar[which].setProgress(25);  
40.             break;  
41.         case MIN:  
42.             mSeekBar[which].setProgress(0);  
43.             break;    
44.         }  
45.     }  
46.     private final String[] value = new String[]{"-2","-1","0","1","2"};  
47.     private String getValue(int progress){  
48.         int temp = progress/25;  
49.         return value[temp];  
50.     }  
51.     @Override  
52.     protected void onFinishInflate() {  
53.         // TODO Auto-generated method stub  
54.         super.onFinishInflate();  
55.          seekBar01 = (SeekBar) this.findViewById(R.id.SeekBar01);  
56.          seekBar02 = (SeekBar) this.findViewById(R.id.SeekBar02);  
57.          seekBar03 = (SeekBar) this.findViewById(R.id.SeekBar03);  
58.          seekBar04 = (SeekBar) this.findViewById(R.id.SeekBar04);  
59.          seekBar01.setOnSeekBarChangeListener(this);  
60.          seekBar02.setOnSeekBarChangeListener(this);  
61.          seekBar03.setOnSeekBarChangeListener(this);  
62.          seekBar04.setOnSeekBarChangeListener(this);  
63.          mSeekBar[0] = seekBar01;  
64.          mSeekBar[1] = seekBar02;  
65.          mSeekBar[2] = seekBar03;  
66.          mSeekBar[3] = seekBar04;  
67.     }  
68.     @Override  
69.     public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {  
70.         // TODO Auto-generated method stub  
71.         switch(seekBar.getId()){  
72.         case R.id.SeekBar01:  
73.             value_temp = progress;  
74.             mPreferences.edit().putString(CameraSettings.KEY_BRIGHTNESS, getValue(value_temp)).commit();  
75.             break;  
76.         case R.id.SeekBar02:  
77.             value_temp = progress;  
78.             mPreferences.edit().putString(CameraSettings.KEY_CONTRAST, getValue(value_temp)).commit();  
79.             break;  
80.         case R.id.SeekBar03:  
81.             value_temp = progress;  
82.             mPreferences.edit().putString(CameraSettings.KEY_SATURATION, getValue(value_temp)).commit();  
83.             break;  
84.         case R.id.SeekBar04:  
85.             value_temp = progress;  
86.             mPreferences.edit().putString(CameraSettings.KEY_SHARPNESS, getValue(value_temp)).commit();  
87.             break;    
88.         }  
89.         mListener.onSharedPreferenceChanged();  
90.     }  
91.   
92.     @Override  
93.     public void onStartTrackingTouch(SeekBar seekBar) {  
94.         // TODO Auto-generated method stub  
95.     }  
96.   
97.     @Override  
98.     public void onStopTrackingTouch(SeekBar seekBar) {  
99.         // TODO Auto-generated method stub  
100.         switch(seekBar.getId()){  
101.         case R.id.SeekBar01:  
102.             mPreferences.edit().putString(CameraSettings.KEY_BRIGHTNESS, getValue(value_temp)).commit();  
103.             break;  
104.         case R.id.SeekBar02:  
105.             mPreferences.edit().putString(CameraSettings.KEY_CONTRAST, getValue(value_temp)).commit();  
106.             break;  
107.         case R.id.SeekBar03:  
108.             mPreferences.edit().putString(CameraSettings.KEY_SATURATION, getValue(value_temp)).commit();  
109.             break;  
110.         case R.id.SeekBar04:  
111.             mPreferences.edit().putString(CameraSettings.KEY_SHARPNESS, getValue(value_temp)).commit();  
112.             break;    
113.         }  
114.         mListener.onSharedPreferenceChanged();  
115.     }  
116.      
117. }