自定義view-仿虎撲直播比賽界面的打賞按鈕

作為一個(gè)資深籃球愛好者，我經(jīng)常會(huì)用虎撲app看比賽直播，后來注意到文字直播界面右下角加了兩個(gè)按鈕，可以在直播過程中送虎撲幣，為自己支持的球隊(duì)加油，具體的效果如下圖所示：

1701061

我個(gè)人覺得挺好玩的，所以決定自己實(shí)現(xiàn)下這個(gè)按鈕，廢話不多說，先看實(shí)現(xiàn)的效果吧：

hoopview

這個(gè)效果看起來和popupwindow差不多，但我是采用自定義view的方式來實(shí)現(xiàn)，下面說說過程。

首先從虎撲的效果可以看到，它這兩個(gè)按鈕時(shí)浮在整個(gè)界面之上的，所以它需要和FrameLayout結(jié)合使用，因此我讓它的寬度跟隨屏幕大小，高度根據(jù)dpi固定，它的實(shí)際尺寸時(shí)這樣的：

1701062

另外這個(gè)view初始化出來我們看到可以分為三塊，背景圓、圓內(nèi)文字、圓上方數(shù)字，所以正常狀態(tài)下，只需要在onDraw方法中畫出這三塊內(nèi)容即可。先在初始化方法中將自定義的屬性和畫筆以及初始化數(shù)據(jù)準(zhǔn)備好：

private void init(Context context, AttributeSet attrs) {
    //獲取自定義屬性
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.HoopView);
    mThemeColor = typedArray.getColor(R.styleable.HoopView_theme_color, Color.YELLOW);
    mText = typedArray.getString(R.styleable.HoopView_text);
    mCount = typedArray.getString(R.styleable.HoopView_count);

    mBgPaint = new Paint();
    mBgPaint.setAntiAlias(true);
    mBgPaint.setColor(mThemeColor);
    mBgPaint.setAlpha(190);
    mBgPaint.setStyle(Paint.Style.FILL);

    mPopPaint = new Paint();
    mPopPaint.setAntiAlias(true);
    mPopPaint.setColor(Color.LTGRAY);
    mPopPaint.setAlpha(190);
    mPopPaint.setStyle(Paint.Style.FILL_AND_STROKE);

    mTextPaint = new TextPaint();
    mTextPaint.setAntiAlias(true);
    mTextPaint.setColor(mTextColor);
    mTextPaint.setTextSize(context.getResources().getDimension(R.dimen.hoop_text_size));

    mCountTextPaint = new TextPaint();
    mCountTextPaint.setAntiAlias(true);
    mCountTextPaint.setColor(mThemeColor);
    mCountTextPaint.setTextSize(context.getResources().getDimension(R.dimen.hoop_count_text_size));

    typedArray.recycle();

    mBigRadius = context.getResources().getDimension(R.dimen.hoop_big_circle_radius);
    mSmallRadius = context.getResources().getDimension(R.dimen.hoop_small_circle_radius);
    margin = (int) context.getResources().getDimension(R.dimen.hoop_margin);
    mHeight = (int) context.getResources().getDimension(R.dimen.hoop_view_height);
    countMargin = (int) context.getResources().getDimension(R.dimen.hoop_count_margin);

    mDatas = new String[] {"1", "10", "100"};
    // 計(jì)算背景框改變的長度，默認(rèn)是三個(gè)按鈕
    mChangeWidth = (int) (2 * mSmallRadius * 3 + 4 * margin);

}

在onMeasure中測出view的寬度后，根據(jù)寬度計(jì)算出背景圓的圓心坐標(biāo)和一些相關(guān)的數(shù)據(jù)值。

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    mWidth = getDefaultSize(widthSize, widthMeasureSpec);
    setMeasuredDimension(mWidth, mHeight);

    // 此時(shí)才測出了mWidth值，再計(jì)算圓心坐標(biāo)及相關(guān)值
    cx = mWidth - mBigRadius;
    cy = mHeight - mBigRadius;
    // 大圓圓心
    circle = new PointF(cx, cy);
    // 三個(gè)按鈕的圓心
    circleOne = new PointF(cx - mBigRadius - mSmallRadius - margin, cy);
    circleTwo = new PointF(cx - mBigRadius - 3 * mSmallRadius - 2 * margin, cy);
    circleThree = new PointF(cx - mBigRadius - 5 * mSmallRadius - 3 * margin, cy);
    // 初始的背景框的邊界即為大圓的四個(gè)邊界點(diǎn)
    top = cy - mBigRadius;
    bottom = cy + mBigRadius;
}

因?yàn)檫@里面涉及到點(diǎn)擊按鈕展開和收縮的過程，所以我定義了如下幾種狀態(tài)，只有在特定的狀態(tài)下才能進(jìn)行某些操作。

