如何利用Android實(shí)現(xiàn)比較炫酷的自定義View

本篇內(nèi)容主要講解“如何利用Android實(shí)現(xiàn)比較炫酷的自定義View”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何利用Android實(shí)現(xiàn)比較炫酷的自定義View”吧!

目錄

• 一、背景
  

• 1.1、控件效果
  

• 1.2、從功能上分析一下這個(gè)控件，大致有以下特點(diǎn)

• 1.3、從結(jié)構(gòu)上分析
  

• 二、 背景圓實(shí)現(xiàn)
  

• 2.1、實(shí)現(xiàn)粒子運(yùn)動(dòng)
  

• 2.2、實(shí)現(xiàn)漸變色圓
  

• 2.3、展示背景圓的扇形區(qū)域
  

• 2.4、實(shí)現(xiàn)指針變色
  

• 2.5、實(shí)現(xiàn)背景圓顏色隨扇形角度變化
  

• 三、跳動(dòng)數(shù)字動(dòng)畫實(shí)現(xiàn)
  

• 3.1、屬性動(dòng)畫+2個(gè)TextView實(shí)現(xiàn)數(shù)字上下切換動(dòng)畫
  

  
  

一、背景

1.1、控件效果

要實(shí)現(xiàn)的自定義控件效果大致如下，實(shí)現(xiàn)過程中用到了比較多的自定義View的API，覺得比較有代表性，就分享出來也當(dāng)做學(xué)習(xí)總結(jié)

項(xiàng)目代碼已上傳github

github.com/DaLeiGe/And…

1.2、從功能上分析一下這個(gè)控件，大致有以下特點(diǎn)

• 隨機(jī)運(yùn)動(dòng)粒子從圓周向圓心運(yùn)動(dòng)，并與切線方向有正負(fù)30°的角度差，粒子透明度、半徑、運(yùn)動(dòng)速度隨機(jī)，運(yùn)動(dòng)超過一定距離或者時(shí)間消失

• 背景圓有一個(gè)從內(nèi)到外的漸變色

• 計(jì)時(shí)模式下圓環(huán)有一個(gè)顏色漸變的順時(shí)針rotate動(dòng)畫

• 整個(gè)背景圓顏色隨著扇形角度變化而變化

• 指針顏色變化

• 數(shù)字變化是上下切換動(dòng)畫

1.3、從結(jié)構(gòu)上分析

這個(gè)控件可以拆分為兩個(gè)部分，由背景圓+數(shù)字控件兩個(gè)部分構(gòu)成的組合控件，之所以把數(shù)字控件單獨(dú)拆分出來，也是為了方便做數(shù)字上下跳動(dòng)的動(dòng)畫，畢竟通過控制drawText的位置實(shí)現(xiàn)動(dòng)畫感覺不方便，直接通過View的屬性動(dòng)畫更好實(shí)現(xiàn)

二、 背景圓實(shí)現(xiàn)

2.1、實(shí)現(xiàn)粒子運(yùn)動(dòng)

使用AnimPoint.java表示運(yùn)動(dòng)粒子，它具有x,y坐標(biāo)，半徑，角度，運(yùn)動(dòng)速度，透明度等屬性，通過這些屬性就可以畫出一個(gè)靜態(tài)的粒子

public class AnimPoint implements Cloneable {
    /**
     * 粒子原點(diǎn)x坐標(biāo)
     */
    private float mX;
    /**
     * 粒子原點(diǎn)y坐標(biāo)
     */
    private float mY;
    /**
     * 粒子半徑
     */
    private float radius;
    /**
     * 粒子初始位置的角度
     */
    private double anger;
    /**
     * 一幀移動(dòng)的速度
     */
    private float velocity;
    /**
     * 總共移動(dòng)的幀數(shù)
     */
    private int num = 0;

    /**
     * 透明度 0~255
     */
    private int alpha = 153;

    /**
     * 隨機(jī)偏移角度
     */
    private double randomAnger = 0;
}

粒子的初始位置位于隨機(jī)角度的圓周，且一個(gè)粒子具有隨機(jī)的半徑，透明度，速度等，通過init()方法，實(shí)現(xiàn)初始化粒子如下

