Android自定义View实现可展开、会呼吸的按钮

不专门练习的话，自定义view的知识又忘了许多。正好新项目里有这个需求，就再练习一下，代码已上传：地址

可以修改文本、文字大小、各种颜色：

1、按照国际惯例，就是新建attrs，写各种需要的属性，然后获取，新建各种所需的paint、rect，重写onmeasure计算宽高，重写ondraw画图搞起。。

2、关于可展开效果，其实就是点击发布时，启动一个valueanimator，对一个圆角矩形的左边距离不断改变：

int mbackgroundrectfleft;
rectf mbackgroundrectf = new rectf();

@override
protected void ondraw(canvas canvas) {
 mbackgroundrectf.set(mbackgroundrectfleft, 0, getwidth(), getheight());
 canvas.drawroundrect(mbackgroundrectf, mouterradius, mouterradius, mmbackgroundrectpaint);//圆角背景矩形
}

private void openbutton() {
 valueanimator rectleftanim = valueanimator.ofint(mbackgroundrectfleft, marcwidth / 2);
 rectleftanim.setduration(250);
 valueanimator textalphaanim = valueanimator.ofint(0, mitemtextalpha);
 textalphaanim.setduration(120);
 rectleftanim.addupdatelistener(new valueanimator.animatorupdatelistener() {
 @override
 public void onanimationupdate(valueanimator animation) {
  mbackgroundrectfleft = (int) animation.getanimatedvalue();
  invalidate();
 }
 });
}

3、关于呼吸效果，就是一个对外圆圈半径改变的valueanimator：

mbreatheradius = getheight() / 2 - marcwidth / 4;
mbreatheanim = valueanimator.offloat(mbreatheradius, mbreatheradius - marcwidth / 2);
mbreatheanim.setduration(1000);
mbreatheanim.setrepeatmode(valueanimator.reverse);
mbreatheanim.setrepeatcount(integer.max_value);
mbreatheanim.addupdatelistener(new valueanimator.animatorupdatelistener() {
 @override
 public void onanimationupdate(valueanimator animation) {
 mbreatheradius = (float) animation.getanimatedvalue();
 invalidate();
 }
});
mbreatheanim.start();

@override
protected void ondraw(canvas canvas) {
 canvas.drawcircle(minnercirclecenterx, minnercirclecentery, mbreatheradius, mbreathepaint);//呼吸圈

4、关于文字位置居中计算，以前我用一个rect，用

paint.gettextbounds(text, 0, text.length(), mtextrect);
int textwidth = mtextrect.width();
int textheight = mtextrect.height();

这样计算不准确，可能是因为返回的宽高是int值，应该用fontmetrics类来计算，大家可以搜一下：

float buttontextwidth = mbuttontextpaint.measuretext(mbuttonstr, 0, mbuttonstr.length());

paint.fontmetrics publishfontmetrics = mbuttontextpaint.getfontmetrics();
canvas.drawtext(mbuttonstr, 0, mbuttonstr.length(), getwidth() - mouterradius - marcwidth / 2 - buttontextwidth / 2, mouterradius + marcwidth / 2 + -(publishfontmetrics.ascent + publishfontmetrics.descent) / 2, mbuttontextpaint);

5、再有就是ontouchevent的处理，因为这个控件不是一直都是展开状态，那么就要求控件在闭合的时候，要不影响该控件下层控件对点击的处理。比如我这个expandablebreathngbutton，下层是一个recyclerview，并设置了onitemclicklistener，那我这个按钮在闭合时，点击按钮左侧但还是在这个view范围内的地方，如下图红框内

这个范围内应该不处理事件，return false

@override
public boolean ontouchevent(motionevent event) {
 switch (event.getaction()) {
 case motionevent.action_down:
  x = (int) event.getx();
  y = (int) event.gety();
  if (!isopen && x < getwidth() - 2 * mouterradius && y > 0 && y < getheight()) {
  //未展开状态下，点击发布圆左侧的位置，不处理事件
  return false;
  }
  break;
 }
}

然后在up事件中计算点击了发布按钮还是展开的item，就是计算点击的坐标是在圆半径内，还是在item矩形范围内。

最后源码奉上： 详细地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。