android自定义View之(三)------视频音量调控样例
通过android自定义View之(一)------基本篇，我们学习了如何画一些基本的图形，android自定义View之(二)------简单进度条显示样例篇，我们明白了如何自定义一个view。这个文章，我打算参考《Android 自定义View (四) 视频音量调控》，明白一个音量调控控件是如何实现的。
1.onMeasure方法的说明：
在做这个之前，我们还要讲一个自定义view中的重要的一个方法(onMeasure)方法：
默认onMeasure方法：
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
当我们阅读《Android 自定义View (一)》和《Android 自定义View (二) 进阶》，我们会知道在重写onMeasure方法时，对于view的高和宽有三种情况：match_parent, wrap_content,xxx(详细值)。这对应了MeasureSpec的specMode三种类型：
EXACTLY：一般是设置了明确的值或者是MATCH_PARENT
AT_MOST：表示子布局限制在一个最大值内，一般为WARP_CONTENT
UNSPECIFIED：表示子布局想要多大就多大，很少使用
当我们设置明确的宽度和高度时，系统帮我们测量的结果就是我们设置的结果，当我们设置为WRAP_CONTENT,或者MATCH_PARENT系统帮我们测量的结果就是MATCH_PARENT的长度。所以，当设置了WRAP_CONTENT时，我们需要自己进行测量，即重写onMeasure方法”。
重写onMeasure方法，有几个方法比较重要：参考下面的方法，我们可以
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width;
int height ;
if (widthMode == MeasureSpec.EXACTLY)
{
width = widthSize;
}
确定view的宽和高：
setMeasuredDimension(width, height);
2.postInvalidate()和invalidate()
view的更新界面有两组方法，一组是invalidate，另一组是postInvalidate，其中前者是在UI线程自身中使用，而后者在非UI线程中使用。
3.视频音量调控样例
3.1 效果图
3.2 \res\values\attrs_custom_volum_control_bar.xml
<resources>
<attr name="firstColor" format="color" />
<attr name="secondColor" format="color" />
<attr name="circleWidth" format="dimension" />
<attr name="dotCount" format="integer" />
<attr name="currentCount" format="integer" />
<attr name="splitSize" format="integer" />
<attr name="bg" format="reference"></attr>
<declare-styleable name="CustomVolumControlBar">
<attr name="firstColor" />
<attr name="secondColor" />
<attr name="circleWidth" />
<attr name="dotCount" />
<attr name="currentCount" />
<attr name="splitSize" />
<attr name="bg" />
</declare-styleable>
</resources>
3.3 CustomVolumControlBar.java
package com.example.administrator.customview.customview03;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;
import com.example.administrator.customview.R;
public class CustomVolumControlBar extends View {
public static final String TAG = "CustomVolumControlBar";
private int mFirstColor;
private int mSecondColor;
private int mCircleWidth;
private int mCount;
private int mCurrentCount;
private int mSplitSize;
private Bitmap mImage;
private Paint mPaint;
private Rect mRect;
private int xDown, xUp;
public CustomVolumControlBar(Context context) {
super(context);
init(null, 0);
}
public CustomVolumControlBar(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs, 0);
}
public CustomVolumControlBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs, defStyle);
}
private void init(AttributeSet attrs, int defStyle) {
// Load attributes
final TypedArray a = getContext().obtainStyledAttributes(
attrs, R.styleable.CustomVolumControlBar, defStyle, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++)
{
int attr = a.getIndex(i);
switch (attr)
{
case R.styleable.CustomVolumControlBar_firstColor:
mFirstColor = a.getColor(attr, Color.GREEN);
break;
case R.styleable.CustomVolumControlBar_secondColor:
mSecondColor = a.getColor(attr, Color.CYAN);
break;
case R.styleable.CustomVolumControlBar_bg:
mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
break;
case R.styleable.CustomVolumControlBar_circleWidth:
mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomVolumControlBar_dotCount:
mCount = a.getInt(attr, 10);
break;
case R.styleable.CustomVolumControlBar_currentCount:
mCurrentCount = a.getInt(attr, 5);
break;
case R.styleable.CustomVolumControlBar_splitSize:
mSplitSize = a.getInt(attr, 20);
break;
}
}
a.recycle();
mPaint = new Paint();
mRect = new Rect();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(mCircleWidth);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
int centre = getWidth() / 2;
int radius = centre - mCircleWidth / 2;
drawOval(canvas, centre, radius);
int relRadius = radius - mCircleWidth / 2;
mRect.left = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;
mRect.top = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;
mRect.bottom = (int) (mRect.left + Math.sqrt(2) * relRadius);
mRect.right = (int) (mRect.left + Math.sqrt(2) * relRadius);
if (mImage.getWidth() < Math.sqrt(2) * relRadius)
{
mRect.left = (int) (mRect.left + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getWidth() * 1.0f / 2);
mRect.top = (int) (mRect.top + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getHeight() * 1.0f / 2);
mRect.right = (int) (mRect.left + mImage.getWidth());
mRect.bottom = (int) (mRect.top + mImage.getHeight());
}
canvas.drawBitmap(mImage, null, mRect, mPaint);
}
private void drawOval(Canvas canvas, int centre, int radius) {
float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount;
RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius);
mPaint.setColor(mFirstColor);
for (int i = 0; i < mCount; i++)
{
canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint);
}
mPaint.setColor(mSecondColor);
for (int i = 0; i < mCurrentCount; i++)
{
canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
xDown = (int) event.getY();
break;
case MotionEvent.ACTION_UP:
xUp = (int) event.getY();
if (xUp > xDown)
{
down();
} else
{
up();
}
break;
}
return true;
}
public void up()
{
if(mCurrentCount < mCount){
mCurrentCount++;
postInvalidate();
}
}
public void down()
{
if(mCurrentCount > 0){
mCurrentCount--;
postInvalidate();
}
}
public int getCurrentCount() {
return mCurrentCount;
}
public void setCurrentCount(int mCurrentCount) {
if(mCurrentCount > this.mCount){
this.mCurrentCount = mCount;
}else if(mCurrentCount < 0){
this.mCurrentCount = 0;
}else{
this.mCurrentCount = mCurrentCount;
}
postInvalidate();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
3.4 \res\layout\activity_custom_view_activity3.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="com.example.administrator.customview.customview03.CustomViewActivity3">
<com.example.administrator.customview.customview03.CustomVolumControlBar
android:id="@+id/customVolumControlBar01"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerHorizontal="true"
android:background="#4b4534"
app:firstColor="#fbfbfb"
app:secondColor="#22211a"
app:circleWidth="20dp"
app:dotCount="10"
app:currentCount="6"
app:splitSize="40"
app:bg="@drawable/ic_lock_ringer_on"
/>
<com.example.administrator.customview.customview03.CustomVolumControlBar
android:id="@+id/customVolumControlBar02"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:layout_below="@+id/customVolumControlBar01"
android:background="#4b4534"
app:firstColor="#fbfbfb"
app:secondColor="#22211a"
app:circleWidth="10dp"
app:dotCount="6"
app:currentCount="4"
app:splitSize="40"
app:bg="@drawable/clock_dial"
/>
</RelativeLayout>
3.5 CustomViewActivity3.java
package com.example.administrator.customview.customview03;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import com.example.administrator.customview.R;
public class CustomViewActivity3 extends ActionBarActivity {
public static final String TAG = "CustomVolumControlBar";
private CustomVolumControlBar customVolumControlBar01;
private CustomVolumControlBar customVolumControlBar02;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_custom_view_activity3);
init();
}
private void init() {
customVolumControlBar01 = (CustomVolumControlBar) findViewById(R.id.customVolumControlBar01);
customVolumControlBar02 = (CustomVolumControlBar) findViewById(R.id.customVolumControlBar02);
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
switch (keyCode) {
case KeyEvent.KEYCODE_VOLUME_DOWN:
Log.i(TAG,"KEYCODE_VOLUME_DOWN");
customVolumControlBar01.down();
customVolumControlBar02.down();
return true;
case KeyEvent.KEYCODE_VOLUME_UP:
customVolumControlBar01.up();
customVolumControlBar02.up();
return true;
}
return super.onKeyDown(keyCode, event);
}
}
参考资料：
1.Android 自定义View (一)
http://blog.csdn.net/lmj623565791/article/details/24252901
2.Android 自定义View (二) 进阶
http://blog.csdn.net/lmj623565791/article/details/24300125
3.Android 自定义View (三) 圆环交替 等待效果
http://blog.csdn.net/lmj623565791/article/details/24500107
4.Android 自定义View (四) 视频音量调控
http://blog.csdn.net/lmj623565791/article/details/24529807