30      阿裏雲  技術社區[雲棲]

Android 自定義UI-垂直方向的SeekBar

 係統自帶的SeekBar樣式是水平的，如果需求一個垂直方向的效果就需要自定義了。原理很簡單，即定義一個類繼承於SeekBar，並在OnDraw方法裏麵旋轉一下視圖。

代碼如下：

[java] view plaincopy

1. package android.widget;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.util.AttributeSet;  
6. import android.util.Log;  
7. import android.view.MotionEvent;  
8.   
9. public class VerticalSeekBar extends SeekBar {  
10.   
11.     public VerticalSeekBar(Context context) {  
12.         super(context);  
13.     }  
14.   
15.     public VerticalSeekBar(Context context, AttributeSet attrs, int defStyle) {  
16.         super(context, attrs, defStyle);  
17.     }  
18.   
19.     public VerticalSeekBar(Context context, AttributeSet attrs) {  
20.         super(context, attrs);  
21.     }  
22.   
23.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
24.         super.onSizeChanged(h, w, oldh, oldw);  
25.     }  
26.   
27.     @Override  
28.     protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
29.         super.onMeasure(heightMeasureSpec, widthMeasureSpec);  
30.         setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());  
31.     }  
32.   
33.     protected void onDraw(Canvas c) {  
34.         //將SeekBar轉轉90度  
35.         c.rotate(-90);  
36.         //將旋轉後的視圖移動回來  
37.         c.translate(-getHeight(),0);  
38.         Log.i("getHeight()",getHeight()+"");  
39.         super.onDraw(c);  
40.     }  
41.   
42.     @Override  
43.     public boolean onTouchEvent(MotionEvent event) {  
44.         if (!isEnabled()) {  
45.             return false;  
46.         }  
47.   
48.         switch (event.getAction()) {  
49.             case MotionEvent.ACTION_DOWN:  
50.             case MotionEvent.ACTION_MOVE:  
51.             case MotionEvent.ACTION_UP:  
52.                 int i=0;  
53.                 //獲取滑動的距離  
54.                 i=getMax() - (int) (getMax() * event.getY() / getHeight());  
55.                 //設置進度  
56.                 setProgress(i);  
57.                 Log.i("Progress",getProgress()+"");  
58.                 //每次拖動SeekBar都會調用  
59.                 onSizeChanged(getWidth(), getHeight(), 0, 0);  
60.                 Log.i("getWidth()",getWidth()+"");  
61.                 Log.i("getHeight()",getHeight()+"");  
62.                 break;  
63.   
64.             case MotionEvent.ACTION_CANCEL:  
65.                 break;  
66.         }  
67.         return true;  
68.     }  
69.       
70. }  

[html] view plaincopy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:gravity="center"  
6.     android:background="@android:color/white"  
7.     android:orientation="horizontal" >  
8.   
9.     <android.widget.VerticalSeekBar_Reverse  
10.         android:id="@+id/seekbar_reverse"  
11.         android:layout_width="wrap_content"  
12.         android:layout_height="450dip"  
13.         android:layout_marginRight="30dip" />  
14.   
15.     <TextView  
16.         android:id="@+id/reverse_sb_progresstext"  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="wrap_content"  
19.         android:layout_below="@+id/seekbar_reverse"  
20.         android:gravity="center" />  
21.   
22.     <android.widget.VerticalSeekBar  
23.         android:id="@+id/vertical_Seekbar"  
24.         android:layout_width="wrap_content"  
25.         android:layout_height="450dip"  
26.         android:layout_toRightOf="@+id/seekbar_reverse" />  
27.   
28.     <TextView  
29.         android:id="@+id/vertical_sb_progresstext"  
30.         android:layout_width="wrap_content"  
31.         android:layout_height="wrap_content"  
32.         android:layout_below="@+id/vertical_Seekbar"  
33.         android:layout_toRightOf="@+id/seekbar_reverse"  
34.         android:gravity="center" />  
35.   
36. </RelativeLayout>  

  

最後更新：2017-04-03 12:55:25

  上一篇： Dev gridcontrol 捕獲按鍵事件

  下一篇： 連載：麵向對象葵花寶典：思想、技巧與實踐（16） - 需求分析終極目的