Android 自定义View-时尚仪表盘
今天的效果图如下(左边是ui图 右边是实现图):
自我感觉总体效果还不错,至少大概画得一样了。上一个动态图:
其实这个效果实现起来也不是很难,就是计算坐标,弧度之类的可能会比较麻烦,这里分享写这个其中一张手稿,请无视掉很丑的字,其实做自定义view 还是要在纸上多画。所以希望大家也能这么画画,思路会很顺。
好的了,废话不多说,快开始。
首先自定义属性 构造函数,测量什么的 你肯定已经很熟练 直接贴代码了,注释写的很清楚
- public class PanelView extends View {
- private int mWidth;
- private int mHeight;
- private int mPercent;
- //刻度宽度
- private float mTikeWidth;
- //第二个弧的宽度
- private int mScendArcWidth;
- //最小圆的半径
- private int mMinCircleRadius;
- //文字矩形的宽
- private int mRectWidth;
- //文字矩形的高
- private int mRectHeight;
- //文字内容
- private String mText = "";
- //文字的大小
- private int mTextSize;
- //设置文字颜色
- private int mTextColor;
- private int mArcColor;
- //小圆和指针颜色
- private int mMinCircleColor;
- //刻度的个数
- private int mTikeCount;
- private Context mContext;
- public PanelView(Context context) {
- this(context, null);
- }
- public PanelView(Context context, AttributeSet attrs) {
- this(context, attrs, 0);
- }
- public PanelView(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr);
- mContext = context;
- TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.PanelView,defStyleAttr,0);
- mArcColor = a.getColor(R.styleable.PanelView_arcColor, Color.parseColor("#5FB1ED"));
- mMinCircleColor = a.getColor(R.styleable.PanelView_pointerColor,Color.parseColor("#C9DEEE"));
- mTikeCount = a.getInt(R.styleable.PanelView_tikeCount,12);
- mTextSize = a.getDimensionPixelSize(PxUtils.spToPx(R.styleable.PanelView_android_textSize,mContext),24);
- mText = a.getString(R.styleable.PanelView_android_text);
- mScendArcWidth = 50;
- }
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- int widthSize = MeasureSpec.getSize(widthMeasureSpec);
- int widthMode = MeasureSpec.getMode(widthMeasureSpec);
- int heightSize = MeasureSpec.getSize(heightMeasureSpec);
- int heightMode = MeasureSpec.getMode(heightMeasureSpec);
- if (widthMode == MeasureSpec.EXACTLY) {
- mWidth = widthSize;
- }else {
- mWidth = PxUtils.dpToPx(200,mContext);
- }
- if (heightMode == MeasureSpec.EXACTLY) {
- mHeight = heightSize;
- }else {
- mHeight = PxUtils.dpToPx(200,mContext);
- }
- Log.e("wing",mWidth+"");
- setMeasuredDimension(mWidth, mHeight);
- }
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <declare-styleable name="PanelView">
- <attr name="arcColor" format="color"/>
- <attr name="arcWidth" format="dimension"/>
- <attr name="android:text"/>
- <attr name="tikeCount" format="integer"/>
- <attr name="pointerColor" format="color"/>
- <attr name="android:textSize"/>
- </declare-styleable>
- </resources>
之后来重头戏,也就是绘制。就像画画一样,再复杂的view也是一笔一笔画出来的。所以我们把这个view分解。
大概分解成如下:1.最外面的弧 2.里面的粗弧 3.中间小圆 4.最小的圆 5.刻度 6.指针 7.矩形 8.文字
相信让你分开画一定难不倒你。那组合在一起 就是这个view啦。下面开始我们的ondraw()
按照这个分解来:
1.绘制最外面的弧 这里需要注意的一点是,如果想让这个圆在view里 记得减去画笔宽度的一半 因为半径是从圆心到画笔宽度的中间算的,所以这里画弧的矩形是 new RectF(strokeWidth, strokeWidth, mWidth - strokeWidth, mHeight - strokeWidth)
- Paint p = new Paint();
- int strokeWidth = 3;
- p.setStrokeWidth(strokeWidth);
- p.setAntiAlias(true);
- p.setStyle(Paint.Style.STROKE);
- p.setColor(mArcColor);
- //最外面线条
- canvas.drawArc(new RectF(strokeWidth, strokeWidth, mWidth - strokeWidth, mHeight - strokeWidth), 145, 250, false, p);
画出来是这样的效果。
2.绘制里面的粗弧,这里比较麻烦的就是需要分为四段,看图:
因为大圆和里面粗弧的长短不一致,这里使用百分比来计算 所以会造成指针偏差,那么这里把 1、2两个部分固定来画,然后是3 充满的部分,用百分比来计算需要画多少度,最后是4 空白的部分。
首先把粗弧的矩形画出来,这里固定了比大弧半径少50(这里其实可以改进,你可以改成动态的让他更灵活),然后计算出百分比。
- RectF secondRectF = new RectF(strokeWidth + 50, strokeWidth + 50, mWidth - strokeWidth - 50, mHeight - strokeWidth - 50);
- float secondRectWidth = mWidth - strokeWidth - 50 - (strokeWidth + 50);
- float secondRectHeight = mHeight - strokeWidth - 50 - (strokeWidth + 50);
- float percent = mPercent / 100f;
接下来绘制1弧,先算出fill充满部分的度数,因为是突出的,所以如果百分比为0,突出左端为白色 如果不为零,则和充满颜色统一。
- //充满的圆弧的度数 -5是大小弧的偏差
- float fill = 250 * percent ;
- //空的圆弧的度数
- float empty = 250 - fill;
- // Log.e("wing", fill + "");
- if(percent==0){
- p.setColor(Color.WHITE);
- }
- //画粗弧突出部分左端
- canvas.drawArc(secondRectF,135,11,false,p);
然后绘制2弧 也就是fill充满的弧,
- canvas.drawArc(secondRectF, 145, fill, false, p);
接下来是3弧,也就是empty未充满的弧,是白色的
- p.setColor(Color.WHITE);
- //画弧胡的未充满部分
- canvas.drawArc(secondRectF, 145 + fill, empty, false, p);
最后,画出右边突出的4弧, 如果百分比为100 那么和充满的颜色一致,否则为白色
- //画粗弧突出部分右端
- if(percent == 1){
- p.setColor(mArcColor);
- }
- canvas.drawArc(secondRectF,144+fill+empty,10,false,p);
这样粗弧也就画完了 来看看效果,就画了两条弧线(实际是5条),就成型了。
3.中间的小圆外圈,他的圆心不用多说 是整个view的中心
- p.setColor(mArcColor);
- //绘制小圆外圈
- p.setStrokeWidth(3);
- canvas.drawCircle(mWidth / 2, mHeight / 2, 30, p);
4.绘制内圆,圆心一样的,半径和画笔粗度改变一下
- //绘制小圆内圈
- p.setColor(mMinCircleColor);
- p.setStrokeWidth(8);
- mMinCircleRadius = 15;
- canvas.drawCircle(mWidth / 2, mHeight / 2, mMinCircleRadius, p);
5.刻度 刻度处理起来可能比较麻烦,用三角函数算坐标啊 循环画出来。。 这里提供一种比较简单的方法:旋转画布。
首先引入一个概念,什么叫旋转画布呢,就是把你的画布旋转。。经过测试,旋转以后,整个坐标轴都会对应旋转,一张图举例说明下。
大概就是这个意思,画布旋转之后 坐标系也就旋转了,但是原来的图像还在,所以说你比如这个点 x,y旋转前在这个位置, 那么旋转后就是另外一个位置了,但是他们的坐标是相同的。 所以刻度也可以考这种方法画。我们只要画出最顶端的刻度 然后旋转就可以了。
绘制第一段刻度, 然后总共是250的弧度 计算出每个刻度的度数 用250除以刻度数mTikeCount,就是每次旋转的度数。接下来把画布逐步旋转,按照原坐标绘制,即可绘制出右半部分刻度。 注意:为了让之后的绘制正常,务必把画布转回原来的位置
- //绘制刻度!
- p.setColor(mArcColor);
- //绘制第一条最上面的刻度
- mTikeWidth = 20;
- p.setStrokeWidth(3);
- canvas.drawLine(mWidth / 2, 0, mWidth / 2, mTikeWidth, p);
- //旋转的角度
- float rAngle = 250f / mTikeCount;
- //通过旋转画布 绘制右面的刻度
- for (int i = 0; i < mTikeCount / 2; i++) {
- canvas.rotate(rAngle, mWidth / 2, mHeight / 2);
- canvas.drawLine(mWidth / 2, 0, mWidth / 2, mTikeWidth, p);
- }
- //现在需要将将画布旋转回来
- canvas.rotate(-rAngle * mTikeCount / 2, mWidth / 2, mHeight / 2);
左半部分同理,需要改变的度数为负 就好了
- //通过旋转画布 绘制左面的刻度
- for (int i = 0; i < mTikeCount / 2; i++) {
- canvas.rotate(-rAngle, mWidth / 2, mHeight / 2);
- canvas.drawLine(mWidth / 2, 0, mWidth / 2, mTikeWidth, p);
- }
- //现在需要将将画布旋转回来
- canvas.rotate(rAngle * mTikeCount / 2, mWidth / 2, mHeight / 2);
6.指针 指针的绘制和刻度相似,先算出来百分比所占的度数 然后根据 是否大于50%来旋转画布。
指针的起终点是 总view高度的一半 粗弧矩形的一半 加上小圆,前面坐标讲解了那么,这个也一样,自己拿起笔算一算。
注意这里画布旋转我通过计算得出一个公式 250 * percent - 250/2。
如果小于50% 则为负 如果大于50%则为正,然后进行旋转。
切忌最后一定要将画布转回来。
- //绘制指针
- p.setColor(mMinCircleColor);
- p.setStrokeWidth(4);
- //按照百分比绘制刻度
- canvas.rotate(( 250 * percent - 250/2), mWidth / 2, mHeight / 2);
- canvas.drawLine(mWidth / 2, (mHeight / 2 - secondRectHeight / 2) + mScendArcWidth / 2 + 2, mWidth / 2, mHeight / 2 - mMinCircleRadius, p);
- //将画布旋转回来
- canvas.rotate(-( 250 * percent - 250/2), mWidth / 2, mHeight / 2);
接下来就是画矩形和文字。没什么好说的了,坐标也是X周围mWidth/2 y轴自己根据圆心微调一个距离
- //绘制矩形
- p.setStyle(Paint.Style.FILL);
- p.setColor(mArcColor);
- mRectWidth = 60;
- mRectHeight = 25;
- //文字矩形的最底部坐标
- float rectBottomY = mHeight/2 + secondRectHeight/3+mRectHeight;
- canvas.drawRect(mWidth/2-mRectWidth/2,mHeight/2 + secondRectHeight/3,mWidth/2+mRectWidth/2,rectBottomY,p);
- p.setTextSize(mTextSize);
- mTextColor = Color.WHITE;
- p.setColor(mTextColor);
- float txtLength = p.measureText(mText);
- canvas.drawText(mText,(mWidth-txtLength)/2,rectBottomY + 40,p);
- super.onDraw(canvas);
下面要做的就是为了方便使用者,提供一些设置属性的方法。
- /**
- * 设置百分比
- * @param percent
- */
- public void setPercent(int percent) {
- mPercent = percent;
- invalidate();
- }
- /**
- * 设置文字
- * @param text
- */
- public void setText(String text){
- mText = text;
- invalidate();
- }
- /**
- * 设置圆弧颜色
- * @param color
- */
- public void setArcColor(int color){
- mArcColor = color;
- invalidate();
- }
- /**
- * 设置指针颜色
- * @param color
- */
- public void setPointerColor(int color){
- mMinCircleColor = color;
- invalidate();
- }
- /**
- * 设置文字大小
- * @param size
- */
- public void setTextSize(int size){
- mTextSize = size;
- invalidate();
- }
- /**
- * 设置粗弧的宽度
- * @param width
- */
- public void setArcWidth(int width){
- mScendArcWidth = width;
- invalidate();
- }
一个看似复杂的view 经过我们一步一步绘制遍完成了。
原文请参考:http://blog.****.net/wingichoy/article/details/50468674