public void init(Random random, float viewRadius) {
        anger = Math.toRadians(random.nextInt(360));
        velocity = random.nextFloat() * 2F;
        radius = random.nextInt(6) + 5;
        mX = (float) (viewRadius * Math.cos(anger));
        mY = (float) (viewRadius * Math.sin(anger));
        //隨機(jī)偏移角度-30°~30°
        randomAnger = Math.toRadians(30 - random.nextInt(60));
        alpha = 153 + random.nextInt(102);
    }

想讓粒子運(yùn)動(dòng)起來，使用update更新粒子的這些坐標(biāo)屬性就能實(shí)現(xiàn)，比如粒子現(xiàn)在坐標(biāo)在(5,5)，通過update()改變粒子的坐標(biāo)到(6,6),結(jié)合屬性動(dòng)畫不停地調(diào)用update()則就能不停的改變x,y的坐標(biāo)，實(shí)現(xiàn)粒子運(yùn)動(dòng)，然后當(dāng)粒子移動(dòng)超過一定距離，或者調(diào)用update超過一定次數(shù)，再重新調(diào)用init()讓粒子重新從圓周上開始下一個(gè)生命周期運(yùn)動(dòng)

public void updatePoint(Random random, float viewRadius) {
        //每一幀偏移的像素大小
        float distance = 1F;
        double moveAnger = anger + randomAnger;
        mX = (float) (mX - distance * Math.cos(moveAnger) * velocity);
        mY = (float) (mY - distance * Math.sin(moveAnger) * velocity);
        //模擬半徑逐漸變小
        radius = radius - 0.02F * velocity;
        num++;
        //如果到了最大值 則重新給運(yùn)動(dòng)粒子一個(gè)軌跡屬性
        int maxDistance = 180;
        int maxNum = 400;
        if (velocity * num > maxDistance || num > maxNum) {
            num = 0;
            init(random, viewRadius);
        }
    }

在View中大致實(shí)現(xiàn)如下

/**
     * 初始化動(dòng)畫
     */
    private void initAnim() {
        //繪制運(yùn)動(dòng)的粒子
        AnimPoint mAnimPoint = new AnimPoint();
        for (int i = 0; i < pointCount; i++) {
            //通過clone創(chuàng)建對(duì)象，避免重復(fù)創(chuàng)建
            AnimPoint cloneAnimPoint = mAnimPoint.clone();
            //先給每個(gè)粒子初始化各類屬性
            cloneAnimPoint.init(mRandom, mRadius - mOutCircleStrokeWidth / 2F);
            mPointList.add(cloneAnimPoint);
        }
        //畫運(yùn)動(dòng)粒子
        mPointsAnimator = ValueAnimator.ofFloat(0F, 1F);
        mPointsAnimator.setDuration(Integer.MAX_VALUE);
        mPointsAnimator.setRepeatMode(ValueAnimator.RESTART);
        mPointsAnimator.setRepeatCount(ValueAnimator.INFINITE);
        mPointsAnimator.addUpdateListener(animation -> {
            for (AnimPoint point : mPointList) {
                //通過屬性動(dòng)畫不停的計(jì)算下粒子的下一個(gè)坐標(biāo)
                point.updatePoint(mRandom, mRadius);
            }
            invalidate();
        });
        mPointsAnimator.start();
    }


    @Override
    protected void onDraw(final Canvas canvas) {
        super.onDraw(canvas);
        canvas.save();
        canvas.translate(mCenterX, mCenterY);
        //畫運(yùn)動(dòng)粒子
        for (AnimPoint animPoint : mPointList) {
            mPointPaint.setAlpha(animPoint.getAlpha());
            canvas.drawCircle(animPoint.getmX(), animPoint.getmY(),
                    animPoint.getRadius(), mPointPaint);
        }
     }

2.2、實(shí)現(xiàn)漸變色圓

實(shí)現(xiàn)圓從內(nèi)到外漸變使用RadialGradient

大致實(shí)現(xiàn)方式如下

