Android自定义View模仿虎扑直播界面的打赏按钮功能-创新互联

前言

作为一个资深篮球爱好者，我经常会用虎扑app看比赛直播，后来注意到文字直播界面右下角加了两个按钮，可以在直播过程中送虎扑币，为自己支持的球队加油。

具体的效果如下图所示：

我个人觉得挺好玩的，所以决定自己实现下这个按钮，废话不多说，先看实现的效果吧：

这个效果看起来和popupwindow差不多，但我是采用自定义view的方式来实现，下面说说过程。

实现过程

首先从虎扑的效果可以看到，它这两个按钮时浮在整个界面之上的，所以它需要和FrameLayout结合使用，因此我让它的宽度跟随屏幕大小，高度根据dpi固定，它的实际尺寸时这样的：

另外这个view初始化出来我们看到可以分为三块，背景圆、圆内文字、圆上方数字，所以正常状态下，只需要在onDraw方法中画出这三块内容即可。先在初始化方法中将自定义的属性和画笔以及初始化数据准备好：

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"};
// 计算背景框改变的长度，默认是三个按钮
mChangeWidth = (int) (2 * mSmallRadius * 3 + 4 * margin);}