private int mState = STATE_NORMAL;//當(dāng)前展開收縮的狀態(tài)
private boolean mIsRun = false;//是否正在展開或收縮

//正常狀態(tài)
public static final int STATE_NORMAL = 0;
//按鈕展開
public static final int STATE_EXPAND = 1;
//按鈕收縮
public static final int STATE_SHRINK = 2;
//正在展開
public static final int STATE_EXPANDING = 3;
//正在收縮
public static final int STATE_SHRINKING = 4;

接下來就執(zhí)行onDraw方法了，先看看代碼：

@Override protected void onDraw(Canvas canvas) {
    switch (mState) {
        case STATE_NORMAL:
            drawCircle(canvas);
            break;
        case STATE_SHRINK:
        case STATE_SHRINKING:
            drawBackground(canvas);
            break;
        case STATE_EXPAND:
        case STATE_EXPANDING:
            drawBackground(canvas);
            break;
    }
    drawCircleText(canvas);
    drawCountText(canvas);
}

圓上方的數(shù)字和圓內(nèi)的文字是整個(gè)過程中一直存在的，所以我將這兩個(gè)操作放在switch之外，正常狀態(tài)下繪制圓和之前兩部分文字，點(diǎn)擊展開時(shí)繪制背景框展開過程和文字，展開狀態(tài)下再次點(diǎn)擊繪制收縮過程和文字，當(dāng)然在繪制背景框的方法中也需要不斷繪制大圓，大圓也是一直存在的。

上面的繪制方法：

/**
 * 畫背景大圓
 * @param canvas
 */
private void drawCircle(Canvas canvas) {
    left = cx - mBigRadius;
    right = cx + mBigRadius;
    canvas.drawCircle(cx, cy, mBigRadius, mBgPaint);
}


/**
 * 畫大圓上面表示金幣數(shù)的文字
 * @param canvas
 */
private void drawCountText(Canvas canvas) {
    canvas.translate(0, -countMargin);
    //計(jì)算文字的寬度
    float textWidth = mCountTextPaint.measureText(mCount, 0, mCount.length());
    canvas.drawText(mCount, 0, mCount.length(), (2 * mBigRadius - textWidth - 35) / 2, 0.2f, mCountTextPaint);
}


/**
 * 畫大圓內(nèi)的文字
 * @param canvas
 */
private void drawCircleText(Canvas canvas) {
    StaticLayout layout = new StaticLayout(mText, mTextPaint, (int) (mBigRadius * Math.sqrt(2)), Layout.Alignment.ALIGN_CENTER, 1.0f, 0.0f, true);
    canvas.translate(mWidth - mBigRadius * 1.707f, mHeight - mBigRadius * 1.707f);
    layout.draw(canvas);
    canvas.save();
}


/**
 * 畫背景框展開和收縮
 * @param canvas
 */
