vivo安裝App時的界面问拘，有8個點在轉動狡汉，心血來潮也想自己寫一個浅悉，vivo其他app也有這個loading效果，反編譯后發(fā)現是使用一張圖片毁腿，然后不斷旋轉每個圓點的平均角度來達到圓點切換的感覺辑奈。
效果對比圖.png
原理分析
獲取到控件寬高后苛茂，計算出半徑，使用三角函數鸠窗，計算出每個角度的坐標妓羊，畫點，再通過Handler發(fā)送延遲消息來重繪稍计，重繪時旋轉畫布躁绸，同樣旋轉每個點的平均角度，來達到圓點切換效果臣嚣。
以及還有對點大小進行縮放的功能净刮，可以讓樣式切換為華為商店的樣式，大家看下面的動圖就知道了硅则。
普通模式.gif
縮放模式.gif
完整代碼
- 自定義屬性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RotateDotView">
<!-- 開始顏色 -->
<attr name="rdv_start_color" format="color|reference" />
<!-- 結束顏色 -->
<attr name="rdv_end_color" format="color|reference" />
<!-- 圓點數量 -->
<attr name="rdv_dot_count" format="integer|dimension" />
<!-- 圓點大小 -->
<attr name="rdv_dot_radius" format="integer|float|dimension" />
<!-- 是否自動開啟旋轉淹父，默認開啟 -->
<attr name="rdv_auto_start" format="boolean" />
<!-- 每次旋轉的角度 -->
<attr name="rdv_rotate_angle" format="integer|dimension" />
<!-- 點模式，普通模式怎虫、縮放模式 -->
<attr name="rdv_dot_mode" format="enum">
<enum name="normal" value="1" />
<enum name="scale" value="2" />
</attr>
</declare-styleable>
</resources>
- Java代碼
public class RotateDotView extends View implements Runnable {
/**
* 普通模式
*/
private static final int MODE_NORMAL = 1;
/**
* 縮放模式
*/
private static final int MODE_SCALE = 2;
/**
* 總旋轉角度
*/
private static final int TOTAL_ROTATION_ANGLE = 360;
/**
* 間隔時間
*/
private static final int INTERVAL_TIME = 65;
/**
* View默認最小寬度
*/
private static final int DEFAULT_MIN_WIDTH = 70;
/**
* 控件寬
*/
private int mViewWidth;
/**
* 控件高
*/
private int mViewHeight;
/**
* 畫筆
*/
private Paint mPaint;
/**
* 外接圓的半徑
*/
private float mCircleRadius;
/**
* 起始點的顏色
*/
private int mStartColor;
/**
* 終止點的顏色
*/
private int mEndColor;
/**
* 一共多少個點
*/
private int mDotCount;
/**
* 圓點半徑
*/
private float mDotRadius;
/**
* 平均角度
*/
private int mAngle;
/**
* 旋轉角度暑认，默認和平均角度一樣
*/
private int mRotateAngle;
/**
* 每個點的數據
*/
private ArrayList<Dot> mDots;
/**
* 當前旋轉到的角度
*/
private int mCurrentAngle = 0;
/**
* 是否自動開始
*/
private boolean isAutoStart;
/**
* 點的模式
*/
private int mDotMode;
public RotateDotView(Context context) {
this(context, null);
}
public RotateDotView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public RotateDotView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
private void init(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
initAttr(context, attrs, defStyleAttr);
mPaint = new Paint();
mPaint.setColor(mStartColor);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(mDotRadius);
}
private void initAttr(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RotateDotView, defStyleAttr, 0);
mStartColor = array.getColor(R.styleable.RotateDotView_rdv_start_color, Color.argb(255, 180, 180, 180));
//如果不設置endColor，默認取startColor的30%透明度作為endColor
mEndColor = array.getColor(R.styleable.RotateDotView_rdv_end_color, Color.argb(76, Color.red(mStartColor), Color.green(mStartColor), Color.blue(mStartColor)));
mDotCount = array.getInt(R.styleable.RotateDotView_rdv_dot_count, 8);
mDotRadius = array.getDimension(R.styleable.RotateDotView_rdv_dot_radius, dip2px(context, 2.6f));
isAutoStart = array.getBoolean(R.styleable.RotateDotView_rdv_auto_start, true);
//計算平均角度大审，默認是360 / 點的數量蘸际，例如8個點，算出來的平均角度就是45度
mAngle = TOTAL_ROTATION_ANGLE / mDotCount;
mRotateAngle = array.getInt(R.styleable.RotateDotView_rdv_rotate_angle, mAngle);
//獲取模式
mDotMode = array.getInt(R.styleable.RotateDotView_rdv_dot_mode, MODE_NORMAL);
array.recycle();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mViewWidth = w;
mViewHeight = h;
mCircleRadius = (Math.min(mViewHeight, mViewWidth) / 2f) * 0.8f;
mDots = generateDot();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//將坐標系原點移動到畫布正中心
canvas.translate(mViewWidth / 2, mViewHeight / 2);
canvas.rotate(mCurrentAngle);
for (Dot dot : mDots) {
mPaint.setColor(dot.color);
canvas.drawCircle(dot.x, dot.y, dot.dotRadius, mPaint);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(handleMeasure(widthMeasureSpec), handleMeasure(heightMeasureSpec));
}
/**
* 處理MeasureSpec
*/
private int handleMeasure(int measureSpec) {
int result = DEFAULT_MIN_WIDTH;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
//處理wrap_content的情況
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
if (isAutoStart) {
postDelayed(this, INTERVAL_TIME);
}
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
removeCallbacks(this);
}
@Override
public void run() {
if (mCurrentAngle >= TOTAL_ROTATION_ANGLE) {
mCurrentAngle = mCurrentAngle - TOTAL_ROTATION_ANGLE;
} else {
//每次疊加一個圓點的角度徒扶，就不會覺得在圓圈轉動粮彤，而是點在切換
mCurrentAngle += mRotateAngle;
}
invalidate();
postDelayed(this, INTERVAL_TIME);
}
/**
* 生成點
*/
private ArrayList<Dot> generateDot() {
//創(chuàng)建顏色估值器
ArgbEvaluator argbEvaluator = new ArgbEvaluator();
ArrayList<Dot> points = new ArrayList<>();
for (int i = 0; i < mDotCount; i++) {
float currentAngle = i * mAngle;
//三角函數，計算坐標姜骡，注意這里Math的三角函數方法导坟，傳入的是弧長，需要乘以Math.PI來將角度換算為弧長圈澈，再進行計算
float x = (float) (mCircleRadius * Math.cos((currentAngle / 180) * Math.PI));
float y = (float) (mCircleRadius * Math.sin((currentAngle / 180) * Math.PI));
//估算顏色乍迄，計算每個點的顏色
float fraction = currentAngle / TOTAL_ROTATION_ANGLE;
int color = (int) argbEvaluator.evaluate(fraction, mEndColor, mStartColor);
float dotRadius;
//是否按比例縮放點
if (mDotMode == MODE_SCALE) {
dotRadius = (int) (fraction * mDotRadius);
} else {
dotRadius = mDotRadius;
}
points.add(new Dot(x, y, color, dotRadius));
}
return points;
}
private static class Dot {
/**
* x坐標
*/
float x;
/**
* y坐標
*/
float y;
/**
* 顏色
*/
int color;
/**
* 點的半徑，可以一個點一個半徑
*/
float dotRadius;
Dot(float x, float y, int color, float dotRadius) {
this.x = x;
this.y = y;
this.color = color;
this.dotRadius = dotRadius;
}
}
public static int dip2px(Context context, float dipValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * scale + 0.5f);
}
}
布局代碼
- 默認模式士败，rdv_dot_mode屬性設置為normal或不設置闯两，都為普通模式，并沒有縮放效果谅将，每個點的大小都是一致的漾狼。
<com.zh.cavas.sample.RotateDotView
android:layout_width="28dp"
android:layout_height="28dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rdv_start_color="@android:color/darker_gray" />
- 縮放模式
<com.zh.cavas.sample.RotateDotView
android:id="@+id/rotate_dot_view"
android:layout_width="28dp"
android:layout_height="28dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rdv_dot_mode="scale"
app:rdv_dot_radius="3.8dp"
app:rdv_start_color="@android:color/darker_gray" />
