本篇主要记录我学习自定义view时的一个demo。初步完成效果如下：
音量控制效果图
-
首先，在attr中定义好需要在xml中定义的属性：
<attr name="firstColor" format="color"/>
<attr name="secondColor" format="color"/>
<attr name="background" format="reference"/>
<attr name="circleWidth" format="dimension"/>
<attr name="dotCount" format="integer"/>
<attr name="splitSize" format="integer"/>
<declare-styleable name="MyVoiceControlView">
<attr name="firstColor"/>
<attr name="secondColor"/>
<attr name="background"/>
<attr name="circleWidth"/>
<attr name="dotCount"/>
<attr name="splitSize"/>
</declare-styleable>
######为什么要把属性抽出来在外面写？ 我也是和大神学的，这样的写法可以类比成员变量的用法。
******
* ####然后，创建一个View的子类，继承它的构造方法，并在构造方法中获取xml中定义的属性值:
一般使用三参构造器，如果需要使用单参的，可以通过this调三参的方法来实现。
<pre>
public MyVoiceControlView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyVoiceControlView, 0, defStyleAttr);
for (int i = 0; i < typedArray.getIndexCount(); i++) {
int attr = typedArray.getIndex(i);
switch (attr) {
case R.styleable.MyVoiceControlView_firstColor:
mFirstColor = typedArray.getColor(attr, Color.BLACK);//默认颜色、底色
break;
case R.styleable.MyVoiceControlView_secondColor:
mSecondColor = typedArray.getColor(attr, Color.WHITE);//选中后的颜色
break;
case R.styleable.MyVoiceControlView_background://中心的喇叭图片，等下会绘制出来
mImage = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(attr, 0));
break;
case R.styleable.MyVoiceControlView_dotCount:
mDotCount = typedArray.getInteger(attr, 10);//点的数量
break;
case R.styleable.MyVoiceControlView_circleWidth:
mCircleWidth = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_PX, 16, getResources().getDisplayMetrics()
));//这里是将xml中定义的dimension类型转化为可以绘制的px属性，默认设置16
break;
case R.styleable.MyVoiceControlView_splitSize:
mSplitSize = typedArray.getInteger(attr, 20);//这个属性是 点之间间隙的大小，默认20
break;
}
}
typedArray.recycle();
mPaint = new Paint();
mPaint.setAntiAlias(true);//抗锯齿
mRect = new Rect();
}
</pre>
* ####为简单起见，就直接onDraw()了，这里略掉onMeasure()步骤，代码中View的尺寸写死就行
- onDraw很简单，将中心图片画出来后，再用for循环画出外圈的点（其实是strokeCap为Round的弧线实现的）
<pre>
mPaint.setStrokeWidth(mCircleWidth);
mPaint.setStrokeCap(Paint.Cap.ROUND);//线段的断点形状为round
mPaint.setStyle(Paint.Style.STROKE);
int center = getWidth() / 2;
//根据需要画的个数以及间隙计算每个块块所占的比例*240,不画整圆了这里
float itemSize = (240 * 1.0f - (mDotCount - 1) * mSplitSize) / mDotCount;
// 用于定义的圆弧的形状和大小的界限的rectf
RectF oval = new RectF(mCircleWidth / 2, mCircleWidth / 2,
getWidth() - mCircleWidth / 2, getWidth() - mCircleWidth / 2);
mPaint.setColor(mFirstColor); // 设置圆环的颜色
for (int i = 0; i < mDotCount; i++) {
canvas.drawArc(oval, i * (itemSize + mSplitSize) + 150, itemSize, false, mPaint); // 根据进度画圆弧
}
mPaint.setColor(mSecondColor); // 设置圆环的颜色
// 根据进度绘制圆弧
for (int i = 0; i < mCurrentCount; i++) {
canvas.drawArc(oval, i * (itemSize + mSplitSize) + 150, itemSize, false, mPaint);
}
int r = center - mCircleWidth;
mRect.left = (int) ((1 - Math.sqrt(2) / 2) * r + mCircleWidth);
mRect.top = (int) ((1 - Math.sqrt(2) / 2) * r + mCircleWidth);
mRect.right = (int) ((1 + Math.sqrt(2) / 2) * r + mCircleWidth);
mRect.bottom = (int) ((1 + Math.sqrt(2) / 2) * r + mCircleWidth);
//如果图片的尺寸过小，无法与外圆相交，就使用它本来的尺寸
if (mImage.getWidth() < Math.sqrt(2) * r) {
mRect.left = r + mCircleWidth - mImage.getWidth() / 2;
mRect.right = mRect.left + mImage.getWidth();
mRect.top = r + mCircleWidth - mImage.getWidth() / 2;
mRect.bottom = mRect.top + mImage.getWidth();
}
canvas.drawBitmap(mImage, null, mRect, mPaint);
</pre>
这时，绘制出来的效果基本可以展示了
UI界面的xml中调用这个view:(注意先声明命名空间)
<pre>
<com.ec.vone.view.MyVoiceControlView
android:layout_width="100dp"
android:layout_height="100dp"
android:visibility="visible"
custom:background="@drawable/dududu"
custom:circleWidth="10dp"
custom:dotCount="10"
custom:firstColor="@color/color_bg_1"
custom:secondColor="@color/current"
custom:splitSize="20"
android:id="@+id/myVoiceControlView" />
</pre>
中心的图片是as中生成的，不用去烦你的美工MM或者抠半天图了。
* 到这里，可以直接在这个类中添加set和get方法，动态设置就可以收工了，如果想实现一点交互，就可以重写onTouchEvent()：
<code>
@Override
public boolean onTouchEvent(MotionEvent event) {
//用来判断滑动距离是这个距离的多少倍。 乘3只是为了达到更好的控制效果，这个自定义即可
float moveLength = getHeight() / (mDotCount *3 );
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
xLast = (int) event.getX();
yLast = (int) event.getY();
break;
case MotionEvent.ACTION_UP:
break;
case MotionEvent.ACTION_MOVE:
//x轴方向move事件
int xCurrent = (int) event.getX() - xLast;
int moveCountX = (int) (xCurrent / moveLength);
if (xCurrent > 0) {//——→滑
if (moveCountX > 1) {
up(); //自定义的方法
xLast = (int) event.getX();
}
} else if (xCurrent < 0) {//下滑
if (moveCountX < -1) {
down();//自定义的方法
xLast = (int) event.getX();
}
}
//y轴方向move事件
int yCurrent = (int) (event.getY() - yLast);
int moveCountY = (int) (yCurrent / moveLength);
if (yCurrent > 0) {//↓滑
if (moveCountY > 1) {
down();
yLast = (int) event.getY();
}
} else if (yCurrent < -1) {
if (yCurrent < -1) {
up();
yLast = (int) event.getY();
}
}
break;
}
return true;
}
</code>
up() 和 down()方法
<pre>
public void up() {
if (mCurrentCount < mDotCount)
mCurrentCount++;
postInvalidate();
}
public void down() {
if (mCurrentCount >= 1)
mCurrentCount--;
postInvalidate();
}
</pre>
这里我设置的是向→ 或者 ↑ 都是增加音量，反之减小。
这些也是自己照着大神的demo练习的，有很多地方不一定适用，大伙看看就行，欢迎指正。
[具体代码点击这里查看](https://github.com/TrueHub/SomeView)