Android初级开发笔记 - FloatingButton

记录一下项目近期遇到的跟FloatingButton相关的一个小问题。
背景：需要画一个固定在某个位置，不随其他控件移动而移动的按钮。
设计稿：

在这里插入图片描述

第一阶段：
拿到蓝湖的切图，发现不仅有白边还有很大一部分的透明背景。
直接在FloatingButton设置backgroundTint后图片显得很小，一点也不美观。而且形状是圆形的。
切图：

在这里插入图片描述

作为FloatingButton背景：

在这里插入图片描述

代码：

 <android.support.design.widget.FloatingActionButton
        android:id="@+id/iv_join"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/and_blue_448bf5"
        android:scaleType="fitEnd"
        android:src="@mipmap/icon_join"
        app:fabSize="normal"
        app:layout_constraintBottom_toBottomOf="@+id/vp_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/vp_content" />

第二阶段：
介于对FloatingButton的不熟悉，上网了解了一下它。发现我并没有办法找到使他变成各种形状的办法，所以最后只能说应该是它就是长成圆形的。

第三阶段：
使图片和按钮比例协调！这个的实现网上搜得到很多答案，最多的一种是说图片要24dp24dp，加android:scaleType=”center”。也有人说， app:fabSize="normal" android:scaleType=”center” 同时存在，就可以打破图片的尺寸限制。但是我都试了，打破限制的没有，设置了24dp24dp之后，比例确实和谐了，但是因为分辨率的问题，字体显得很模糊。（也可能是我不会用ps调...）
代码还是跟上面的一样，效果：

在这里插入图片描述

第四阶段：
反正里面的箭头也不明显，不如直接在里面写字好了。试了一下。FloatingButton没有text属性。很自然地我想到了加个textview。
听起来好像没毛病，可是这个textview死活就是藏在FloatingButton下面不上来。经过几番百度，终于在stackflow找到了答案，在textview加上evalation属性。完美！
代码：


    <FrameLayout
        android:layout_width="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.FloatingActionButton
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:backgroundTint="@color/and_blue_448bf5"
            app:borderWidth="0dp"
            android:elevation="0dp"
            app:fabSize="normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            android:layout_gravity="center"
            android:text="入驻"
            android:textSize="@dimen/and_24sp"
            android:elevation="7dp"/>

    </FrameLayout>

效果：

在这里插入图片描述

第五阶段：
领导觉得还是有点丑，所以我又改成了酱紫。这个实现很容易，就不多说啦~
代码：


    <Button
        android:id="@+id/fab"
        android:layout_width="50dp"
        android:layout_height="@dimen/and_30dp"
        android:elevation="0dp"
        android:text="入驻"
        android:gravity="center"
        android:textColor="@color/white"
        android:background="@drawable/rect_448bf5_radius_5"
        app:layout_constraintBottom_toBottomOf="@+id/vp_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/vp_content" />

效果：

在这里插入图片描述

在这贴一下FloatingButton的几个属性:
1、app:borderWidth=""------------------边框宽度，通常设置为0 ，用于解决Android 5.X设备上阴影无法正常显示的问题。
2、app:backgroundTint=""---------------设置按钮的背景颜色或者背景图片，不设置，默认使用theme中colorAccent的颜色。
3、app:rippleColor=""--------------------点击的边缘阴影颜色。
4、app:elevation=""----------------------边缘阴影的宽度。
5、 app:fabSize=“”----------------------设置按钮大小。

昨儿个偶然得知了一个叫CircularReveal的家伙，可以做一下点击按钮之后跳转activity的动画。回头弄完再撸篇文章，等我~0

内推信息

我们正在招募小伙伴，有兴趣的小伙伴可以把简历发到 app@talkmoney.cn，备注：来自简书社区

详情可以戳这里--> 广州芦苇信息科技

Android初级开发笔记 - FloatingButton

内推信息

推荐阅读更多精彩内容