Android RadialGradient 放射渲染

前言

不知不覺,春分已過兩天。萬物復甦,居住附近的看桃花也開豔了,路邊的垂柳,也綠了。怎奈,這兩天天氣忽變,有了一些倒春寒的感覺,好冷。近幾偶然聽聞,同事裁員,願2019一切順利。

RadialGradient 說明

類繼承關係

在這裏插入圖片描述

構造函數

 public RadialGradient(float centerX, float centerY, float radius,
            @ColorInt int centerColor, @ColorInt int edgeColor, @NonNull TileMode tileMode) 
  1. (centerX,centerY)圓心x,y座標點。
  2. radius 渲染半徑。
  3. centerColor 渲染圓心顏色。
  4. engeColor 渲染圓邊緣顏色。
  5. tileMode 平鋪模式(重複,鏡像,邊緣拉伸)
  public RadialGradient(float centerX, float centerY, float radius,
            @NonNull @ColorInt int colors[], @Nullable float stops[],
            @NonNull TileMode tileMode)

該構造函數和上個構造函數區別

  1. colors[] 顏色數組,至少兩個元素,可設置放射渲染的多種過度顏色。
  2. stops[] 數組和顏色數組對應,設置各個顏色的渲染起始位置。可以爲null(顏色均分)。

代碼示例

基本使用

package com.xol.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by wwzhang on 2019/3/22
 */
public class RadialGradientView extends View {
    private Paint mPaint;
    private Shader mShader;
    private int[] mColorTwo;
    private int[] mColorThree;


    public RadialGradientView(Context context) {
        super(context);
    }

    public RadialGradientView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public RadialGradientView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mColorThree = new int[]{
                Color.parseColor("#ff0000"),
                Color.parseColor("#00ff00"),
                Color.parseColor("#0000ff")};
        mColorTwo = new int[]{Color.parseColor("#ff0000"),
                Color.parseColor("#0000ff")};

    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //第一排 兩色
        mShader = new RadialGradient(200, 200, 40, mColorTwo[0], mColorTwo[1], Shader.TileMode.REPEAT);
        mPaint.setShader(mShader);
        canvas.drawCircle(200, 200, 150, mPaint);

        mShader = new RadialGradient(500, 200, 40, mColorTwo[0], mColorTwo[1], Shader.TileMode.CLAMP);
        mPaint.setShader(mShader);
        canvas.drawCircle(500, 200, 150, mPaint);

        mShader = new RadialGradient(800, 200, 40, mColorTwo[0], mColorTwo[1], Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawCircle(800, 200, 150, mPaint);

        //第二排 三色
        mShader = new RadialGradient(200, 500, 40,
                mColorThree,new float[]{0.0f,0.5f,1.0f},Shader.TileMode.REPEAT);
        mPaint.setShader(mShader);
        canvas.drawCircle(200, 500, 150, mPaint);

        mShader = new RadialGradient(500, 500, 40,
                mColorThree,new float[]{0.0f,0.5f,1.0f},Shader.TileMode.CLAMP);
        mPaint.setShader(mShader);
        canvas.drawCircle(500, 500, 150, mPaint);

        mShader = new RadialGradient(800, 500, 40,
                mColorThree,new float[]{0.0f,0.5f,1.0f},Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawCircle(800, 500, 150, mPaint);

        //第三排 三色改變渲染色起點位置
        mShader = new RadialGradient(200, 800, 40,
                mColorThree,new float[]{0.5f,0.75f,1.0f},Shader.TileMode.REPEAT);
        mPaint.setShader(mShader);
        canvas.drawCircle(200, 800, 150, mPaint);

        mShader = new RadialGradient(500, 800, 40,
                mColorThree,new float[]{0.5f,0.75f,1.0f},Shader.TileMode.CLAMP);
        mPaint.setShader(mShader);
        canvas.drawCircle(500, 800, 150, mPaint);

        mShader = new RadialGradient(800, 800, 40,
                mColorThree,new float[]{0.5f,0.75f,1.0f},Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawCircle(800, 800, 150, mPaint);
        //第四排 三色改變,修改渲染座標
        mShader = new RadialGradient(50, 1100, 40,
                mColorThree,new float[]{0.0f,0.5f,1.0f},Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawCircle(200, 1100, 150, mPaint);

        mShader = new RadialGradient(500, 950, 40,
                mColorThree,new float[]{0.0f,0.5f,1.0f},Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawCircle(500, 1100, 150, mPaint);

        mShader = new RadialGradient(950, 1100, 40,
                mColorThree,new float[]{0.0f,0.5f,1.0f},Shader.TileMode.MIRROR);
        mPaint.setShader(mShader);
        canvas.drawCircle(800, 1100, 150, mPaint);

    }


}

佈局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.xol.widget.RadialGradientView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

波紋點擊效果

package com.xol.widget;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.support.v7.widget.AppCompatButton;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 * Created by wwzhang on 2019/3/24
 */
public class RippleButtonView extends AppCompatButton {
    private Paint mPaint;
    private static final int DEFAULT_RADIUS = 50;
    private int mDuration = 500;
    private int radius;
    private int mColorTwo[];
    private Shader mShader;
    private int mCenterX, mCenterY;
    private ObjectAnimator mObjectAnimator;


    public RippleButtonView(Context context) {
        super(context);
    }

    public RippleButtonView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public RippleButtonView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    {
        mCenterX = -1;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mColorTwo = new int[]{Color.parseColor("#0000ff00")
                , Color.parseColor("#ff00ff00")};
    }

    public void setRadius(int radius) {
        this.radius = radius;
        mShader = new RadialGradient(mCenterX, mCenterY, this.radius + 1, mColorTwo[0],
                mColorTwo[1], Shader.TileMode.CLAMP);
        mPaint.setShader(mShader);
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mObjectAnimator == null) {
            mObjectAnimator = ObjectAnimator.ofInt(this, "radius",
                    DEFAULT_RADIUS, getMeasuredWidth());
            mObjectAnimator.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    setRadius(0);
                }
            });
            mObjectAnimator.setDuration(mDuration);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (mCenterX != (int) event.getX()) {
            mCenterX = (int) event.getX();
            mCenterY = (int) event.getY();
            setRadius(DEFAULT_RADIUS);
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                return true;
            case MotionEvent.ACTION_UP:
                if (mObjectAnimator.isStarted()) {
                    mObjectAnimator.cancel();
                } else {
                    mObjectAnimator.start();
                }
                break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mShader != null) {
            canvas.drawCircle(mCenterX, mCenterY,
                    radius, mPaint);
        }
    }
}

佈局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.xol.widget.RippleButtonView
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="200dp" />
</FrameLayout>

運行效果

在這裏插入圖片描述
希望對您有所幫助!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章