GratuityView: 虎撲體育打賞控件

前言

NBA全明星周末!重要事情說一遍!
作為一個經常在虎撲上看NBA直播的小球迷,老早就留意到了打賞加油的小控件,今天趕緊的,讓我們來實現它吧~搞起!
</br>

虎撲原型和效果圖圖

先看下虎撲原型:

原型.png

挺好看的一個控件嘛有木有~,看下我們的效果圖:

原始效果.gif

點擊效果.gif

色彩效果.gif

</br>
基本效果就是這樣了。
</br>
</br>

開始我們的自定義

1.分析原型

先來分析一波原型圖

原型

對view的元素分析。這個view有兩個主要的元素: 圓以及灰色背景框。
圓有兩個元素:text 以及背景顏色 color;
背景框:某個顏色繪制出來的圓弧圖形,并且該圓弧所在圓的半徑與大圓相等。

對view的結構分析。
view是多個圓組成的結構,以大圓為基圓,左邊展開的小圓都包含在一個基圓的空間內并且與該基圓圓心重合。背景框可以拆解成左邊一個半基圓的弧形,加上右邊一個矩形。
用圖來演示一下:

結構圖

ok,分析完畢~

2.動手
1 )先繪制圓

圓是這個控件里面很重要的一個元素,大圓和小圓都應該使用到同一個控件。因為大圓是基圓,我們先來畫個圓的控件,就叫BaseView。
定義一個BaseView,讓它繼承自view,再在onDraw( )方法內繪制圓和文本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的處置就比較容易實現了。
定義一個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被點擊時,展開動畫開始,獲取當前動畫進度不斷地調用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

中間灰色部分為動畫運動的距離


ggv.png

接下來在onDraw( )內繪制背景框~
這里使用了xformode里面的模式,將灰色矩形與BaseView相交部分產生的顏色區域忽略掉。

//寬度過長
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);

據說收縮的方法和展開類似哦~??

</br>
第三步,添加子BaseView
在展開的方法 startExpandAnimation( )內添加子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開始出現的位置為BaseView圓心,往左展開包括了一個水平向左的平移動畫,逆時針方向的旋轉動畫,出現和消失時的淡入淡出動畫;貼出展開動畫吧

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~

終于搞完咯!德瑪西亞!

轉載請注明出處哦謝謝

下載

https://github.com/dengzq/GratuityView

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,593評論 25 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,259評論 4 61
  • 文/奎尼 大學之前我遇到兩個很招人喜歡的女孩子。 Maggie長相清秀,膚白貌佳,朱唇皓齒。安安身材豐滿,明眸善睞...
    奎尼閱讀 1,829評論 27 44
  • 用法1:當作屬性用 //枚舉值 enum ClickType {case Login, OnlineQuote, ...
    trinity_閱讀 604評論 0 0
  • 從2006到2016,十年時光轉瞬即逝,一個人能有多少個十年呢?突然之間感覺北漂的這十年很短也很長。對于歷經滄桑的...
    mikoWoo1閱讀 244評論 0 2