自訂音量大小控制項的實現

標籤：控制項   介面   音量大小   自訂控制項   

本篇文章，將介紹如何?自訂的音量大小控制項。

話不多少，先看

本篇文章將介紹兩種實現的方式，上面的是通過繼承RatingBar，然後設定樣式獲得的效果，下面的是通過繼承自View，完全自訂的方式實現。

我們首先介紹第一種方式，也就是繼承自RatingBar實現。

public class WmtRatingBar extends RatingBar {    private OnRatingBarChanging mOnRatingBarChanging;    public WmtRatingBar(Context context) {        super(context);    }    public WmtRatingBar(Context context, AttributeSet attrs) {        super(context, attrs);    }    public WmtRatingBar(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);    }            @Override    public boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()) {            case MotionEvent.ACTION_MOVE:            case MotionEvent.ACTION_DOWN:            case MotionEvent.ACTION_UP:                if (mOnRatingBarChanging != null)                    mOnRatingBarChanging.onRatingChanging(this.getRating());                break;        }        return super.onTouchEvent(event);    }    public void setOnRatingBarChange(OnRatingBarChanging changing) {        mOnRatingBarChanging = changing;    }    public interface OnRatingBarChanging {        void onRatingChanging(float f);    }}

我們可以看到，實現方式很簡單，只不過是增加了一個介面，方便擷取變化值。如果我們在布局檔案中需要使用的話，需要這樣

<com.wike.volume.WmtRatingBar            android:id="@+id/volume_ratingBar"            style="@style/wmtRatingBar"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:numStars="15"            android:paddingBottom="20dip"            android:paddingTop="20dip" >        </com.wike.volume.WmtRatingBar>

這裡很重要的一個就是設定style，我們看一下在style中是如何設定的

<resources>    <style name="wmtRatingBar" parent="@android:style/Widget.RatingBar">        <item name="android:progressDrawable">@drawable/wmt_ratingbar</item>        <item name="android:minHeight">16dip</item>        <item name="android:maxHeight">16dip</item>    </style></resources>

這裡最重要的一個屬性就是progressDrawable，這裡定義了一個檔案用於設定選中和不選中的圖片顯示，替代內建的五角星圖形。

在wmt_ratingbar.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" android:drawable="@drawable/ratingbar_off"></item><item android:id="@+android:id/secondaryProgress" android:drawable="@drawable/ratingbar_off"></item><item android:id="@+android:id/progress" android:drawable="@drawable/ratingbar_on"></item></layer-list>

在這裡面設定了背景和選中時的圖片顯示。

通過設定這麼多東西之後，我們就可以實現一開始顯示出的上面那種效果，精度可以達到0.5

第一種實現方式比較簡單，但是各種東西設定起來也是比較的繁瑣，因此，我對第一種方案進行了修改，直接繼承自View，然後完全自訂音頻調節控制項，下面看實現代碼

/** * 自訂音量顯示控制項 *  * @author zhaokaiqiang *  * @time 2014年6月25日 上午11:42:10 */public class VolumeView extends View {private static final String TAG = "VolumeView";// 增加音量圖片private Bitmap addBitmap;// 減少音量圖片private Bitmap reduceBitmap;// 小喇叭圖片private Bitmap volume;private Paint paint = new Paint();// 控制項高度private int height = 100;// 控制項寬度private int width = 430;// 最大音量private int MAX = 15;// 兩個音量矩形最左側之間的間隔private int rectMargen = 15;// 音量矩形高private int rectH = 20;// 音量矩形寬private int recW = 10;// 當前選中的音量private int current = 0;// 最左側音量矩形距離控制項最左側距離private int leftMargen = 0;public VolumeView(Context context) {super(context);init();}public VolumeView(Context context, AttributeSet attrs) {super(context, attrs);init();}public VolumeView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init() {addBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.add);volume = BitmapFactory.decodeResource(getResources(), R.drawable.volume);reduceBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.reduce);leftMargen = volume.getWidth() + reduceBitmap.getWidth();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// 繪製背景顏色paint.setColor(getResources().getColor(R.color.back_color));canvas.drawRect(0, 0, width, height, paint);// 繪製沒有被選中的白色音量矩形paint.setColor(getResources().getColor(R.color.whrite));for (int i = current; i < MAX; i++) {canvas.drawRect(leftMargen + (i + 2) * rectMargen, (height - rectH) / 2, leftMargen + (i + 2) * rectMargen + recW, (height - rectH) / 2 + rectH,paint);}// 繪製被選中的橘黃色音量矩形paint.setColor(getResources().getColor(R.color.orange));for (int i = 0; i < current; i++) {canvas.drawRect(leftMargen + (i + 2) * rectMargen, (height - rectH) / 2, leftMargen + (i + 2) * rectMargen + recW, (height - rectH) / 2 + rectH,paint);}// 繪製音量圖片canvas.drawBitmap(volume, volume.getWidth() / 2, (height - volume.getHeight()) / 2, paint);// 繪製音量減少圖片canvas.drawBitmap(reduceBitmap, reduceBitmap.getWidth() / 2 + volume.getWidth(), (height - reduceBitmap.getHeight()) / 2, paint);// 繪製音量增加圖片canvas.drawBitmap(addBitmap, leftMargen + (MAX + 2) * rectMargen, (height - addBitmap.getHeight()) / 2, paint);}@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:case MotionEvent.ACTION_UP:case MotionEvent.ACTION_MOVE:// 當觸摸位置在音量矩形之內時，擷取當前選中的音量矩形數量if ((event.getX() > leftMargen + rectMargen && event.getX() < leftMargen + (MAX + 1) * rectMargen + recW)&& (event.getY() > (height - rectH) / 2 && event.getY() < (height - rectH) / 2 + rectH)) {current = (int) ((event.getX() - (leftMargen)) / (rectMargen)) - 1;if (onChangeListener != null) {onChangeListener.onChange(current);}Log.d(TAG, "current:" + current);}break;}// 通知介面重新整理invalidate();// 攔截觸摸事件return true;}// 高度父布局要佔用的位置大小@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {setMeasuredDimension(width, height);}public interface OnChangeListener {public void onChange(int count);}private OnChangeListener onChangeListener;public void setOnChangeListener(OnChangeListener onChangeListener) {this.onChangeListener = onChangeListener;}}

通過這個自訂的類，我們就實現了這個音量大小控制項，下面我們看一下使用方法。

在布局檔案中

 <com.wike.volume.VolumeView        android:id="@+id/volumeView"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />

在Activity中調用

view.setOnChangeListener(new OnChangeListener() {@Overridepublic void onChange(int count) {tv.setText("當前音量："+count);}});

我們可以看到，這樣使用起來很方便，但是精度暫時只能達到1的程度，而且現在增減音量的圖片還是擺設，暫時沒什麼功能。如果有高手能幫我改進一下，不勝感激！

上面是圖片資源

下面是顏色值

<?xml version="1.0" encoding="utf-8"?><resources>    <color name="back_color">#b0000000</color>    <color name="whrite">#ffffff</color><color name="orange">#FFB90F</color></resources>