溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一 概述
自定義 View 是 Android 開發(fā)里面的一個大學問。偶然間看到 TIM 郵箱界面的刷新 View 還挺好玩的，于是就自己動手實現(xiàn)了一個，先看看 TIM 里邊的效果圖：
二 需求分析
看到上面的動圖，大概也知道我們需要實現(xiàn)的功能：
三 功能實現(xiàn)
新建一個 RefreshView 類繼承自 View ，然后我們再在 RefreshView 里面新建一個內(nèi)部實體類： Circle
來看一下 Circle類的代碼
#Cirlce.java
class Circle {
int x;
int y;
int r;
int color;
public Circle(int x, int y, int r, int color) {
this.x = x;
this.y = y;
this.r = r;
this.color = color;
}
}
這是一個實體類，里面提供了 x , y , r , color 屬性分別代表圓心坐標的 x值，y值，圓的半徑 r 跟顏色。
借助此類來存儲小圓球的相關屬性。
接下來就是我們平時自定義 View 經(jīng)常要重寫的三大方法了，先看 onMeasure()
#RefreshView.java
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.EXACTLY) {
setMeasuredDimension(mWidth, heightSize);
} else if (widthMeasureSpec == MeasureSpec.EXACTLY && heightMeasureSpec == MeasureSpec.AT_MOST) {
setMeasuredDimension(widthSize, mHeight);
} else if (widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.EXACTLY) {
setMeasuredDimension(widthSize, heightSize);
} else {
setMeasuredDimension(mWidth, mHeight);
}
}
為了適配布局文件中的 wrap_content 參數(shù)，我們需要重寫此方法(此方法不是本文的研究重點，不明白的可以百度或者google一下，或者參考《Android開發(fā)藝術探索》里面的相關章節(jié))。
接著看 onLayout() 方法：
#RefreshView.java
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
initContentAttr(getMeasuredWidth(), getMeasuredHeight());
resetCircles();
}
在此方法中調(diào)用了 initContentAttr() 方法來初始化內(nèi)容大小與 resetCircles() 來初始化（重置）三個小球的屬性。分別看下這兩個方法：
#RefreshView.java
private void initContentAttr(int width, int height) {
mContentWidth = width - getPaddingLeft() - getPaddingRight();
mContentHeight = height - getPaddingTop() - getPaddingBottom();
}
這方法很簡單，就是進行了 padding 的處理，得出真正的布局大小。如果不處理 padding 的話那么用戶設置了 padding 將失效。再看 resetCircles()：
#RefreshView.java
public static final int STATE_ORIGIN = 0;
public static final int STATE_PREPARED = 1;
private int mOriginState = STATE_ORIGIN;
private void resetCircles() {
if (mCircles.isEmpty()) {
int x = mContentWidth / 2;
int y = mContentHeight / 2;
mGap = x - mMinRadius; //初始化相鄰圓心間的最大間距
Circle circleLeft = new Circle(x, y, mMinRadius, 0xffff7f0a);
Circle circleCenter = new Circle(x, y, mMaxRadius, Color.RED);
Circle circleRight = new Circle(x, y, mMinRadius, Color.GREEN);
mCircles.add(LEFT, circleLeft);
mCircles.add(RIGHT, circleRight);
mCircles.add(CENTER, circleCenter);
}
if (mOriginState == STATE_ORIGIN) {
int x = mContentWidth / 2;
int y = mContentHeight / 2;
for (int i = 0; i < mCircles.size(); i++) {
Circle circle = mCircles.get(i);
circle.x = x;
circle.y = y;
if (i == CENTER) {
circle.r = mMaxRadius;
} else {
circle.r = mMinRadius;
}
}
} else {
prepareToStart();
}
}
此方法用于初始化和重置小球，方法里面進行的兩個大的 if...else 語句判斷，第一個 if 用于判斷是否應該初始化小球，第二個語句則是用于判斷小球的初始化時候的形態(tài)?？梢栽谕獠空{(diào)用 setOriginState() 方法來指定小球的初始化形態(tài)，如不指定，則默認為 NOMAL,即三球重合。
#RefreshView.java
/**
* 設置圓球初始狀態(tài)
* {@link #STATE_ORIGIN}為原始狀態(tài)（三個小球重合）,
* {@link #STATE_PREPARED}為準備好可以刷新的狀態(tài)，三個小球間距最大
*/
public void setOriginState(int state) {
if (state == 0) {
mOriginState = STATE_ORIGIN;
} else {
mOriginState = STATE_PREPARED;
}
}
最后就是最有趣的方法 onDraw() 了：
#RefreshView.java
@Override
protected void onDraw(Canvas canvas) {
for (Circle circle : mCircles) {
mPaint.setColor(circle.color);
canvas.drawCircle(circle.x + getPaddingLeft(), circle.y + getPaddingTop(), circle.r, mPaint);
}
}
這方法很簡單，就是將 mCircles 列表里面的圓畫出來而已（里面進行了 padding 的處理）。
三大方法都講完了，可是這只是畫出了幾個小圓球而已，我們需求分析里的需求還沒實現(xiàn)呢，上面的方法已經(jīng)把 View 的基礎搭起來了，要實現(xiàn)這個也就不難了。接下來就是大家期待的需求實現(xiàn)了：
根據(jù)拖動的進度來移動小球的位置
實現(xiàn)代碼如下：
#RefreshView.java
public void drag(float fraction) {
if (mOriginState == STATE_PREPARED) {
return;
}
if (mAnimator != null && mAnimator.isRunning()) {
return;
}
if (fraction > 1) {
return;
}
mCircles.get(LEFT).x = (int) (mMinRadius + mGap * (1f - fraction));
mCircles.get(RIGHT).x = (int) (mContentWidth / 2 + mGap * fraction);
postInvalidate();
}
在方法里面進行三次判斷，如果初始狀態(tài)是 STATE_PREPARED （三小球距離最大,沒必要再變動了）、動畫正在進行或者進度大于1 都不進行移動。然后修改小球的屬性，再重繪。
小球移動過程的動畫
這個是這個自定義 View 最難的部分了，需要一些數(shù)學的小運算，有點繁瑣。
我們先來理清實現(xiàn)動畫的邏輯，看了開篇的gif，應該可以了解到，剛準備開始動畫時，左邊的小球應該是處于最左端，中間的小球處于中間，右邊的處于最右端。我們一個個小球來分析。
理清小球的移動過程對代碼的實現(xiàn)很有幫助，我們可以分析出：
1）每個小球?qū)τ谧鴺讼档囊苿犹攸c是一樣的。
2）每個小球?qū)τ趧赢嫷倪M度的移動特點是不一樣的。
聽起來好像有點拗口，我們用人話來解釋一下：
1）每個小球?qū)τ谧鴺讼档囊苿犹攸c是一樣的：左邊的小球在坐標的最左邊是先出現(xiàn)，然后再向右移動，那么中間和右邊的小球呢？其實是同樣的，它們在坐標軸最左邊的時候都是先出現(xiàn)，再向右移動，無論哪個小球，它們在坐標軸的同一點上的動作和形態(tài)應該是一致的。
2）每個小球?qū)τ趧赢嫷倪M度的移動特點是不一樣的：左邊的小球在動畫剛開始時是處于最左端，而中間的小球卻在中間位置，右邊的則在最右端。當動畫開始后，比如進行了一半，這時候左邊的小球應該移動到了中點附近，而中間的確是在末端（消失），右邊的小球就會出現(xiàn)在中間附近。
按照上面分析的邏輯，我把動畫的總進度分為6份，為什么是6份呢？通過上面的動畫分析，知道小球應該經(jīng)歷一下過程（不分時間先后）：
為了讓小球之間的間隔保持一個優(yōu)美的狀態(tài)（動畫開始后小球間不會重疊，相鄰小球的間隔基本一致），就把1、4出現(xiàn)和消失階段分別設為 1/6 的動畫周期，中間2、3兩個階段分別占用 1/3 個動畫周期。
這樣一來，出現(xiàn)跟消失占用了 1/3 動畫進度，其他兩個部分分別占用了 1/3 動畫進度。舉個例子：剛開始動畫時，設最左邊的小球為 1，中間的小球為 2，最右端的小球為 3 。
當 小球1 移動到中點時，這時動畫進行了 1/3 ,那么此時的 小球2 就應該移動到末端，小球3 則剛好經(jīng)歷消失和出現(xiàn)過程，于是應該出現(xiàn)于坐標軸的起點。
由此可以看到又恢復到了剛開始時候的情況(一個小球在最左，一個在中，一個在最右)，只不過是顏色不同了而已。以此類推，無限循環(huán)，就可以形成優(yōu)美的動畫了。
分析出這些有什么用呢？我發(fā)現(xiàn)用坐標來確定小球的移動實現(xiàn)起來會有點小問題，所以就用動畫的進度來實現(xiàn)，下面看具體實現(xiàn)。
需要實現(xiàn)小球的無限運動，最實用的就是用動畫來實現(xiàn)，這里我用了屬性動畫。先初始化 Animotor 類：
#RefreshView.java
private void initAnimator() {
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f);
animator.setDuration(1500);
animator.setRepeatCount(-1);
animator.setRepeatMode(ValueAnimator.RESTART);
animator.setInterpolator(new LinearInterpolator());
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
prepareToStart(); //確保View達到可以刷新的狀態(tài)
}
@Override
public void onAnimationEnd(Animator animation) {
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
for (Circle circle : mCircles) {
updateCircle(circle, mCircles.indexOf(circle), animation.getAnimatedFraction());
}
postInvalidate();
}
});
mAnimator = animator;
}
可以看到，這是一個無限循環(huán)的動畫，如果不手動停止，它就會一直循環(huán)下去。對于 mAnimator ,還添加了一個監(jiān)聽器，當開始動畫是就調(diào)用 prepareToStart() 方法，這個方法看起來是不是有點眼熟，沒錯，它就是我們上面 resetCircles() 里面判斷小球形態(tài)為 STATE_PREPARED 是調(diào)用過，此方法將確保小球達到刷新的臨界點。我們主要看看 UpdateLisener 中的 onAnimationUpdate() 方法里面的 updateCircle() 方法：
#RefreshView
private void updateCircle(Circle circle, int index, float fraction) {
float progress = fraction; //真實進度
float virtualFraction; //每個小球內(nèi)部的虛擬進度
switch (index) {
case LEFT:
if (fraction < 5f / 6f) {
progress = progress + 1f / 6f;
} else {
progress = progress - 5f / 6f;
}
break;
case CENTER:
if (fraction < 0.5f) {
progress = progress + 0.5f;
} else {
progress = progress - 0.5f;
}
break;
case RIGHT:
if (fraction < 1f / 6f) {
progress += 5f / 6f;
} else {
progress -= 1f / 6f;
}
break;
}
if (progress <= 1f / 6f) {
virtualFraction = progress * 6;
appear(circle, virtualFraction);
return;
}
if (progress >= 5f / 6f) {
virtualFraction = (progress - 5f / 6f) * 6;
disappear(circle, virtualFraction);
return;
}
virtualFraction = (progress - 1f / 6f) * 3f / 2f;
move(circle, virtualFraction);
}
我用了一個 virtualFraction 來表示每個小球的虛擬進度（相當于上面坐標圖中的下值，即坐標百分比），例如當動畫的總進度為 0 時，左小球的虛擬進度就應該是 1/6+0 (默認已經(jīng)經(jīng)過了出現(xiàn)過程，消耗了 1/6)，中間小球的虛擬進度為 1/6+1/3+0 = 1/2 （默認經(jīng)歷了出現(xiàn)，移動到中間過程）,最右邊小球的虛擬進度為 1/6+1/3+1/3+0 = 5/6 。然后動畫的總進度到 1/3 時，左小球的虛擬進度就為 1/2 （中間位置）......
下面再看下 move() 、appear()、disapear() 方法：
#RefreshView
private void appear(Circle circle, float fraction) {
circle.r = (int) (mMinRadius * fraction);
circle.x = mMinRadius;
}
private void disappear(Circle circle, float fraction) {
circle.r = (int) (mMinRadius * (1 - fraction));
}
private void move(Circle circle, float fraction) {
int difference = mMaxRadius - mMinRadius;
if (fraction < 0.5) {
circle.r = (int) (mMinRadius + difference * fraction * 2);
} else {
circle.r = (int) (mMaxRadius - difference * (fraction - 0.5) * 2);
}
circle.x = (int) (mMinRadius + mGap * 2 * fraction);
}
這個三個方法都很簡單，根據(jù)坐標的占比來計算出小球的坐標跟大小。
以上就是整個 RefershView 的實現(xiàn)了，如果需要看源碼的可以拉到文末。
四 使用及效果
看下怎么使用：
#MainActivity
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRefreshView = findViewById(R.id.refresh_view);
// mRefreshView.setOriginState(RefreshView.STATE_PREPARED);
Button start = findViewById(R.id.start);
Button stop = findViewById(R.id.stop);
SeekBar seekBar = findViewById(R.id.seek_bar);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
mRefreshView.drag(progress / 100f);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
start.setOnClickListener(this);
stop.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.start:
mRefreshView.start();
break;
case R.id.stop:
mRefreshView.stop();
break;
}
}
效果圖：
由于錄制軟件的問題，綠色的小球顯示效果不太好，在手機或虛擬機上顯示是正常的。再看個項目里的實際運用效果：
錄屏軟件對綠色好像過敏，將就看一下吧。
此文到此就結束了，感謝閱讀，喜歡的動動小手點個贊。
Demo 地址：https://github.com/gminibird/RefreshViewTest （本地下載）
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
