【Android】自定义View实现可展开FloatingBut
2017-07-18 本文已影响0人
7dollars
之前，项目中需要一个和界面风格匹配的课展开的悬浮按钮。在尝试了多个第三方库无果后，看起来只能自己写一个了。下面开始正题。
先丢一个效果图
按钮未展开
按钮展开
首先，创建一个Myfab类，并继承自View类，然后复写初始的onMeasure方法以及构造方法
然后，分析一下这个按钮的绘制逻辑。
- 整个按钮背景由三部分组成，上部分的半圆，中间的矩形，以及下部分的半圆。
- 闭合的时候，中间矩形的高度为0，上下半圆贴在一起。
- 展开的过程中，下半部分半圆不动，矩形的长随着时间增长，上方半圆的y坐标随着长方形的增长而减小（就是被长方形顶上去了）。
- 绘制的时候判断，如果伸长的高度足够绘制下一个图标，就进行绘制。
然后就是代码
onMeasure
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width;
int height;
width=MeasureSpec.getSize(widthMeasureSpec);
height=MeasureSpec.getSize(heightMeasureSpec);
width=width>height?height:width;//取较小的
height=height>width?width:height;
height+=icon.size()*width; //根据加入图标个数累加view高度
realheight=height-width;//加入图标的总高度
setMeasuredDimension(width,height);
}
这里，我取了用户设置的长和宽中较小的值作为button的直径，按钮展开后的高=直径*加入的图标个数，也就是说，每一个图标所占有的区域都是一个正方形。
onTouchEvent
public boolean onTouchEvent(MotionEvent event) {
boolean result=false;
switch (event.getAction())
{
case MotionEvent.ACTION_UP:
{
result=TouchMethod((int)event.getX(), (int)event.getY(),false);
break;
}
case MotionEvent.ACTION_DOWN:
{
result=TouchMethod((int)event.getX(), (int)event.getY(),true);//
break;
}
}
if(result)
return true; //已消费事件
else
return false;//未消费事件
}
这里重写了onTouchEvent方法，以便处理view的点击事件。TouchMethod方法判断点击是否有效，如果有效，则消费点击事件，否则不消费。
TouchMethod
private boolean TouchMethod(int x,int y ,boolean isDown)
{
if(y>getMeasuredHeight()-getMeasuredWidth()&&y<getMeasuredHeight()) //如果点在底部按钮上
{
if(!isDown)
startAnimation();
return true;
}
else if(y>0&&y<getMeasuredHeight()-getMeasuredWidth()&&isShow)//如果点在选项上，并且按钮在展开状态
{
if(!isDown) {
for (int i = icon.size(); i > 0; i--) //计算并判断点在了哪个位置（view的宽度为Width，高度为icon.size*Width,相当于每个图标所占的区域都是正方形）
{
if (y > (i - 1) * getMeasuredWidth() && y < i * getMeasuredWidth()) {
if (menuListener != null)
menuListener.click(icon.size() - i + 1);//调用接口
}
}
}
return true;
}
else
return false;//按钮未展开
}
TouchMethod方法对view的点击事件进行了处理。如果按钮处于闭合状态，并且可见部分受到了点击，则展开菜单。如果不可见部分（收缩起来后上面添加的按钮部分）收到了点击，则会返回false，并由调用它的onTouchEvent方法返回未消费事件标记。如果按钮处于展开状态，并受到了点击，则会调用回调接口，并根据点击的区域传入相应的参数。
##onDraw
protected void onDraw(Canvas canvas) {
// super.onDraw(canvas);
int px=getMeasuredWidth()/2;
Paint mPaint=new Paint();
mPaint.setColor(color); //设置画笔颜色
mPaint.setStyle(Paint.Style.FILL); //设置画笔模式为填充
mPaint.setStrokeWidth(10f);//设置画笔宽度为10px
mPaint.setAntiAlias(true);
Path path=new Path();
path.setFillType(Path.FillType.EVEN_ODD);
canvas.translate(px, getMeasuredHeight()-px);//移动坐标中心
canvas.drawArc(-px,-px,px,px,0,180,true,mPaint);//画出底部的半圆
canvas.drawArc(-px, -px - rect, px, -rect + px, 180, 180, true, mPaint); //画出上部分的半圆
canvas.drawRect(-px, -rect, px, 0, mPaint);//画出两个半圆中间的矩形
Bitmap bitmap= BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.ic_add_circle_outline_white_24dp);
canvas.drawBitmap(bitmap,-bitmap.getWidth()/2,-bitmap.getHeight()/2,mPaint); //获取并绘制按钮没有展开时的图标
for(int i=0;i<icon.size();i++)
{
if(rect>=2*px*(i+1))//2*px=getMeasuredWidth(),i+1=当前的图标个数(-y)，如果上升高度足够显示下一个图标，就绘制
{
Bitmap bitmap1= BitmapFactory.decodeResource(getContext().getResources(),icon.get(i).intValue());
canvas.drawBitmap(bitmap1,-bitmap.getWidth()/2,-bitmap.getHeight()/2-(i+1)*2*px,mPaint);//在相应位置绘制图标
}
}
if(rect==realheight) {//完全展开
isShow=true;
}
else if(rect==0) { //完全闭合
isShow=false;
}
}
首先，初始化画笔，画布等一系列东西。然后，onDraw会根据rect这个全局变量的值来进行绘制（rect的范围是0-realheight，大小的变化由自定义的Animation来控制，后面会有说明）。首先绘制的是两个半圆和半圆中间的矩形
canvas.drawArc(-px,-px,px,px,0,180,true,mPaint);//画出底部的半圆
canvas.drawArc(-px, -px - rect, px, -rect + px, 180, 180, true, mPaint); //画出上部分的半圆
canvas.drawRect(-px, -rect, px, 0, mPaint);//画出两个半圆中间的矩形
之后，绘制的是按钮在没有展开时显示在上面的图标
Bitmap bitmap= BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.ic_add_circle_outline_white_24dp);
canvas.drawBitmap(bitmap,-bitmap.getWidth()/2,-bitmap.getHeight()/2,mPaint); //获取并绘制按钮没有展开时的图标
再根据动态插入图标的个数，绘制剩下的图标
for(int i=0;i<icon.size();i++)
{
if(rect>=2*px*(i+1))//2*px=getMeasuredWidth(),i+1=当前的图标个数(-y)，如果上升高度足够显示下一个图标，就绘制
{
Bitmap bitmap1= BitmapFactory.decodeResource(getContext().getResources(),icon.get(i).intValue());
canvas.drawBitmap(bitmap1,-bitmap.getWidth()/2,-bitmap.getHeight()/2-(i+1)*2*px,mPaint);//在相应位置绘制图标
}
}
最后，再判断是否已经展开/回缩完全，并设置相应的flag即可。
控制rect变化的动画有两个，分别控制展开和回缩
控制展开的动画
private class ami extends Animation
{
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
rect=(int)(interpolatedTime*realheight);
invalidate();
}
}
控制回缩的动画
private class ami2 extends Animation
{
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
rect=(int)((1-interpolatedTime)*realheight);
invalidate();
}
}
以及对动画使用的控制
public void startAnimation() {
if(!isShow) {
ami move = new ami();
move.setDuration(300);
move.setInterpolator(new AccelerateDecelerateInterpolator());
startAnimation(move);
}
else
{
ami2 move = new ami2();
move.setDuration(300);
move.setInterpolator(new AccelerateDecelerateInterpolator());
startAnimation(move);
}
}
可以看出，想要展开/回缩button，只需要调用自定义的startAnimation()方法即可，动画持续的时间都是300毫秒。这里，我对动画设置了AccelerateDecelerateInterpolator这个插值器，以便实现开始加速和结束减速的效果，不过因为这个插值器是用的cos函数来给出插值，所以离着MD风格动画要求的精细度还差不少，并且开始和结束的加速度是一样的（MD动画要求较快的加速和缓慢的减速）...等着有空，再重新自定义个插值器吧。
以下给出整个view的完整代码
public class Myfab extends View {
private boolean isShow=false;
private int rect=0;
private List<Integer> icon=new ArrayList();
private MenuListener menuListener;
private int color;
private int realheight=0;
public void setColor(int color) {
this.color = color;
}
public Myfab(Context context) {
super(context);
}
public Myfab(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
if (!isClickable()) {
setClickable(true);
}
color=ContextCompat.getColor(context,R.color.colorPrimary);
}
public void collapse()
{
rect=0;
invalidate();//不加动画直接缩回去
}
public void setIcon(List<Integer> list)
{
this.icon=list;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
boolean result=false;
switch (event.getAction())
{
case MotionEvent.ACTION_UP:
{
result=TouchMethod((int)event.getX(), (int)event.getY(),false);
break;
}
case MotionEvent.ACTION_DOWN:
{
result=TouchMethod((int)event.getX(), (int)event.getY(),true);//
break;
}
}
if(result)
return true; //已消费事件
else
return false;//未消费事件
}
private boolean TouchMethod(int x,int y ,boolean isDown)
{
if(y>getMeasuredHeight()-getMeasuredWidth()&&y<getMeasuredHeight()) //如果点在底部按钮上
{
if(!isDown)
startAnimation();
return true;
}
else if(y>0&&y<getMeasuredHeight()-getMeasuredWidth()&&isShow)//如果点在选项上，并且按钮在展开状态
{
if(!isDown) {
for (int i = icon.size(); i > 0; i--) //计算并判断点在了哪个位置（view的宽度为Width，高度为icon.size*Width,相当于每个图标所占的区域都是正方形）
{
if (y > (i - 1) * getMeasuredWidth() && y < i * getMeasuredWidth()) {
if (menuListener != null)
menuListener.click(icon.size() - i + 1);//调用接口
}
}
}
return true;
}
else
return false;//按钮未展开
}
@Override
protected void onDraw(Canvas canvas) {
// super.onDraw(canvas);
int px=getMeasuredWidth()/2;
Paint mPaint=new Paint();
mPaint.setColor(color); //设置画笔颜色
mPaint.setStyle(Paint.Style.FILL); //设置画笔模式为填充
mPaint.setStrokeWidth(10f);//设置画笔宽度为10px
mPaint.setAntiAlias(true);
Path path=new Path();
path.setFillType(Path.FillType.EVEN_ODD);
canvas.translate(px, getMeasuredHeight()-px);//移动坐标中心
canvas.drawArc(-px,-px,px,px,0,180,true,mPaint);//画出底部的半圆
canvas.drawArc(-px, -px - rect, px, -rect + px, 180, 180, true, mPaint); //画出上部分的半圆
canvas.drawRect(-px, -rect, px, 0, mPaint);//画出两个半圆中间的矩形
Bitmap bitmap= BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.ic_add_circle_outline_white_24dp);
canvas.drawBitmap(bitmap,-bitmap.getWidth()/2,-bitmap.getHeight()/2,mPaint); //获取并绘制按钮没有展开时的图标
for(int i=0;i<icon.size();i++)
{
if(rect>=2*px*(i+1))//2*px=getMeasuredWidth(),i+1=当前的图标个数(-y)，如果上升高度足够显示下一个图标，就绘制
{
Bitmap bitmap1= BitmapFactory.decodeResource(getContext().getResources(),icon.get(i).intValue());
canvas.drawBitmap(bitmap1,-bitmap.getWidth()/2,-bitmap.getHeight()/2-(i+1)*2*px,mPaint);//在相应位置绘制图标
}
}
if(rect==realheight) {//完全展开
isShow=true;
}
else if(rect==0) { //完全闭合
isShow=false;
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width;
int height;
width=MeasureSpec.getSize(widthMeasureSpec);
height=MeasureSpec.getSize(heightMeasureSpec);
width=width>height?height:width;//取较小的
height=height>width?width:height;
height+=icon.size()*width; //根据加入图标个数累加view高度
realheight=height-width;//加入图标的总高度
setMeasuredDimension(width,height);
}
public void setMenuListener(MenuListener menuListener) {
this.menuListener = menuListener;
}
private class ami extends Animation
{
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
rect=(int)(interpolatedTime*(realheight));
invalidate();
}
}
private class ami2 extends Animation
{
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
rect=(int)((1-interpolatedTime)*(realheight));
invalidate();
}
}
public void startAnimation() {
if(!isShow) {
ami move = new ami();
move.setDuration(300);
move.setInterpolator(new AccelerateDecelerateInterpolator());
startAnimation(move);
}
else
{
ami2 move = new ami2();
move.setDuration(300);
move.setInterpolator(new AccelerateDecelerateInterpolator());
startAnimation(move);
}
}
public interface MenuListener//需实现此接口以便接受点击事件
{
void click(int i);
}
}
使用范例
public class MainActivity extends AppCompatActivity implements Myfab.MenuListener {
private Myfab fabtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fabtn=(Myfab) findViewById(R.id.fab);
List<Integer> list=new ArrayList();
list.add(R.mipmap.ic_add_circle_outline_white_24dp);
list.add(R.mipmap.ic_add_circle_outline_white_24dp);
list.add(R.mipmap.ic_add_circle_outline_white_24dp);
fabtn.setIcon(list);
fabtn.setMenuListener(this);
}
@Override
public void click(int i) {
Toast.makeText(this,String.valueOf(i),Toast.LENGTH_SHORT).show();
}
}
希望可以对大家有所帮助。
