Custom View-Imitate the reward button of the Hupu live broadcast game interface

As a senior basketball fan, I often use Hupu app to watch live games. Later, I noticed that there are two buttons in the lower right corner of the text live broadcast interface. You can send Hupu coins during the live broadcast to cheer for the team you support. The specific effect is shown in the figure below:

I personally think it's fun, so I decided to implement this button myself. Without further ado, let's take a look at the effect of the implementation:

This effect looks similar to popupwindow, but I use custom view to achieve it. Let me explain the process below.

First of all, from the effect of Hupu, you can see that its two buttons float above the entire interface, so it needs to be used in conjunction with FrameLayout. Therefore, I let its width follow the screen size and the height be fixed according to the dpi. Its actual size is like this:

In addition, when the view is initialized, we can see that it can be divided into three parts: the background circle, the text inside the circle, and the number above the circle. Therefore, under normal circumstances, you only need to draw these three parts in the onDraw method. First, prepare the custom attributes, brushes, and initialization data in the initialization method:

 private void init(Context context, AttributeSet attrs) {
 //Get custom properties
 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" };
 // Calculate the length of the background frame change, the default is three buttons
 mChangeWidth = ( int ) (2 * mSmallRadius * 3 + 4 * margin);}

After measuring the width of the view in onMeasure, calculate the center coordinates of the background circle and some related data values ​​based on the width.

 @Override protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec) { 
 
 int widthSize = MeasureSpec.getSize(widthMeasureSpec); 
 
 mWidth = getDefaultSize(widthSize, widthMeasureSpec); 
 
 setMeasuredDimension(mWidth, mHeight); 
 
 
 // Only then is the mWidth value measured, and then the center coordinates and related values ​​are calculated 
 
 cx = mWidth - mBigRadius; 
 
 cy = mHeight - mBigRadius; 
 
 // Center of the big circle 
 
 circle = new PointF(cx, cy); 
 
 // The center of the three buttons 
 
 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); 
 
 // The boundaries of the initial background frame are the four boundary points of the large circle 
 
 top = cy - mBigRadius; 
 
 bottom = cy + mBigRadius; 
 
 }

Because this involves the process of expanding and contracting by clicking a button, I have defined the following states, and certain operations can only be performed in specific states.

 private int mState = STATE_NORMAL; //Current expansion and contraction state 
 
 private boolean mIsRun = false ; //Whether it is expanding or shrinking 
 
 
 //Normal state 
 
 public   static final int STATE_NORMAL = 0; 
 
 //Button expand 
 
 public   static final int STATE_EXPAND = 1; 
 
 //Button shrink 
 
 public   static final int STATE_SHRINK = 2; 
 
 //Unfolding 
 
 public   static final int STATE_EXPANDING = 3; 
 
 //Shrinking 
 
 public   static final int STATE_SHRINKING = 4;

Next, the onDraw method is executed. Let’s take a look at the code first:

 @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); 
 
 }

The numbers above the circle and the text inside the circle exist throughout the whole process, so I put these two operations outside the switch. In the normal state, the circle and the previous two parts of text are drawn. When clicking to expand, the background frame expansion process and text are drawn. In the expanded state, click again to draw the contraction process and text. Of course, in the method of drawing the background frame, it is also necessary to continuously draw the big circle, and the big circle also exists all the time.

