Android Design Support Library系列之四:FloatingActionButton的使用

FloatingActionButton本质是一个ImageButton,只不过相对于ImageButton,FloatingActionButton多了很多特效而已.

惯例:给出官方文档.

一、FloatingActionButton实现的效果图

使用前添加依赖

dependencies {
    compile 'com.android.support:design:25.3.1'
}

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/add"
        android:layout_centerInParent="true"

        app:backgroundTint="@color/colorPrimary"
        app:fabSize="normal"
        app:borderWidth="0dp"
        app:elevation="8dp"
        app:pressedTranslationZ="16dp"
        app:rippleColor="@color/colorAccent" />

</RelativeLayout>

FloatingActionButton使用及其简单,直接当做ImageButton使用,给它设置宽高、src等属性.

下图是 android:src="@mipmap/add"原图,是一个白色的+号.


add.png

观察上面的效果图,我们可以发现FloatingActionButton在add.png的基础上添加了不少额外的特效:

1)原图是没有填充色的,FloatingActionButton实现的效果图上多了蓝色的填充色
2)原图是没有阴影的,FloatingActionButton实现的效果图上在静止时有一个阴影,按下之后阴影范围扩大了
3) 原图是没有设置seletor的,FloatingActionButton实现的效果图上在静止时是一种填充色,按下之后填充色变了,并且伴随一个涟漪扩散的动画

二、FloatingActionButton的常用属性

 android:src=""    FloatingActionButton的图标
app:backgroundTint=""    填充色
该属性不设置的话,默认使用theme中colorAccent颜色
Android5.0 引入了Z轴的概念,让组件呈现3D效果,Z属性可以通过elevation和translationZ进行修改
Z= elevation+translationZ
elevation:设置该属性使控件有一个阴影,感觉该控件像是“浮”起来一样,达到3D效果
translationZ:设置该组件阴影在Z轴(垂直屏幕方向)上的位移

在5.0之前,我们如果想给View添加阴影效果,以体现其层次感,通常的做法是给view设置一个带阴影的背景图片
在5.0之后,我们只需要简单的修改View的Z属性,就能让其具备阴影的层次感,不过要求版本至少5.0  Lollipop,也就是API21    
使用FloatingActionButton的好处就是不需要5.0 就可以使用Z属性,因为google已经封装好了


app:elevation=""      默认状态下FloatingActionButton的阴影大小
app:pressedTranslationZ=""  按下时FloatingActionButton的阴影在Z方向(垂直屏幕方向)上的偏移
 app:rippleColor=""  按下之后FloatingActionButton的背景颜色,还会伴随一个涟漪扩散的动画
(PS:需要给FloatingActionButton设置点击事件才会有效果)
 app:fabSize=""    FloatingActionButton的大小,normal,mini,auto三个值
当然,如果这三个值都不满意的话,我们可以直接通过 :
android:layout_width=""       android:layout_height=""
这两个我们最常用的属性来设置大小
app:borderWidth="0dp"     早期版本如果不设置这个属性为0dp的话,在5.X设备上没有阴影效果,不过我测试时发现不设置也没关系,阴影效果照样显示,大概google修复了吧,如果你的阴影效果不显示,可以设置这个属性试一试
FloatingActionButton还可以锚定在另外一个组件上方,这个通常搭配AppBarLayout,在使用CoordinatorLayoutt作为容器时才能生效

app:layout_anchor="@id/.......your AppBarLayout id" 锚定哪个组件,通常是AppBarLayout
app:layout_anchorGravity="end|bottom"  相对于该组件位置

三、FloatingActionButton兼容性

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/add"

        app:backgroundTint="@color/colorPrimary"
        app:fabSize="normal"
        app:borderWidth="0dp"
        app:elevation="8dp"
        app:pressedTranslationZ="16dp"
        app:rippleColor="@color/colorAccent" />


</RelativeLayout>

去掉了android:layout_centerInParent="true"
5.0以前的设备上的效果图:


5.0之后的设备上的效果图:

可以看见,两张效果图不一样,在5.0之前,会默认有一个外边距形成了margin的效果,在5.0之后就没有这个外边距,所以我们需要给FloatingActionButton设置一个正确的margin来兼容。

 android:layout_margin="@dimen/fab_margin"

在res/values/dimens中

   <dimen name="fab_margin">0dp</dimen>

在res/values-v21/dimens中

<dimen name="fab_margin">16dp</dimen>

ok,这样就能很好的兼容了O(∩_∩)O
PS:在使用CoordinateorLayout作为容器的时候就没有外边距这个问题了.

四、设置点击事件

像ImageButton一样设置就可以了

public class MainActivity extends AppCompatActivity {

     private FloatingActionButton mFAB;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mFAB= (FloatingActionButton) findViewById(R.id.floatingActionButton);
        mFAB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //do something
            }
        });
    }
}

ok,FloatingActionButton的使用就介绍到这里~~~

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

推荐阅读更多精彩内容