float[] mRadialGradientStops = {0F, 0.69F, 0.86F, 0.94F, 0.98F, 1F};
mRadialGradientColors[0] = transparentColor;
mRadialGradientColors[1] = transparentColor;
mRadialGradientColors[2] = parameter.getInsideColor();
mRadialGradientColors[3] = parameter.getOutsizeColor();
mRadialGradientColors[4] = transparentColor;
mRadialGradientColors[5] = transparentColor;
mRadialGradient = new RadialGradient(
                    0,
                    0,
                    mCenterX,
                    mRadialGradientColors,
                    mRadialGradientStops,
                    Shader.TileMode.CLAMP);
mSweptPaint.setShader(mRadialGradient);

...
//onDraw()繪制
canvas.drawCircle(0, 0, mCenterX, mSweptPaint);

2.3、展示背景圓的扇形區(qū)域

原本想通過DrawArc實(shí)現(xiàn)這個(gè)效果，但是DrawArc無法實(shí)現(xiàn)到圓心的區(qū)域

那么如何實(shí)現(xiàn)這么一個(gè)不規(guī)則的形狀呢，可以使用canvas.clipPath()實(shí)現(xiàn)裁剪不規(guī)則的形狀，所以只要得到扇形的Path就能實(shí)現(xiàn)，通過圓點(diǎn)+弧形再閉合path就能實(shí)現(xiàn)

/**
     * 繪制扇形path
     *
     * @param r 半徑
     * @param startAngle 開始角度
     * @param sweepAngle 掃過的角度
     */
private void getSectorClip(float r, float startAngle, float sweepAngle) {
        mArcPath.reset();
        mArcPath.addArc(-r, -r, r, r, startAngle, sweepAngle);
        mArcPath.lineTo(0, 0);
        mArcPath.close();
    }

//然后再onDraw()中，裁剪畫布
 canvas.clipPath(mArcPath);

2.4、實(shí)現(xiàn)指針變色

指針是不規(guī)則形狀，無法通過繪制幾何圖形實(shí)現(xiàn)，所以選用drawBitmap實(shí)現(xiàn)

至于如何實(shí)現(xiàn)bitmap指針圖片的顏色變化呢，原本的方案是使用AvoidXfermode改變指定像素通道范圍內(nèi)的顏色，但是AvoidXfermode在API 24已經(jīng)被移除，所以這方案無效

最終采用圖層混合模式實(shí)現(xiàn)指針圖片變色

通過PorterDuff.Mode.MULTIPLY模式可以實(shí)現(xiàn)bitmap顏色，源圖像為要修改的指針顏色，目標(biāo)圖像為白色指針，通過獲取兩個(gè)圖像的重疊部分實(shí)現(xiàn)變色

大致實(shí)現(xiàn)如下

/**
     * 初始化指針圖片的Bitmap
     */
    private void initBitmap() {
        float f = 130F / 656F;
        mBitmapDST = BitmapFactory.decodeResource(getResources(), R.drawable.indicator);
        float mBitmapDstHeight = width * f;
        float mBitmapDstWidth = mBitmapDstHeight * mBitmapDST.getWidth() / mBitmapDST.getHeight();
        //初始化指針的圖層混合模式
        mXfermode = new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY);
        mPointerRectF = new RectF(0, 0, mBitmapDstWidth, mBitmapDstHeight);
        mBitmapSRT = Bitmap.createBitmap((int) mBitmapDstWidth, (int) mBitmapDstHeight, Bitmap.Config.ARGB_8888);
        mBitmapSRT.eraseColor(mIndicatorColor);
    }

    @Override
    protected void onDraw(final Canvas canvas) {
        super.onDraw(canvas);
        //畫指針
       canvas.translate(mCenterX, mCenterY);
       canvas.rotate(mCurrentAngle / 10F);
       canvas.translate(-mPointerRectF.width() / 2, -mCenterY);
       mPointerLayoutId = canvas.saveLayer(mPointerRectF, mBmpPaint);
       mBitmapSRT.eraseColor(mIndicatorColor);
       canvas.drawBitmap(mBitmapDST, null, mPointerRectF, mBmpPaint);
       mBmpPaint.setXfermode(mXfermode);
       canvas.drawBitmap(mBitmapSRT, null, mPointerRectF, mBmpPaint);
       mBmpPaint.setXfermode(null);
       canvas.restoreToCount(mPointerLayoutId);
    }

