前言
NBA全明星周末！重要事情說一遍表制！
作為一個經(jīng)常在虎撲上看NBA直播的小球迷健爬，老早就留意到了打賞加油的小控件，今天趕緊的么介，讓我們來實現(xiàn)它吧~搞起!
</br>
虎撲原型和效果圖圖
先看下虎撲原型：
挺好看的一個控件嘛有木有~娜遵，看下我們的效果圖：
</br>
基本效果就是這樣了。
</br>
</br>
開始我們的自定義
1.分析原型
先來分析一波原型圖
對view的元素分析壤短。這個view有兩個主要的元素： 圓以及灰色背景框设拟。
圓有兩個元素：text 以及背景顏色 color；
背景框：某個顏色繪制出來的圓弧圖形久脯，并且該圓弧所在圓的半徑與大圓相等纳胧。
對view的結構分析。
view是多個圓組成的結構帘撰，以大圓為基圓跑慕，左邊展開的小圓都包含在一個基圓的空間內(nèi)并且與該基圓圓心重合。背景框可以拆解成左邊一個半基圓的弧形，加上右邊一個矩形核行。
用圖來演示一下：
ok牢硅，分析完畢~
2.動手
1 )先繪制圓
圓是這個控件里面很重要的一個元素，大圓和小圓都應該使用到同一個控件芝雪。因為大圓是基圓减余，我們先來畫個圓的控件，就叫BaseView绵脯。
定義一個BaseView,讓它繼承自view佳励，再在onDraw( )方法內(nèi)繪制圓和文本text，比較簡單蛆挫，直接上代碼：
繪制圓
canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2,
Math.min(getMeasuredHeight(), getMeasuredWidth()) / 2, mCirclePaint);
繪制文本
mTextPaint.getTextBounds(fstText, 0, fstText.length(), fstRect);
canvas.drawText(fstText, getMeasuredWidth() / 2 - fstRect.width() / 2,
getMeasuredHeight() / 2 + fstRect.height() / 2, mTextPaint);
繪制文本無非多一點對文本位置的修正赃承，恩，不難~
2 )繪制控件
從原型可以看出悴侵，基圓處在了父控件的最右邊瞧剖。或者可以說可免，當前控件假若從左邊展開抓于，BaseView在最右；控件從右邊展開,BaseView位于父控件最左浇借。因此我們可以自定義一個view去繼承RelativeLayout,這樣BaseView的處置就比較容易實現(xiàn)了捉撮。
定義一個GratuityView,繼承自RelativeLayout.
第一步，將我們寫好的BaseView添加到最右邊;
重寫onLayout( )方法妇垢，添加一個BaseView, 并添加上BaseView的點擊事件巾遭。貼上代碼：
private void addBaseView(int widthSize, int heightSize) {
if (added || widthSize < 1 || heightSize < 1) return;
added = !added;
BaseView baseView = new BaseView(mContext);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(size, size);
params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
baseView.setLayoutParams(params);
if (isNewLine)
baseView.setText(fstText, secText);
else baseView.setText(fstText);
baseView.setTextSize(mBaseTextSize);
baseView.setTextColor(mBaseTextColor);
baseView.setCircleColor(mBasegroundColor);
addView(baseView);
baseView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
//TODO
}
});
}
</br>
第二步，完成BaseView的點擊事件
BaseView的點擊事件有兩種闯估，一種是展開事件Expand, 一種是收縮事件 collapse.
當BaseView被點擊時灼舍，展開動畫開始，獲取當前動畫進度不斷地調(diào)用onDraw( )方法去繪制背景框（包括一個矩形和一個弧形）,貼上代碼:
private void startExpandAnimation() {
if (collapseAnimation != null && collapseAnimation.isRunning()) {
return;
}
expand = !expand;
animated = true;
if (mWidthMode == AT_MOST)
AnimLength = (mContainedCount + 1) * size - radius * 2;
else
AnimLength = mWidth - radius * 2; //總運動長度
expandAnimation = ValueAnimator.ofInt(AnimLength);
expandAnimation.setDuration(mAnimDuration);
expandAnimation.start();
expandAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
expandAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mCurrentValue = (int) valueAnimator.getAnimatedValue();
invalidate();
}
});
}
這里有一個點需要注意的：當前動畫的距離涨薪。
假如骑素，當前展開后只有3個子view，那么控件完整顯示需要的寬度就是
mWidth=(3+1)*基圓直徑刚夺。當getMeasureWidth()比所需寬度mWidth大献丑，動畫距離
AnimLength = mWidth - radius * 2
當getMeasureWidth( )比所需寬度mWidth小，動畫距離
AnimLength = (mContainedCount + 1) * size - radius * 2
中間灰色部分為動畫運動的距離
接下來在onDraw( )內(nèi)繪制背景框~
這里使用了xformode里面的模式光督，將灰色矩形與BaseView相交部分產(chǎn)生的顏色區(qū)域忽略掉阳距。
//寬度過長
int diff = getMeasuredWidth() - mWidth;
int layerId = canvas.saveLayer(diff, top, right, bottom, mPaint, Canvas.ALL_SAVE_FLAG);
//繪制弧形
fstRectF.left = diff + AnimLength - mCurrentValue;
fstRectF.right = diff + AnimLength - mCurrentValue + radius * 2;
fstRectF.top = top;
fstRectF.bottom = bottom;
canvas.drawArc(fstRectF, 90, 180, true, backgroundPaint);
//繪制矩形
canvas.drawRect(diff + mWidth - radius - mCurrentValue, top, right - radius, bottom, backgroundPaint);
//繪制xformode源圖像
fstRectF.left = right - size;
fstRectF.right = right;
fstRectF.top = top;
fstRectF.bottom = bottom;
canvas.drawArc(fstRectF, 90, 180, true, backAlphaPaint);
canvas.restoreToCount(layerId);
據(jù)說收縮的方法和展開類似哦~??
</br>
第三步，添加子BaseView
在展開的方法 startExpandAnimation( )內(nèi)添加子view结借。添加的位置很好計算，因為子view都添加到基圓的中心卒茬，基圓大小
size = Math.min(getMeasuredHeight(), getMeasuredWidth());
添加子view
private void addRewardView() {
for (int i = 0; i < mContainedCount; i++) {
int rewardSize = (int) (2 * 1.0f / 3 * Math.min(getMeasuredHeight(), getMeasuredWidth()));
BaseView rewardView = new BaseView(mContext);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(rewardSize, rewardSize);
params.rightMargin = radius - rewardSize / 2;
params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
params.addRule(RelativeLayout.CENTER_VERTICAL);
rewardView.setLayoutParams(params);
addView(rewardView);
mRewardViewList.add(rewardView);
}
</br>
第四步船老，子view添加動畫和點擊事件
子view開始出現(xiàn)的位置為BaseView圓心咖熟，往左展開包括了一個水平向左的平移動畫，逆時針方向的旋轉動畫柳畔，出現(xiàn)和消失時的淡入淡出動畫馍管；貼出展開動畫吧
private void startChildExpandAnimation() {
for (int i = 0; i < mContainedCount; i++) {
final BaseView view = mRewardViewList.get(i);
view.setVisibility(VISIBLE);
final int desX = size * (mContainedCount - i);
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, "translationX", 0, -desX);
objectAnimator.setDuration(mAnimDuration);
objectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
objectAnimator.start();
objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
value = Math.abs(value);
//淡出
if (value <= radius * 1.0f * 33 / 20) {
float alpha = value * 1.0f / radius - 0.65f;
view.setAlpha(alpha);
} else view.setAlpha(1.0f);
//旋轉
float ratation = -value * 1.0f / desX * 90;
view.setRotation(ratation);
}
});
}
}
</br>
第五步，完善代碼
完善部分包括完善自定義的屬性薪韩，GratuityView對外提供的方法确沸，以及一些特殊情況的處理。比如展開和收縮時屏蔽子view的點擊事件俘陷，當getMeasureWidth（）小于所需寬度時對動畫繪制的位置要重新計算罗捎，如何保存不同子view各自的文字設置以及設置雙行文本 等等。
</br>
end~
終于搞完咯拉盾！德瑪西亞桨菜！
轉載請注明出處哦謝謝