private void drawBackground(Canvas canvas) {
    left = cx - mBigRadius - mChange;
    right = cx + mBigRadius;
    canvas.drawRoundRect(left, top, right, bottom, mBigRadius, mBigRadius, mPopPaint);
    if ((mChange > 0) && (mChange <= 2 * mSmallRadius + margin)) {
        // 繪制第一個(gè)按鈕
        canvas.drawCircle(cx - mChange, cy, mSmallRadius, mBgPaint);
        // 繪制第一個(gè)按鈕內(nèi)的文字
        canvas.drawText(mDatas[0], cx - (mBigRadius - mSmallRadius) - mChange, cy + 15, mTextPaint);
    } else if ((mChange > 2 * mSmallRadius + margin) && (mChange <= 4 * mSmallRadius + 2 * margin)) {
        // 繪制第一個(gè)按鈕
        canvas.drawCircle(cx - mBigRadius - mSmallRadius - margin, cy, mSmallRadius, mBgPaint);
        // 繪制第一個(gè)按鈕內(nèi)的文字
        canvas.drawText(mDatas[0], cx - mBigRadius - mSmallRadius - margin - 20, cy + 15, mTextPaint);

        // 繪制第二個(gè)按鈕
        canvas.drawCircle(cx - mChange, cy, mSmallRadius, mBgPaint);
        // 繪制第二個(gè)按鈕內(nèi)的文字
        canvas.drawText(mDatas[1], cx - mChange - 20, cy + 15, mTextPaint);
    } else if ((mChange > 4 * mSmallRadius + 2 * margin) && (mChange <= 6 * mSmallRadius + 3 * margin)) {
        // 繪制第一個(gè)按鈕
        canvas.drawCircle(cx - mBigRadius - mSmallRadius - margin, cy, mSmallRadius, mBgPaint);
        // 繪制第一個(gè)按鈕內(nèi)的文字
        canvas.drawText(mDatas[0], cx - mBigRadius - mSmallRadius - margin - 16, cy + 15, mTextPaint);

        // 繪制第二個(gè)按鈕
        canvas.drawCircle(cx - mBigRadius - 3 * mSmallRadius - 2 * margin, cy, mSmallRadius, mBgPaint);
        // 繪制第二個(gè)按鈕內(nèi)的文字
        canvas.drawText(mDatas[1], cx - mBigRadius - 3 * mSmallRadius - 2 * margin - 25, cy + 15, mTextPaint);

        // 繪制第三個(gè)按鈕
        canvas.drawCircle(cx - mChange, cy, mSmallRadius, mBgPaint);
        // 繪制第三個(gè)按鈕內(nèi)的文字
        canvas.drawText(mDatas[2], cx - mChange - 34, cy + 15, mTextPaint);
    } else  if (mChange > 6 * mSmallRadius + 3 * margin) {
        // 繪制第一個(gè)按鈕
        canvas.drawCircle(cx - mBigRadius - mSmallRadius - margin, cy, mSmallRadius, mBgPaint);
        // 繪制第一個(gè)按鈕內(nèi)的文字
        canvas.drawText(mDatas[0], cx - mBigRadius - mSmallRadius - margin - 16, cy + 15, mTextPaint);

        // 繪制第二個(gè)按鈕
        canvas.drawCircle(cx - mBigRadius - 3 * mSmallRadius - 2 * margin, cy, mSmallRadius, mBgPaint);
        // 繪制第二個(gè)按鈕內(nèi)的文字
        canvas.drawText(mDatas[1], cx - mBigRadius - 3 * mSmallRadius - 2 * margin - 25, cy + 15, mTextPaint);

        // 繪制第三個(gè)按鈕
        canvas.drawCircle(cx - mBigRadius - 5 * mSmallRadius - 3 * margin, cy, mSmallRadius, mBgPaint);
        // 繪制第三個(gè)按鈕內(nèi)的文字
        canvas.drawText(mDatas[2], cx - mBigRadius - 5 * mSmallRadius - 3 * margin - 34, cy + 15, mTextPaint);
    }
    drawCircle(canvas);

}

然后是點(diǎn)擊事件的處理，只有觸摸點(diǎn)在大圓內(nèi)時(shí)才會(huì)觸發(fā)展開或收縮的操作，點(diǎn)擊小圓時(shí)提供了一個(gè)接口給外部調(diào)用。

@Override public boolean onTouchEvent(MotionEvent event) {
    int action = event.getAction();
    switch (action) {
        case MotionEvent.ACTION_DOWN:
            //如果點(diǎn)擊的時(shí)候動(dòng)畫在進(jìn)行，不處理
            if (mIsRun) return true;
            PointF pointF = new PointF(event.getX(), event.getY());
            if (isPointInCircle(pointF, circle, mBigRadius)) { //如果觸摸點(diǎn)在大圓內(nèi)，根據(jù)彈出方向彈出或者收縮按鈕
                if ((mState == STATE_SHRINK || mState == STATE_NORMAL) && !mIsRun) {
                    //展開
                    mIsRun = true;//這是必須先設(shè)置true，因?yàn)閛nAnimationStart在onAnimationUpdate之后才調(diào)用
                    showPopMenu();
                } else {
                    //收縮
                    mIsRun = true;
                    hidePopMenu();
                }
            } else { //觸摸點(diǎn)不在大圓內(nèi)
                if (mState == STATE_EXPAND) { //如果是展開狀態(tài)
                    if (isPointInCircle(pointF, circleOne, mSmallRadius)) {
                        listener.clickButton(this, Integer.parseInt(mDatas[0]));
                    } else if (isPointInCircle(pointF, circleTwo, mSmallRadius)) {
                        listener.clickButton(this, Integer.parseInt(mDatas[1]));
                    } else if (isPointInCircle(pointF, circleThree, mSmallRadius)) {
                        listener.clickButton(this, Integer.parseInt(mDatas[2]));
                    }
                    mIsRun = true;
                    hidePopMenu();
                }
            }
            break;
    }
    return super.onTouchEvent(event);
}

展開和收縮的動(dòng)畫是改變背景框的寬度屬性的動(dòng)畫，并監(jiān)聽這個(gè)屬性動(dòng)畫，在寬度值改變的過程中去重新繪制整個(gè)view。因?yàn)橐婚_始我就確定了大圓小圓的半徑和小圓與背景框之間的間距，所以初始化時(shí)已經(jīng)計(jì)算好了背景框的寬度：

mChangeWidth = (int) (2 * mSmallRadius * 3 + 4 * margin);