2.5、實(shí)現(xiàn)背景圓顏色隨扇形角度變化

把圓形控件拆成3600°，每一個(gè)角度對(duì)應(yīng)控件一種具體顏色值，那么如何計(jì)算特定角度他具體的顏色值呢？

參考屬性動(dòng)畫中的變色動(dòng)畫android.animation.ArgbEvaluator實(shí)現(xiàn)方式，計(jì)算兩個(gè)顏色中具體某一個(gè)點(diǎn)的顏色值方式如下

public Object evaluate(float fraction, Object startValue, Object endValue) {
     int startInt = (Integer) startValue;
     float startA = ((startInt >> 24) & 0xff) / 255.0f;
     float startR = ((startInt >> 16) & 0xff) / 255.0f;
     float startG = ((startInt >>  8) & 0xff) / 255.0f;
     float startB = ( startInt        & 0xff) / 255.0f;

     int endInt = (Integer) endValue;
     float endA = ((endInt >> 24) & 0xff) / 255.0f;
     float endR = ((endInt >> 16) & 0xff) / 255.0f;
     float endG = ((endInt >>  8) & 0xff) / 255.0f;
     float endB = ( endInt        & 0xff) / 255.0f;

     // convert from sRGB to linear
     startR = (float) Math.pow(startR, 2.2);
     startG = (float) Math.pow(startG, 2.2);
     startB = (float) Math.pow(startB, 2.2);

     endR = (float) Math.pow(endR, 2.2);
     endG = (float) Math.pow(endG, 2.2);
     endB = (float) Math.pow(endB, 2.2);

     // compute the interpolated color in linear space
     float a = startA + fraction * (endA - startA);
     float r = startR + fraction * (endR - startR);
     float g = startG + fraction * (endG - startG);
     float b = startB + fraction * (endB - startB);

     // convert back to sRGB in the [0..255] range
     a = a * 255.0f;
     r = (float) Math.pow(r, 1.0 / 2.2) * 255.0f;
     g = (float) Math.pow(g, 1.0 / 2.2) * 255.0f;
     b = (float) Math.pow(b, 1.0 / 2.2) * 255.0f;

     return Math.round(a) << 24 | Math.round(r) << 16 | Math.round(g) << 8 | Math.round(b);
 }

控件中總共有四個(gè)顏色段，3600/4=900，所以 fraction = progressValue % 900 / 900;

然后判斷當(dāng)前的角度位于第幾段顏色值中，通過android.animation.ArgbEvaluator.evaluate(float fraction, Object startValue, Object endValue) 就能回去具體的顏色值

大致實(shí)現(xiàn)過程如下

