转载请注明出处,谢谢:http://blog.csdn.net/harryweasley/article/details/50164995
自定义一个view,实现水波移动,有进度条的圆环效果,如下图所示:
圆环本身是红色的,进度条是绿色的,水波是蓝色的,中间的数字是绿色的。
本例中用了两个图层,水波图层和圆环进度条图层。关于图层的更多信息,你可以查看:
http://blog.csdn.net/harryweasley/article/details/50132385
其中,水波图层,是放在距离上,下,左,右各10距离的地方,而那空出来的部分来放置,圆环进度条。如下所示:
其中,圆形则代表水波图层,而周围空出来的,则相当于是10距离的间隔。(自己画的图,见谅哈)
现在我讲解,滚动的水波是怎么做出来的,这里我用到了PorterDuff模式,将以下的两个图片混合在一起。
这两个图片以PorterDuff.Mode.DST_IN(取两层绘制交集。显示上层。)的模式混合。关于PorterDuff模式,你可以查看这里:
http://blog.csdn.net/harryweasley/article/details/50132405
注意:这里的水波前后最好保持一致,这样水波在滚动的时候,前后交接会比较平稳
水波的图片高度尽量和圆形图片的高度保持一致,水波图片的宽度可以适量比圆形宽一倍左右。
关于自定义view的,网上有很多的文章,我这里不说的太多。
首先在values目录下建立attrs文件,里面的内容为:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="myCircle">
<attr name="roundColor" format="color"></attr>
<attr name="roundWidth" format="dimension"></attr>
<attr name="textSize" format="dimension"></attr>
<attr name="textColor" format="color"></attr>
<attr name="arcColor" format="color"></attr>
</declare-styleable>
</resources>
之后就是自定义一个类,继承view咯。看代码:
package com.example.mycircledemo;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.view.View;
/**
*
* @author Administrator
*
*/
public class MyCircleProgress extends View {
/**
* 水波移动的速度
*/
private static final int WAVE_TRANS_SPEED = 4;
/**
* 圆环的颜色
*/
private int roundColor;
/**
* 圆环的宽度
*/
private float roundWidth;
/**
* 文字的大小
*/
private float textSize;
/**
* 文字的颜色
*/
private int textColor;
/**
* 圆弧的颜色
*/
private int arcColor;
/**
* 中心点坐标
*/
private int center;
private Paint mBitmapPaint, paint;
/**
* 整个图的高度和宽度
*/
private int mTotalWidth, mTotalHeight;
/**
* 画图波浪的中间间距
*/
private int mCenterX;
/**
* 进度值
*/
private int progress;
/**
* 水波的图片
*/
private Bitmap mSrcBitmap;
/**
* 要绘制的图的那一部分,截取图的对应部分来进行绘制
*/
private Rect mSrcRect;
/**
* 要绘制的位置,该图要绘制的位置
*/
private Rect mDestRect;
private PorterDuffXfermode mPorterDuffXfermode;
/**
* 一个圆圈的图片
*/
private Bitmap mMaskBitmap;
private Rect mMaskSrcRect, mMaskDestRect;
/**
* 当前位置
*/
private int mCurrentPosition;
// 刷新线程,在这里,进行图片的滚动
private RefreshProgressRunnable mRefreshProgressRunnable;
public MyCircleProgress(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initPaint();
initBitmap();
mPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
TypedArray myTypedArray = context.obtainStyledAttributes(attrs,
R.styleable.myCircle);
roundColor = myTypedArray.getColor(R.styleable.myCircle_roundColor,
Color.RED);
roundWidth = myTypedArray.getDimension(R.styleable.myCircle_roundWidth,
10);
textSize = myTypedArray.getDimension(R.styleable.myCircle_textSize, 14);
textColor = myTypedArray.getColor(R.styleable.myCircle_textColor,
Color.GREEN);
arcColor = myTypedArray.getColor(R.styleable.myCircle_arcColor,
Color.GREEN);
myTypedArray.recycle();
}
public MyCircleProgress(Context context) {
this(context, null);
}
public MyCircleProgress(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 从canvas层面去除锯齿
canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
| Paint.FILTER_BITMAP_FLAG));
/*
* 将绘制操作保存到新的图层
*/
int sc = canvas.saveLayer(0, 0, mTotalWidth, mTotalHeight, null,
Canvas.ALL_SAVE_FLAG);
mBitmapPaint.setAntiAlias(true);
// 设定要绘制的波纹部分
mSrcRect.set(mCurrentPosition, 0, mCurrentPosition + mCenterX,
mTotalHeight);
// 通过改变要画的位置的高度,进而改变水波的高度。绘图高度从10到mTotalHeight - 10。总的水波的高度(mTotalWidth - 20)除以100,则是每个progress的高度
mDestRect.set(10, mTotalHeight - 10 - progress * (mTotalWidth - 20)
/ 100, mTotalWidth - 10, mTotalHeight - 10);
// 绘制波纹部分
canvas.drawBitmap(mSrcBitmap, mSrcRect, mDestRect, mBitmapPaint);
// 设置图像的混合模式
mBitmapPaint.setXfermode(mPorterDuffXfermode);
// 绘制遮罩圆
canvas.drawBitmap(mMaskBitmap, mMaskSrcRect, mMaskDestRect,
mBitmapPaint);
// 取消混合模式
mBitmapPaint.setXfermode(null);
canvas.restoreToCount(sc);
// 画最外层的圆环
paint = new Paint();
// 设置空心
paint.setStyle(Paint.Style.STROKE);
// 设置圆环的宽度
paint.setStrokeWidth(roundWidth);
// 设置圆环的颜色
paint.setColor(roundColor);
// 圆环的半径,圆环的半径是内圆的半径
int radius = (int) (center - roundWidth / 2);
canvas.drawCircle(center, center, radius, paint);
// 画圆弧的进度
paint.setColor(arcColor);
paint.setStyle(Paint.Style.STROKE);
//这里+2的原因是,避免有视觉效果上有锯齿
paint.setStrokeWidth(roundWidth+1);
RectF rectF = new RectF(center - radius, center - radius, center
+ radius, center + radius);
//-90是从0点方向开始
canvas.drawArc(rectF, -90, progress * 360 / 100, false, paint);
// 画进度百分比数字
paint.setStrokeWidth(0);
paint.setColor(textColor);
paint.setTextSize(textSize);
String text = progress + "%";
float width = paint.measureText(text);
//将数字写在中间位置
canvas.drawText(text, center - width / 2, center + textSize / 2, paint);
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
mRefreshProgressRunnable = new RefreshProgressRunnable();
post(mRefreshProgressRunnable);
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
removeCallbacks(mRefreshProgressRunnable);
}
private class RefreshProgressRunnable implements Runnable {
public void run() {
synchronized (MyCircleProgress.this) {
// 不断改变绘制的波浪的位置
mCurrentPosition += WAVE_TRANS_SPEED;
if (mCurrentPosition >= mSrcBitmap.getWidth()) {
mCurrentPosition = 0;
}
postInvalidate();
// 16ms更新一次
postDelayed(this, 16);
}
}
}
// 初始化bitmap
private void initBitmap() {
//使用drawable获取的方式,全局只会生成一份,并且系统会进行管理,而BitmapFactory.decode()出来的则decode多少次生成多少张,务必自己进行recycle
mSrcBitmap = ((BitmapDrawable) getResources().getDrawable(
R.drawable.wave)).getBitmap();
mMaskBitmap = ((BitmapDrawable) getResources().getDrawable(
R.drawable.circle_500)).getBitmap();
}
// 初始化画笔paint
private void initPaint() {
mBitmapPaint = new Paint();
// 防抖动
mBitmapPaint.setDither(true);
// 开启图像过滤
mBitmapPaint.setFilterBitmap(true);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mTotalWidth = w;
mTotalHeight = h;
mCenterX = mTotalWidth / 2;
center = w / 2;
mSrcRect = new Rect();
mDestRect = new Rect();
int maskWidth = mMaskBitmap.getWidth();
int maskHeight = mMaskBitmap.getHeight();
mMaskSrcRect = new Rect(0, 0, maskWidth, maskHeight);
mMaskDestRect = new Rect(10, 10, mTotalWidth - 10, mTotalHeight - 10);
}
/**
* 不能在子线程里调用此方法
*
* @param progress
* 进度值
*/
public void setProgress(int progress) {
this.progress = progress;
}
}
代码中,水波的图片在一直左右循环的滚动,造成了水波的滚动效果。
代码中,重写了onAttachedToWindow和onDetachedFromWindow,表示只有在该视图可见的时候,图片才会滚动,节省资源,避免线程一直开启,占用内存。
关于自定义view,其实有必要重写一下onMeasure方法的,因为如果不重写该方法,则该控件不能正常的使用wrap_content,我这里偷了懒,并没有写。关于为什么一定要重写onMeasure,请看这篇文章:
http://blog.csdn.net/harryweasley/article/details/50132435
接下来就是在layout里面引用了:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:circle="http://schemas.android.com/apk/res/com.example.mycircledemo"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.mycircledemo.MainActivity" >
<com.example.mycircledemo.MyCircleProgress
android:id="@+id/progress"
android:layout_width="200dp"
android:layout_height="200dp"
circle:roundWidth="10dp"
circle:textSize="22sp"/>
<SeekBar
android:id="@+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp" />
</RelativeLayout>
xmlns:circle=”http://schemas.android.com/apk/res/com.example.mycircledemo”
后面要写上包名。
最后在MainActivity里面调用即可:
package com.example.mycircledemo;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
public class MainActivity extends Activity {
private SeekBar myBar;
private MyCircleProgress circleProgress;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myBar=(SeekBar) findViewById(R.id.seek_bar);
circleProgress=(MyCircleProgress) findViewById(R.id.progress);
myBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
circleProgress.setProgress(progress);
}
});
}
}
通过seekBar来调节进度。
整个页面效果,如下所示:
代码里已经尽量的注释了很多,如果大家还有什么不清楚的,可以留言哈。
本项目下载路径:
http://download.csdn.net/detail/harryweasley/9324097
本篇博客地址:
http://blog.csdn.net/harryweasley/article/details/50164995
关于图层的更多信息,你可以查看:
http://blog.csdn.net/harryweasley/article/details/50132385
关于PorterDuff模式,你可以查看这里:
http://blog.csdn.net/harryweasley/article/details/50132405
关于为什么一定要重写onMeasure,请看这篇文章:
http://blog.csdn.net/harryweasley/article/details/50132435
本篇博客结束,呼呼~~~~