/**
 * 彈出背景框
 */
private void showPopMenu() {
    if (mState == STATE_SHRINK || mState == STATE_NORMAL) {
        ValueAnimator animator = ValueAnimator.ofInt(0, mChangeWidth);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override public void onAnimationUpdate(ValueAnimator animation) {
                if (mIsRun) {
                    mChange = (int) animation.getAnimatedValue();
                    invalidate();
                } else {
                    animation.cancel();
                    mState = STATE_NORMAL;
                }
            }
        });
        animator.addListener(new AnimatorListenerAdapter() {
            @Override public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                mIsRun = true;
                mState = STATE_EXPANDING;
            }


            @Override public void onAnimationCancel(Animator animation) {
                super.onAnimationCancel(animation);
                mIsRun = false;
                mState = STATE_NORMAL;
            }


            @Override public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mIsRun = false;
                //動(dòng)畫結(jié)束后設(shè)置狀態(tài)為展開
                mState = STATE_EXPAND;
            }
        });
        animator.setDuration(500);
        animator.start();
    }
}

/**
 * 隱藏彈出框
 */
private void hidePopMenu() {
    if (mState == STATE_EXPAND) {
        ValueAnimator animator = ValueAnimator.ofInt(mChangeWidth, 0);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override public void onAnimationUpdate(ValueAnimator animation) {
                if (mIsRun) {
                    mChange = (int) animation.getAnimatedValue();
                    invalidate();
                } else {
                    animation.cancel();
                }
            }
        });
        animator.addListener(new AnimatorListenerAdapter() {
            @Override public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                mIsRun = true;
                mState = STATE_SHRINKING;
            }


            @Override public void onAnimationCancel(Animator animation) {
                super.onAnimationCancel(animation);
                mIsRun = false;
                mState = STATE_EXPAND;
            }


            @Override public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mIsRun = false;
                //動(dòng)畫結(jié)束后設(shè)置狀態(tài)為收縮
                mState = STATE_SHRINK;
            }
        });
        animator.setDuration(500);
        animator.start();
    }
}

這個(gè)過程看起來是彈出或收縮，實(shí)際上寬度值每改變一點(diǎn)，就將所有的組件重繪一次，只是文字和大圓等內(nèi)容的尺寸及位置都沒有變化，只有背景框的寬度值在變，所以才有這種效果。

在xml中的使用：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="20dp"
    android:layout_alignParentRight="true"
    android:orientation="vertical">

    <com.xx.hoopcustomview.HoopView
        android:id="@+id/hoopview1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        app:text="支持火箭"
        app:count="1358"
        app:theme_color="#31A129"/>

    <com.xx.hoopcustomview.HoopView
        android:id="@+id/hoopview2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        app:text="熱火無敵"
        app:count="251"
        app:theme_color="#F49C11"/>
</LinearLayout>

activity中使用：

hoopview1 = (HoopView) findViewById(R.id.hoopview1);
hoopview1.setOnClickButtonListener(new HoopView.OnClickButtonListener() {
    @Override public void clickButton(View view, int num) {
        Toast.makeText(MainActivity.this, "hoopview1增加了" + num, Toast.LENGTH_SHORT).show();
    }
});

大致實(shí)現(xiàn)過程就是這樣，與原始效果還是有點(diǎn)區(qū)別，我這個(gè)還有很多瑕疵，比如文字的位置居中問題，彈出或收縮時(shí)，小圓內(nèi)的文字的旋轉(zhuǎn)動(dòng)畫我沒有實(shí)現(xiàn)。

代碼地址：
https://github.com/shenhuniurou/HoopCustomView

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 NBA全明星周末！重要事情說一遍！作為一個(gè)經(jīng)常在虎撲上看NBA直播的小球迷，老早就留意到了打賞加油的小控件，...
    dengzq閱讀 1,225評(píng)論 0贊 2
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,366評(píng)論 25贊 708
  • 主題一:關(guān)于婚姻的幾個(gè)核心主題--1、經(jīng)濟(jì)。雙方收入高低、金錢的支配權(quán)(各花各的、一方主導(dǎo)、共同賬戶及商議)、...
    湯蔚閱讀 471評(píng)論 0贊 3
  • 以前看到過一句話，一直都在腦中，難以忘懷，越是長大，越是能深刻感覺：“越是深夜，越是孤獨(dú)”。我想大概越是夜深人靜就...
    朝露2閱讀 235評(píng)論 1贊 1
  • 網(wǎng)絡(luò)時(shí)代，越來越多的人適應(yīng)、甚至喜歡上了“快餐式”消費(fèi)。隨之而來的影響，我們沒有了“英雄”，滿文具店的是一次性水筆...
    浩哥隨思錄閱讀 328評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容