private ProgressParameter getProgressParameter(float progressValue) {
        float fraction = progressValue % 900 / 900;
        if (progressValue < 900) {
            //第一個(gè)顏色段
            mParameter.setInsideColor(evaluate(fraction, insideColor1, insideColor2));
            mParameter.setOutsizeColor(evaluate(fraction, outsizeColor1, outsizeColor2));
            mParameter.setProgressColor(evaluate(fraction, progressColor1, progressColor2));
            mParameter.setPointColor(evaluate(fraction, pointColor1, pointColor2));
            mParameter.setBgCircleColor(evaluate(fraction, bgCircleColor1, bgCircleColor2));
            mParameter.setIndicatorColor(evaluate(fraction, indicatorColor1, indicatorColor2));
        } else if (progressValue < 1800) {
            //第二個(gè)顏色段
            mParameter.setInsideColor(evaluate(fraction, insideColor2, insideColor3));
            mParameter.setOutsizeColor(evaluate(fraction, outsizeColor2, outsizeColor3));
            mParameter.setProgressColor(evaluate(fraction, progressColor2, progressColor3));
            mParameter.setPointColor(evaluate(fraction, pointColor2, pointColor3));
            mParameter.setBgCircleColor(evaluate(fraction, bgCircleColor2, bgCircleColor3));
            mParameter.setIndicatorColor(evaluate(fraction, indicatorColor2, indicatorColor3));
        } else if (progressValue < 2700) {
            //第三個(gè)顏色段
            mParameter.setInsideColor(evaluate(fraction, insideColor3, insideColor4));
            mParameter.setOutsizeColor(evaluate(fraction, outsizeColor3, outsizeColor4));
            mParameter.setProgressColor(evaluate(fraction, progressColor3, progressColor4));
            mParameter.setPointColor(evaluate(fraction, pointColor3, pointColor4));
            mParameter.setBgCircleColor(evaluate(fraction, bgCircleColor3, bgCircleColor4));
            mParameter.setIndicatorColor(evaluate(fraction, indicatorColor3, indicatorColor4));
        } else {
            //第四個(gè)顏色段
            mParameter.setInsideColor(evaluate(fraction, insideColor4, insideColor5));
            mParameter.setOutsizeColor(evaluate(fraction, outsizeColor4, outsizeColor5));
            mParameter.setProgressColor(evaluate(fraction, progressColor4, progressColor5));
            mParameter.setPointColor(evaluate(fraction, pointColor4, pointColor5));
            mParameter.setBgCircleColor(evaluate(fraction, bgCircleColor4, bgCircleColor5));
            mParameter.setIndicatorColor(evaluate(fraction, indicatorColor4, indicatorColor5));
        }
        return mParameter;
    }

三、跳動(dòng)數(shù)字動(dòng)畫實(shí)現(xiàn)

3.1、屬性動(dòng)畫+2個(gè)TextView實(shí)現(xiàn)數(shù)字上下切換動(dòng)畫

實(shí)現(xiàn)數(shù)字切換動(dòng)畫，原本打算用RecycleView實(shí)現(xiàn)，但是考慮到動(dòng)效上將來可能面臨UI小姐姐各種騷操作，所以最終決定就用兩個(gè)TextView做上下translation動(dòng)畫，這樣可控性高，對(duì)View執(zhí)行屬性動(dòng)畫也簡單

NumberView使用FrameLayout包裹兩個(gè)TextView，widget_progress_number_item_layout.xml

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

    <TextView
        android:id="@+id/tv_number_one"
        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:padding="0dp"
        android:text="0"
        android:textColor="@android:color/white" />

    <TextView
        
        android:id="@+id/tv_number_tow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="1"
        android:textColor="@android:color/white" />
</FrameLayout>

然后通過屬性動(dòng)畫控制兩個(gè)TextView上下切換

mNumberAnim = ValueAnimator.ofFloat(0F, 1F);
        mNumberAnim.setDuration(400);
        mNumberAnim.setInterpolator(new OvershootInterpolator());
        mNumberAnim.setRepeatCount(0);
        mNumberAnim.setRepeatMode(ValueAnimator.RESTART);
        mNumberAnim.addUpdateListener(animation -> {
            float value = (float) animation.getAnimatedValue();
            if (UP_OR_DOWN_MODE == UP_ANIMATOR_MODE) {
                //數(shù)字變大，向下移動(dòng)
                mTvFirst.setTranslationY(-mHeight * value);
                mTvSecond.setTranslationY(-mHeight * value);
            } else {
                //數(shù)字變小，向上移動(dòng)
                mTvFirst.setTranslationY(mHeight * value);
                mTvSecond.setTranslationY(-2 * mHeight + mHeight * value);
            }
        });

這樣NumberView就能實(shí)現(xiàn)一位數(shù)字的變化是上下切換動(dòng)畫，具有個(gè)十百位還有時(shí)鐘冒號(hào)的通過容器布局

AnimNumberView組合布局的方式實(shí)現(xiàn)表示時(shí)間和個(gè)十百位數(shù)

到此，相信大家對(duì)“如何利用Android實(shí)現(xiàn)比較炫酷的自定義View”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！