LoadingDotView：一個跑馬燈加載控件
先上效果圖
loadingdotview.gif
是不是看起來很眼熟，好像不少平臺使用過類似的加載動畫侠碧。</br>
好久沒寫過自定義View,也好久沒寫過博客叠艳，一時興起想練練手徐矩，先從簡單點(diǎn)開始哈
使用起來很簡單掐隐，只要設(shè)置相關(guān)屬性即可
xml布局
<com.kch.loadingdotview_lib.LoadingDotView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/loading_dot_view1"
app:dot_color="#B452CD"
app:dot_radius="10dp"
app:dot_num="3"
app:dot_space="5dp"
app:anim_speed="180"
app:dot_scaled_radius="15dp"
android:layout_marginBottom="20dp"/>
屬性簡介
- dot_color 圓點(diǎn)顏色
- dot_radius 圓點(diǎn)半徑
- dot_scaled_radius 圓點(diǎn)放大后的半徑
- dot_space 圓點(diǎn)之間的間隔
- anim_speed 圓點(diǎn)縮放的時間間隔
- dot_num 圓點(diǎn)的數(shù)量
- scale_interpolator 插值器類型
代碼設(shè)置屬性
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
loading_dot_view1 = (LoadingDotView) findViewById(R.id.loading_dot_view1);
loading_dot_view2 = (LoadingDotView) findViewById(R.id.loading_dot_view2);
loading_dot_view3 = (LoadingDotView) findViewById(R.id.loading_dot_view3);
loading_dot_view1.setDotNum(7);
loading_dot_view1.setDotRadius(35);
loading_dot_view2.setDotColor(Color.CYAN);
loading_dot_view2.setMaxDotRadius(250);
loading_dot_view3.setDotSpace(35);
loading_dot_view3.setInterpolator(AnimationUtils.loadInterpolator(this,android.R.interpolator.anticipate));
}
實(shí)現(xiàn)思路很簡單，通過ValueAnimator不斷獲取到動態(tài)變化的半徑驰怎，并重新繪制circle阐滩，用一個指針指向正在變化的圓點(diǎn)，每執(zhí)行完一次動畫就改變指針的位置县忌，在兩端之間來回移動
主要實(shí)現(xiàn)代碼是下面這個方法
/**
* 圓點(diǎn)執(zhí)行動畫的方法
*/
private void startRace(){
if (isScaling){
return;
}
ValueAnimator animator = new ValueAnimator().setDuration(mSpeed);
float startValue = mDotRadius;
float maxValue = mMaxDotRadius;
PropertyValuesHolder value = PropertyValuesHolder.ofFloat("radius",startValue,maxValue,startValue);
animator.setValues(value);
animator.setInterpolator(mInterpolator);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mScalingDotRadius = (float) animation.getAnimatedValue("radius");
invalidate();
}
});
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
isScaling = true;
Log.d(TAG,"onAnimationStart"+"isScaling:"+isScaling+";isReset"+isReset);
}
@Override
public void onAnimationEnd(Animator animation) {
isScaling=false;
Log.d(TAG,"onAnimationEnd:"+"isScaling:"+isScaling+";isReset"+isReset);
mScalingDotRadius = mDotRadius;
//計算圓點(diǎn)來回跑的算法
if (mScalePosition == mDotNum - 1) {
mLastScalePosition = mScalePosition;
mScalePosition--;
} else if (mScalePosition == 0) {
mLastScalePosition = mScalePosition;
mScalePosition++;
} else if (mLastScalePosition < mScalePosition) {
mLastScalePosition = mScalePosition;
mScalePosition++;
} else if (mLastScalePosition > mScalePosition) {
mLastScalePosition = mScalePosition;
mScalePosition--;
}
//重置位置掂榔，恢復(fù)到初始狀態(tài)
if (isReset){
isReset=false;
mScalePosition = 0;
mLastScalePosition = -1;
invalidate();
}else {
invalidate();
startRace();
}
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animator.start();
}
而onDraw方法只要區(qū)別正在變化的圓點(diǎn)和靜止的圓點(diǎn)即可
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i=0;i<mDotNum;i++){
if (i==mScalePosition){
canvas.drawCircle(mDots[i].x,mDots[i].y,mScalingDotRadius,mPaint);
}else
canvas.drawCircle(mDots[i].x,mDots[i].y,mDotRadius,mPaint);
}
}
另外在onMeasure里要計算好整個控件所占的空間址儒，主要注意圓點(diǎn)之間的空隙和圓點(diǎn)放大后所占的空間。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = (int) (2*mDotRadius*mDotNum+(mDotNum-1)*mDotSpace+(mMaxDotRadius-mDotRadius)*2);
int height = (int) mMaxDotRadius*2;
setMeasuredDimension(width,height);
}
整體實(shí)現(xiàn)大概這樣子,想要查看LoadingDotView的源碼請前往github</br>
地址：
https://github.com/MRKCH/LoadingDotView
