Android畫圓環，水波移動的效果

轉載請註明出處，謝謝：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

本篇博客結束，呼呼~~~~