*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布
这几天无聊系列之——自定义可折叠按钮
效果如下:
注意看到没,有个浮动按钮,上滑到顶缩小,下滑到某个地方就展开。暂且不说上拉跟下滑的时候。主要时按钮伸缩效果如何实现呢?这个就是我们今天的主题了。
思路分析
一、按钮拉伸思路步骤详解
如下(绘画的很粗糙,忽略):
主要是由两个圆,然后中间是一个矩形。当按钮缩小时,就是右边这个圆向左边这个圆靠近,圆心不断向左移,中间矩形宽度不断减少,可以看到矩形的宽度就是右边圆圆心的x坐标减去左边圆心x坐标
开始动手撸代码。
1.创建一个叫StretchableFloatingButton的类并且继承ViewGroup,并实现相应的方法。
2.在onMeasure方法终测量控件的宽高度,以及圆心半径,矩形右边的x坐标。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (width == 0){
width = MeasureSpec.getSize(widthMeasureSpec);
height = MeasureSpec.getSize(heightMeasureSpec);
//获取圆的半径
center = height/2;
//矩形右边x坐标
x = width -center;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
3.确定左边圆圆心,右边圆圆心,以及矩形范围,并绘制出来。(注意ViewGroup绘制在dispatchDraw方法里)
- 左边圆心:(center,center)半径为center
- 右边圆心:(width-center,center) 半径为center
- 矩形范围(RectF)确定左上角和右下角坐标:(center,0,width-center,height)
@Override
protected void dispatchDraw(Canvas canvas) {
//画左边圆
canvas.drawCircle(center, center, center, paint);
//画矩形
rectF = new RectF(center, 0, width-center, height);
canvas.drawRect(rectF, paint);
//画右边圆
canvas.drawCircle(width-center, center, center, paint);
super.dispatchDraw(canvas);
}
4.在布局中引用,看效果
5.实现缩小和展开效果
在上面我们分析到,缩小(展开),是右边圆心不断向左边靠近(远离);矩形宽度缩小(变大),也就是右边圆心x坐标不断减小(增大),达到位置时动画就结束。
- 改变的就是矩形范围(center,0,x,height),x 就是我们减小(增大)的值。
- 右边圆(x,center),x跟矩形x一致。
如何不断减小(增大)x的值?
我们可以通过handler不断发送消息,减少(增加)x的值并重绘,当x到达左边圆心x坐标或到达矩形右边原本x坐标位置,停止发送。
定义一个方法让外部调用
看实现效果:
二、内部小圆放大缩小思路步骤详解
1.先把小圆绘制出来。
- 确定圆心位置,跟左边的圆圆心一致
- 小圆半径为centet-y,这里y指的是圆环宽度,设置初始值为20,等下我们要操作的圆环宽度y,来控制小圆的变化。
效果如下:
2.当整个控件放大缩小时控制圆的缩小和放大
这里要确定个比值:小圆最小时距离左边圆的宽度是固定 我们设为y,而控件减小或增大的距离也是确定的,我们设为x。当出现变化时,x减少多少,y就根据x/y这个比值减少多少。
y/x = 圆环最大宽度/控件拉伸总距离
- 在onMesure中确定这个比值
- 在控件拉伸活着放大时,的到具体的y值。
效果如下:
三、内部文字拉伸思路步骤详解
在考虑文字拉伸的时候如果用canvas 画文字,控制拉伸比较难控制,所以这个控件是继承ViewGroup。默认我在里面写了个TextView,通过onLayout去控制文本宽度。
1.创建一个TextView,并在onMesaure中测量宽高度。
2.通过onLayout摆放TextView位置。确定两个坐标左上角,右下角坐标
左上角(ceter*2 +5,center-tHeight/2),+5的目的是设置间距
右下角 (tWidth + center*2+10,(center+tHeight/2)) +10设置间距
注:tX 在后面代码中来控制文本宽度。默认初始为 tX = tWidth + center*2+10
效果如下:
3.设置TextView文本宽度变化比,其实就是TextView右下角的x坐标值的大小,达到拉伸目的。
TextView最大拉伸距离就是自身,控件拉伸距离在上面我们也已经确定是矩形的宽度。当控件拉伸多少根据这个比值,TextView对应拉伸的距离,即我我们所要求的tX。
确定比值:TextView最大宽度/控件拉伸总距离
根据比值得到tX,因为是改变子控件位置,需要调用requestLayout方法
效果如下:
四、小圆中图片旋转思路步骤详解
最终到了我们这个控件的最后一个思路环节了。就是小图标的旋转以及变化,在原效果中,当控件拉伸时,小图标跟着旋转,并且在效果结束之后变换图片。
这里涉及到了canvas的drawBitamp方法,以及canvas的roatate旋转方法。
1.先把小图标画出来。
确定小图标宽高度,这里我设置了固定值:小圆的半径 - 5,-5设置间距。
确定小图标左上角坐标位置。(center - iconWidth / 2,center - iconWidth / 2)
效果如下:
2.处理旋转,这里我设置默认旋转90度。因为原效果折叠时是逆时针旋转所以是-90度。
同样的我们也是要求出旋转比。根据旋转比得出旋转值。
旋转比: 总旋转角度/控件拉伸距离
3.根据旋转比求出旋转角度
最终效果如下:
优化
一、设置自定义属性
我们写了这么多,里面的角度,图标,文字,颜色等等都是固定的,应该可以在xml代码中动态去设置它。
这里需要写自定义属性,在valuse文件夹创建一个attrs的XML文件,编写自定义属性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="FlodAbleButton">
<!--字体大小-->
<attr name="text_size" format="float"/>
<!--折叠速度-->
<attr name="speed" format="float"/>
<!--控件背景颜色-->
<attr name="bac_color" format="color"/>
<!--字体颜色-->
<attr name="text_color" format="color"/>
<!--小圆颜色-->
<attr name="inner_circle_color" format="color"/>
<!--文本-->
<attr name="text" format="string"/>
<!--展开图标-->
<attr name="open_icon" format="reference"/>
<!--挂壁图标-->
<attr name="close_icon" format="reference"/>
<!--图标旋转角度-->
<attr name="degrees" format="float"/>
</declare-styleable>
</resources>
在代码中获取自定义属性值
在xml中使用
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
tools:context="com.roy.stretchablefloatingbutton.MainActivity">
<com.roy.library.FlodableButton
android:id="@+id/fb"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_margin="10dp"
app:bac_color="#ff0"
app:close_icon="@mipmap/icon_2"
app:inner_circle_color="@color/black"
app:open_icon="@mipmap/icon"
app:speed="60"
app:text="地铁/景区/商圈/城市"
app:text_color="@color/black"
app:text_size="16"
app:degrees="90"/>
</LinearLayout>
二、设置折叠监听事件
当控件折叠或者展开成功时,设置一个监听事件,把折叠状态以及控件自身回调出去
public void setFoldListener(FoldListener foldListener) {
this.foldListener = foldListener;
}
//折叠展开监听
public interface FoldListener{
void onFold(boolean isIncrease,FlodableButton sfb);
}
使用
sfb.setFoldListener(new FlodableButton.FoldListener() {
@Override
public void onFold(boolean isIncrease, FlodableButton sfb) {
String text = isIncrease? "展开了":"折叠了";
Toast.makeText(MainActivity.this,text,Toast.LENGTH_SHORT).show();
}
});
效果展示
三、设置自己的点击监听事件
本来有自己的点击事件,为什么也要设置自己的点击事件呢。原因如下:
在效果可以看到,当我们折叠时,点击空白处,还有点击事件响应,这是我们不需要的。
这个效果出现的原因是我们的控件设置宽度是match_parent,所以一般设置点击事件还是会响应。
如何解决这个问题呢?
我们可以在onTouchEvent事件中做拦截,这里我们要区分两种状况:
- 折叠状态时,可点击区域是个圆,需要判断点击的时的 x坐标和y坐标是否在圆内。在圆内响应点击事件,不在圆内不做拦截处理。
伸展状态时,可点击区域时整个控件。
代码如下:
在Activity中使用
sfb.setOnClickListener(new FlodableButton.OnClickListener() {
@Override
public void onClick(FlodableButton sfb) {
//点击事件处理
}
}
效果展示
最后展示下最终的完成效果
最后附上源码地址