Material Design -- FloatingActionButton

FloatingActionButton 是继承自 ImageView 的一个控件,所以它拥有所有 ImageView 的属性,首先来介绍 FloatingActionButton 经常使用的几个属性

app:backgroundTint // 设置FAB的背景颜色。
app:rippleColor // 设置FAB点击时的背景颜色。
app:borderWidth // 该属性尤为重要,如果不设置0dp,那么在4.1的sdk上FAB会显示为正方形,而且在5.0以后的sdk没有阴影效果。所以设置为borderWidth="0dp"。
app:elevation  // 默认状态下FAB的阴影大小。
app:pressedTranslationZ  // 点击时候FAB的阴影大小。
app:fabSize  // 设置FAB的大小,该属性有两个值,分别为normal和mini,对应的FAB大小分别为56dp和40dp。
src  // 设置FAB的图标,Google建议符合Design设计的该图标大小为24dp。

注意,要使用以上属性,首先在包含 FloatingActionButton的容器内,加上以下声明

xmlns:app="http://schemas.android.com/apk/res-auto"

当然,以上方法既可以在 xml文件中直接声明,也可以在activity 中获取实例后,使用 Setter 方法设定,就比如说app : rippleColor属性,在activity中 用以下方式也可以设定。

mFloatingActionButton.setRippleColor(int color);
  1. 简单使用方法
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <android.support.design.widget.FloatingActionButton
       android:id="@+id/actionbutton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/ic_action_new"
       android:layout_gravity="bottom|right"
       android:layout_marginBottom="24dp"
       android:layout_marginRight="24dp"
       app:rippleColor="@color/colorPrimary"
       app:elevation="5dp"
       app:borderWidth="0dp"
       app:fabSize="normal"
       app:pressedTranslationZ="10dp">

   </android.support.design.widget.FloatingActionButton>
</FrameLayout>

这个时候,执行一下,便出现了一下画面

这里写图片描述

从上述属性设定中看出,我设置了点击时FAB的颜色改变和阴影的改变,但是这时我去点击 FAB 发现没有任何反应。

这时自然没有任何反应,因为还没有给 FAB设置点击事件,所有有关点击的属性是不会生效的,这个时候进入 Activity 去获取 FAB实例,并设置点击事件。

FloatingActionButton mFloatingActionButton = (FloatingActionButton) findViewById(R.id.actionbutton);
mFloatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(mFloatingActionButton,"hello",Snackbar.LENGTH_LONG).show();
            }
});

这样,我们设置的点击时背景颜色和点击时阴影就可以显现出来了,在我们点击时弹出了一个Snackbar ,情景如下

这里写图片描述

我们发现弹出的Snackbar 竟然挡住了 FAB ,界面非常的不友好,那么有没有解决办法呢?

这就用到了CoordinatorLayout,实际上,只要使用 这个容器作为根容器,包住 FAB 就可以解决这个问题,因为 CoordinatorLayout能够起到协作子布局的作用

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/actionbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_action_new"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="24dp"
        android:layout_marginRight="24dp"
        app:rippleColor="@color/colorPrimary"
        app:elevation="5dp"
        app:borderWidth="0dp"
        app:fabSize="normal"
        app:pressedTranslationZ="10dp">

    </android.support.design.widget.FloatingActionButton>
</android.support.design.widget.CoordinatorLayout>

在运行一下,看看结果

这里写图片描述

接下来,我们来看一看 Snackbar 的配合使用,SnackbarToast 的一个很好的替代,因为Snackbar看起来比Toast 更加美观和清晰。实际上,Snackbar 的使用方法和 Toast 是基本相同的,比如,我们要弹出一个Snackbar

final Snackbar snackbar = Snackbar.make(view,"hello",Snackbar.LENGTH_LONG);
snackbar.show();

这样就可以实现弹出Snackbar的功能,当然我们还可以给他设置一个点击事件。当我们给Snackbar 设置的显示时间为Snackbar.LENGTH_LONG时,我们要允许用户可以手动去关闭这个Snackbar,设置方法为

 snackbar.setAction("Hide", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        snackbar.dismiss();
                    }
                });

首先,设置了一个“Hide” 的提示字,当我们去点击时,我们去释放这个Snackbar

这里写图片描述

可是,当我们点击了 HIDE 之后,问题出现了,FAB竟然没有回到原来的位置,如图是我点击了HIDE 之后的效果

这里写图片描述

这是为什么呢?对于这个问题,只要我们将点击时间内的以下代码去除,便可以解决

snackbar.dismiss();

我猜测引起这个问题的原因是,当snackbar.dismiss()方法调用后,它依然占据着屏幕的空间,只是对用户不可见,但它依然存在。总之,只要我们不调用这个dismiss()方法,便可以正常使用。

Tips : 介绍一下在 Android Studio 中如何给自己的真机截图,只要打开 Android Monitor 就可以看到截图按钮,如图

这里写图片描述
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容