The drawing method above:

 /** 
 
 * Draw a large background circle 
 
 * @param canvas 
 
 */ 
 
 private void drawCircle(Canvas canvas) { 
 
 left = cx - mBigRadius; 
 
 right = cx + mBigRadius; 
 
 canvas.drawCircle(cx, cy, mBigRadius, mBgPaint); 
 
 } 
 
 
 
 /** 
 
 * Draw a large circle with the text indicating the number of gold coins 
 
 * @param canvas 
 
 */ 
 
 private void drawCountText(Canvas canvas) { 
 
 canvas.translate(0, -countMargin); 
 
 // Calculate the text width 
 
 float textWidth = mCountTextPaint.measureText(mCount, 0, mCount.length()); 
 
 canvas.drawText(mCount, 0, mCount.length(), (2 * mBigRadius - textWidth - 35) / 2, 0.2f, mCountTextPaint); 
 
 } 
 
 
 
 /** 
 
 * Draw the text inside the big circle 
 
 * @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(); 
 
 } 
 
 
 
 /** 
 
 * Expand and shrink the background frame 
 
 * @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)) { 
 
 // Draw the first button 
 
 canvas.drawCircle(cx - mChange, cy, mSmallRadius, mBgPaint); 
 
 // Draw the text inside the first button 
 
 canvas.drawText(mDatas[0], cx - (mBigRadius - mSmallRadius) - mChange, cy + 15, mTextPaint); 
 
 } else if ((mChange > 2 * mSmallRadius + margin) && (mChange <= 4 * mSmallRadius + 2 * margin)) { 
 
 // Draw the first button 
 
 canvas.drawCircle(cx - mBigRadius - mSmallRadius - margin, cy, mSmallRadius, mBgPaint); 
 
 // Draw the text inside the first button 
 
 canvas.drawText(mDatas[0], cx - mBigRadius - mSmallRadius - margin - 20, cy + 15, mTextPaint); 
 
 
 // Draw the second button 
 
 canvas.drawCircle(cx - mChange, cy, mSmallRadius, mBgPaint); 
 
 // Draw the text inside the second button 
 
 canvas.drawText(mDatas[1], cx - mChange - 20, cy + 15, mTextPaint); 
 
 } else if ((mChange > 4 * mSmallRadius + 2 * margin) && (mChange <= 6 * mSmallRadius + 3 * margin)) { 
 
 // Draw the first button 
 
 canvas.drawCircle(cx - mBigRadius - mSmallRadius - margin, cy, mSmallRadius, mBgPaint); 
 
 // Draw the text inside the first button 
 
 canvas.drawText(mDatas[0], cx - mBigRadius - mSmallRadius - margin - 16, cy + 15, mTextPaint); 
 
 
 // Draw the second button 
 
 canvas.drawCircle(cx - mBigRadius - 3 * mSmallRadius - 2 * margin, cy, mSmallRadius, mBgPaint); 
 
 // Draw the text inside the second button 
 
 canvas.drawText(mDatas[1], cx - mBigRadius - 3 * mSmallRadius - 2 * margin - 25, cy + 15, mTextPaint); 
 
 
 // Draw the third button 
 
 canvas.drawCircle(cx - mChange, cy, mSmallRadius, mBgPaint); 
 
 // Draw the text inside the third button 
 
 canvas.drawText(mDatas[2], cx - mChange - 34, cy + 15, mTextPaint); 
 
 } else if (mChange > 6 * mSmallRadius + 3 * margin) { 
 
 // Draw the first button 
 
 canvas.drawCircle(cx - mBigRadius - mSmallRadius - margin, cy, mSmallRadius, mBgPaint); 
 
 // Draw the text inside the first button 
 
 canvas.drawText(mDatas[0], cx - mBigRadius - mSmallRadius - margin - 16, cy + 15, mTextPaint); 
 
 
 // Draw the second button 
 
 canvas.drawCircle(cx - mBigRadius - 3 * mSmallRadius - 2 * margin, cy, mSmallRadius, mBgPaint); 
 
 // Draw the text inside the second button 
 
 canvas.drawText(mDatas[1], cx - mBigRadius - 3 * mSmallRadius - 2 * margin - 25, cy + 15, mTextPaint); 
 
 
 // Draw the third button 
 
 canvas.drawCircle(cx - mBigRadius - 5 * mSmallRadius - 3 * margin, cy, mSmallRadius, mBgPaint); 
 
 // Draw the text inside the third button 
 
 canvas.drawText(mDatas[2], cx - mBigRadius - 5 * mSmallRadius - 3 * margin - 34, cy + 15, mTextPaint); 
 
 } 
 
 drawCircle(canvas); 
 
 
 }

Then comes the processing of click events. The expansion or contraction operation will only be triggered when the touch point is within the large circle. When the small circle is clicked, an interface is provided for external calls.

 @Override public boolean onTouchEvent(MotionEvent event) { 
 
 int   action = event.getAction(); 
 
 switch ( action ) { 
 
 case MotionEvent.ACTION_DOWN: 
 
 //If the animation is in progress when clicking, do not process 
 
 if (mIsRun) return   true ; 
 
 PointF pointF = new PointF(event.getX(), event.getY()); 
 
 if (isPointInCircle(pointF, circle, mBigRadius)) { //If the touch point is within the big circle, pop up or shrink the button according to the pop-up direction 
 
 if ((mState == STATE_SHRINK || mState == STATE_NORMAL) && !mIsRun) { 
 
 //Expand 
 
 mIsRun = true ;//This must be set to true first , because onAnimationStart is called after onAnimationUpdate 
 
 showPopMenu(); 
 
 } else { 
 
 //shrink 
 
 mIsRun = true ; 
 
 hidePopMenu(); 
 
 } 
 
 } else { //The touch point is not within the big circle 
 
 if (mState == STATE_EXPAND) { //If it is in the expanded state 
 
 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); 
 
 }

The expansion and contraction animation is to change the width attribute of the background frame, and listen to this attribute animation to redraw the entire view when the width value changes. Because I determined the radius of the big circle and the small circle and the distance between the small circle and the background frame at the beginning, the width of the background frame has been calculated during initialization:

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

 /** 
 
 * Pop-up background frame 
 
 */ 
 
 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 ; 
 
 //Set the state to expanded after the animation ends 
 
 mState = STATE_EXPAND; 
 
 } 
 
 }); 
 
 animator.setDuration(500); 
 
 animator.start(); 
 
 } 
 
 }

 /** 
 
 * Hide popup box 
 
 */ 
 
 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 ; 
 
 //Set the state to shrink after the animation ends 
 
 mState = STATE_SHRINK; 
 
 } 
 
 }); 
 
 animator.setDuration(500); 
 
 animator.start(); 
 
 } 
 
 }

This process looks like popping up or shrinking. In fact, every time the width value changes a little, all components are redrawn. However, the size and position of the text, large circle and other contents do not change. Only the width value of the background box changes, so this effect occurs.

Usage in 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= "Support Rocket"   
 
 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= "The Heat are invincible"   
 
 app: count = "251"   
 
 app:theme_color= "#F49C11" /> 
 
 </LinearLayout>

Use in 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 increased" + num, Toast.LENGTH_SHORT).show(); 
 
 } 
 
 });

This is roughly the implementation process. It is still a little different from the original effect. Mine still has many flaws, such as the centering problem of the text. I have not implemented the rotation animation of the text in the small circle when it pops up or shrinks.