溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“如何利用Android實現比較炫酷的自定義View”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何利用Android實現比較炫酷的自定義View”吧!
一、背景
1.1、控件效果
1.2、從功能上分析一下這個控件，大致有以下特點
1.3、從結構上分析
二、 背景圓實現
2.1、實現粒子運動
2.2、實現漸變色圓
2.3、展示背景圓的扇形區域
2.4、實現指針變色
2.5、實現背景圓顏色隨扇形角度變化
三、跳動數字動畫實現
3.1、屬性動畫+2個TextView實現數字上下切換動畫
要實現的自定義控件效果大致如下，實現過程中用到了比較多的自定義View的API，覺得比較有代表性，就分享出來也當做學習總結
項目代碼已上傳github
github.com/DaLeiGe/And…
隨機運動粒子從圓周向圓心運動，并與切線方向有正負30°的角度差，粒子透明度、半徑、運動速度隨機，運動超過一定距離或者時間消失
背景圓有一個從內到外的漸變色
計時模式下圓環有一個顏色漸變的順時針rotate動畫
整個背景圓顏色隨著扇形角度變化而變化
指針顏色變化
數字變化是上下切換動畫
這個控件可以拆分為兩個部分，由背景圓+數字控件兩個部分構成的組合控件，之所以把數字控件單獨拆分出來，也是為了方便做數字上下跳動的動畫，畢竟通過控制drawText的位置實現動畫感覺不方便，直接通過View的屬性動畫更好實現
使用AnimPoint.java表示運動粒子，它具有x,y坐標，半徑，角度，運動速度，透明度等屬性，通過這些屬性就可以畫出一個靜態的粒子
public class AnimPoint implements Cloneable {
/**
* 粒子原點x坐標
*/
private float mX;
/**
* 粒子原點y坐標
*/
private float mY;
/**
* 粒子半徑
*/
private float radius;
/**
* 粒子初始位置的角度
*/
private double anger;
/**
* 一幀移動的速度
*/
private float velocity;
/**
* 總共移動的幀數
*/
private int num = 0;
/**
* 透明度 0~255
*/
private int alpha = 153;
/**
* 隨機偏移角度
*/
private double randomAnger = 0;
}粒子的初始位置位于隨機角度的圓周，且一個粒子具有隨機的半徑，透明度，速度等，通過init()方法，實現初始化粒子如下
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));
//隨機偏移角度-30°~30°
randomAnger = Math.toRadians(30 - random.nextInt(60));
alpha = 153 + random.nextInt(102);
}想讓粒子運動起來，使用update更新粒子的這些坐標屬性就能實現，比如粒子現在坐標在(5,5)，通過update()改變粒子的坐標到(6,6),結合屬性動畫不停地調用update()則就能不停的改變x,y的坐標，實現粒子運動，然后當粒子移動超過一定距離，或者調用update超過一定次數，再重新調用init()讓粒子重新從圓周上開始下一個生命周期運動
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++;
//如果到了最大值 則重新給運動粒子一個軌跡屬性
int maxDistance = 180;
int maxNum = 400;
if (velocity * num > maxDistance || num > maxNum) {
num = 0;
init(random, viewRadius);
}
}在View中大致實現如下
/**
* 初始化動畫
*/
private void initAnim() {
//繪制運動的粒子
AnimPoint mAnimPoint = new AnimPoint();
for (int i = 0; i < pointCount; i++) {
//通過clone創建對象，避免重復創建
AnimPoint cloneAnimPoint = mAnimPoint.clone();
//先給每個粒子初始化各類屬性
cloneAnimPoint.init(mRandom, mRadius - mOutCircleStrokeWidth / 2F);
mPointList.add(cloneAnimPoint);
}
//畫運動粒子
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) {
//通過屬性動畫不停的計算下粒子的下一個坐標
point.updatePoint(mRandom, mRadius);
}
invalidate();
});
mPointsAnimator.start();
}
@Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.translate(mCenterX, mCenterY);
//畫運動粒子
for (AnimPoint animPoint : mPointList) {
mPointPaint.setAlpha(animPoint.getAlpha());
canvas.drawCircle(animPoint.getmX(), animPoint.getmY(),
animPoint.getRadius(), mPointPaint);
}
}實現圓從內到外漸變使用RadialGradient
大致實現方式如下
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);原本想通過DrawArc實現這個效果，但是DrawArc無法實現到圓心的區域
那么如何實現這么一個不規則的形狀呢，可以使用canvas.clipPath()實現裁剪不規則的形狀，所以只要得到扇形的Path就能實現，通過圓點+弧形再閉合path就能實現
/**
* 繪制扇形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);指針是不規則形狀，無法通過繪制幾何圖形實現，所以選用drawBitmap實現
至于如何實現bitmap指針圖片的顏色變化呢，原本的方案是使用AvoidXfermode改變指定像素通道范圍內的顏色，但是AvoidXfermode在API 24已經被移除，所以這方案無效
最終采用圖層混合模式實現指針圖片變色
通過PorterDuff.Mode.MULTIPLY模式可以實現bitmap顏色，源圖像為要修改的指針顏色，目標圖像為白色指針，通過獲取兩個圖像的重疊部分實現變色
大致實現如下
/**
* 初始化指針圖片的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);
}把圓形控件拆成3600°，每一個角度對應控件一種具體顏色值，那么如何計算特定角度他具體的顏色值呢？
參考屬性動畫中的變色動畫android.animation.ArgbEvaluator實現方式，計算兩個顏色中具體某一個點的顏色值方式如下
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);
}控件中總共有四個顏色段，3600/4=900，所以 fraction = progressValue % 900 / 900;
然后判斷當前的角度位于第幾段顏色值中，通過android.animation.ArgbEvaluator.evaluate(float fraction, Object startValue, Object endValue) 就能回去具體的顏色值
大致實現過程如下
private ProgressParameter getProgressParameter(float progressValue) {
float fraction = progressValue % 900 / 900;
if (progressValue < 900) {
//第一個顏色段
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) {
//第二個顏色段
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) {
//第三個顏色段
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 {
//第四個顏色段
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;
}實現數字切換動畫，原本打算用RecycleView實現，但是考慮到動效上將來可能面臨UI小姐姐各種騷操作，所以最終決定就用兩個TextView做上下translation動畫，這樣可控性高，對View執行屬性動畫也簡單
NumberView使用FrameLayout包裹兩個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>
然后通過屬性動畫控制兩個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) {
//數字變大，向下移動
mTvFirst.setTranslationY(-mHeight * value);
mTvSecond.setTranslationY(-mHeight * value);
} else {
//數字變小，向上移動
mTvFirst.setTranslationY(mHeight * value);
mTvSecond.setTranslationY(-2 * mHeight + mHeight * value);
}
});這樣NumberView就能實現一位數字的變化是上下切換動畫，具有個十百位還有時鐘冒號的通過容器布局
AnimNumberView組合布局的方式實現表示時間和個十百位數
到此，相信大家對“如何利用Android實現比較炫酷的自定義View”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
