Android中自定义水球

如图所示：

自定义属性：

在values下创建attrs.xml 文件

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <declare-styleable name="WaveProgressView">

        <attr name="radius" format="dimension|reference" />

        <attr name="radius_color" format="color|reference" />

        <attr name="progress_text_color" format="color|reference" />

        <attr name="progress_text_size" format="dimension|reference" />

        <attr name="progress_color" format="color|reference" />

        <attr name="progress" format="float" />

        <attr name="maxProgress" format="float" />

    </declare-styleable>

</resources>

　样式 styles.xml 中

<style name="WaveProgressViewDefault">

        <item name="radius">55dp</item>

        <item name="progress_text_color">#fff</item>

        <item name="progress_text_size">20sp</item>

        <item name="progress_color">#C215AB30</item>

        <item name="radius_color">#FF734B58</item>

        <item name="progress">0</item>

        <item name="maxProgress">100</item>

    </style>

自定义view

package com.chuanye.shuiqiudemo1;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.graphics.Path;

import android.graphics.PorterDuff;

import android.graphics.PorterDuffXfermode;

import android.os.Parcel;

import android.os.Parcelable;

import android.util.AttributeSet;

import android.util.TypedValue;

import android.view.View;

import java.text.DecimalFormat;

public class WaveProgressView extends View {

    private int radius = dp2px(55);//半径

    private int textColor;//进度字体颜色

    private int textSize;//进度字体大小

    private int progressColor;//进度颜色

    private int radiusColor;

    private Paint textPaint;

    private Paint circlePaint;

    private Paint pathPaint;

    private Bitmap bitmap;

    private Canvas bitmapCanvas;

    private int width = 10, height = 10;

    private int minPadding;

    private float progress;//当前进度

    private float maxProgress;//最大进度

    private Path path = new Path();

    private DecimalFormat df = new DecimalFormat("0.0");

    public WaveProgressView(Context context) {

        this(context, null);

    }

    public WaveProgressView(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }

    public WaveProgressView(Context context, AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.WaveProgressView, defStyleAttr, R.style.WaveProgressViewDefault);

        radius = (int) a.getDimension(R.styleable.WaveProgressView_radius, radius);//半径

        textColor = a.getColor(R.styleable.WaveProgressView_progress_text_color, 0);//进度字体颜色

        textSize = a.getDimensionPixelSize(R.styleable.WaveProgressView_progress_text_size, 0);//进度字体大小

        progressColor = a.getColor(R.styleable.WaveProgressView_progress_color, 0);//进度颜色

        radiusColor = a.getColor(R.styleable.WaveProgressView_radius_color, 0);//半径颜色

        progress = a.getFloat(R.styleable.WaveProgressView_progress, 0);//当前进度

        maxProgress = a.getFloat(R.styleable.WaveProgressView_maxProgress, 100);//最大进度

        a.recycle();//回收利用

        //初始化一些画笔  文本画笔

        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        textPaint.setTextSize(textSize);

        textPaint.setColor(textColor);

        textPaint.setDither(true);

        //圆 画笔

        circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        circlePaint.setColor(radiusColor);

        circlePaint.setDither(true);

        //道路 进度画笔

        pathPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        pathPaint.setColor(progressColor);

        pathPaint.setDither(true);

        //设置转送模式

        pathPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

    }

    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        //计算宽和高

        int exceptW = getPaddingLeft() + getPaddingRight() + 2 * radius;

        int exceptH = getPaddingTop() + getPaddingBottom() + 2 * radius;

        int width = resolveSize(exceptW, widthMeasureSpec);

        int height = resolveSize(exceptH, heightMeasureSpec);

        int min = Math.min(width, height);

        this.width = this.height = min;

        //计算半径,减去padding的最小值

        int minLR = Math.min(getPaddingLeft(), getPaddingRight());

        int minTB = Math.min(getPaddingTop(), getPaddingBottom());

        minPadding = Math.min(minLR, minTB);

        radius = (min - minPadding * 2) / 2;

        setMeasuredDimension(min, min);

    }

    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        if (bitmap == null) {

            bitmap = Bitmap.createBitmap(this.width, this.height, Bitmap.Config.ARGB_8888);

            bitmapCanvas = new Canvas(bitmap);

        }

        bitmapCanvas.save();

        //移动坐标系   转化画布

        bitmapCanvas.translate(minPadding, minPadding);

        //绘制圆

        bitmapCanvas.drawCircle(radius, radius, radius, circlePaint);

        //绘制PATH

        //重置绘制路线

        path.reset();

        float percent = progress * 1.0f / maxProgress;

        float y = (1 - percent) * radius * 2;

        //移动到右上边

        path.moveTo(radius * 2, y);

        //移动到最右下方

        path.lineTo(radius * 2, radius * 2);

        //移动到最左下边

        path.lineTo(0, radius * 2);

        //移动到左上边

        // path.lineTo(0, y);

        //实现左右波动,根据progress来平移

        path.lineTo(-(1 - percent) * radius * 2, y);

        if (progress != 0.0f) {

            //根据直径计算绘制贝赛尔曲线的次数

            int count = radius * 4 / 60;

            //控制-控制点y的坐标

            float point = (1 - percent) * 15;

            for (int i = 0; i < count; i++) {

                path.rQuadTo(15, -point, 30, 0);

                path.rQuadTo(15, point, 30, 0);

            }

        }

        //闭合

        path.close();

        bitmapCanvas.drawPath(path, pathPaint);

        //绘制文字

        String text = progress + "%";

        float textW = textPaint.measureText(text);

        Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();

        float baseLine = radius - (fontMetrics.ascent + fontMetrics.descent) / 2;

        bitmapCanvas.drawText(text, radius - textW / 2, baseLine, textPaint);

        bitmapCanvas.restore();

        canvas.drawBitmap(bitmap, 0, 0, null);

    }

    public float getProgress() {

        return progress;

    }

    public void setProgress(float progress) {

        this.progress = Float.valueOf(df.format(progress));

        invalidate();

    }

    private int dp2px(int dp) {

        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());

    }

    private final static class SavedState extends BaseSavedState {

        float progress;

        public SavedState(Parcel source) {

            super(source);

        }

        public SavedState(Parcelable superState) {

            super(superState);

        }

        public static final Parcelable.Creator<SavedState> CREATOR

                = new Parcelable.Creator<SavedState>() {

            public SavedState createFromParcel(Parcel in) {

                return new SavedState(in);

            }

            public SavedState[] newArray(int size) {

                return new SavedState[size];

            }

        };

    }

    @Override

    protected Parcelable onSaveInstanceState() {

        Parcelable superState = super.onSaveInstanceState();

        SavedState ss = new SavedState(superState);

        ss.progress = progress;

        return ss;

    }

    @Override

    protected void onRestoreInstanceState(Parcelable state) {

        SavedState ss = (SavedState) state;

        super.onRestoreInstanceState(ss.getSuperState());

        setProgress(ss.progress);

    }

}

布局

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:wpv="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:gravity="center_horizontal">

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/btn_main3"

        android:text="开启"

        android:onClick="start"

        tools:ignore="OnClick" />

    <com.chuanye.shuiqiudemo1.WaveProgressView

        android:id="@+id/wpv_0"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:padding="10dp"

        wpv:progress="15" />

    <com.chuanye.shuiqiudemo1.WaveProgressView

        android:id="@+id/wpv_1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        wpv:maxProgress="80"

        wpv:progress_color="#dd65A6DA"

        wpv:progress_text_color="@color/colorAccent"

        wpv:progress_text_size="20sp"

        wpv:radius="60dp"

        wpv:radius_color="#AAffdd33" />

    <com.chuanye.shuiqiudemo1.WaveProgressView

        android:id="@+id/wpv_2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="10dp"

        wpv:maxProgress="120"

        wpv:progress_color="#DC7E2040"

        wpv:progress_text_size="13sp"

        wpv:radius="70dp"

        wpv:radius_color="#7F6B1AB3" />

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/btn_main32"

        android:text="设置值" />

</LinearLayout>

MainActivity 中

package com.chuanye.shuiqiudemo1;

import android.animation.ObjectAnimator;

import android.content.Intent;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.Log;

import android.view.View;

import android.view.animation.AccelerateInterpolator;

import android.view.animation.BounceInterpolator;

import android.view.animation.LinearInterpolator;

import android.widget.Button;

public class Main3Activity extends AppCompatActivity {

    //https://blog.csdn.net/ta893115871/article/details/52245815/

    //private WaveProgressView waveProgressView_0;

    private String TAG = "Main3Activity";

    //private WaveProgressView waveProgressView_1;

    //private WaveProgressView waveProgressView_2;

    private WaveProgressView waveProgressView_0, waveProgressView_1, waveProgressView_2;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main3);

        Log.i(TAG,"onCreate...");

        waveProgressView_0 = (WaveProgressView) findViewById(R.id.wpv_0);

        waveProgressView_1 = (WaveProgressView) findViewById(R.id.wpv_1);

        waveProgressView_2 = (WaveProgressView) findViewById(R.id.wpv_2);

        Button btn_main32 = findViewById(R.id.btn_main32);

        btn_main32.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                waveProgressView_0.setProgress(85);

            }

        });

    }

    public void start(View view) {

        ObjectAnimator objectAnimator0 = ObjectAnimator.ofFloat(waveProgressView_0, "progress", 0f, 100f);

        objectAnimator0.setDuration(3300);

        objectAnimator0.setInterpolator(new LinearInterpolator());

        objectAnimator0.start();

        ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(waveProgressView_1, "progress", 0f, 80f);

        objectAnimator1.setDuration(3000);

        objectAnimator1.setInterpolator(new AccelerateInterpolator());

        objectAnimator1.start();

        ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(waveProgressView_2, "progress", 0f, 120f);

        objectAnimator2.setDuration(5000);

        objectAnimator2.setInterpolator(new BounceInterpolator());

        objectAnimator2.start();

    }

}

完成

巴特西

Android中自定义水球

最新文章

热门文章