开发者社区> 登高且赋> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Android Design Support Library全解:Part 1 Floating Action Button 悬浮按钮

简介: Android Design Support Library系列第一弹,悬浮按钮 悬浮按钮(Floating action button ,FAB) 简单来说是一种圆形按钮,其悬浮于UI之上,四周有阴影环绕,可以用于实现一些高级操作,比如添加新的条目,或是为邮件添加附件等等。
+关注继续查看

Android Design Support Library系列第一弹,悬浮按钮

悬浮按钮(Floating action button ,FAB) 简单来说是一种圆形按钮,其悬浮于UI之上,四周有阴影环绕,可以用于实现一些高级操作,比如添加新的条目,或是为邮件添加附件等等。

FAB1
FAB2

就本质而言,FAB其实就是继承于ImageView的控件,其支持所有ImageView和ImageButton的属性。

FAB继承自ImageView

要使用FAB,首先要添加依赖包:

//本文撰写时,最新版本是25.3.1
compile 'com.android.support:design:25.3.1'

第一步:

在layout文件中加入FAB,我们假设已经声明了命名空间xmlns:app=”http://schemas.android.com/apk/res-auto

<FrameLayout
    android:id="@+id/layoutInner"
    android:layout_width="match_parent"
    android:layout_height="match_parent">       
         
    <android.support.design.widget.FloatingActionButton
       android:id="@+id/btnFloatingAction"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom|right" />
</FrameLayout>

需要说明的是,因为经常需要FAB悬浮于整个UI界面,所以一般将其单独放入一个FrameLayout中,FrameLayout会覆盖下面的UI界面,这样便于FAB位置的设置。

FAB属性介绍

  • 背景填充色: 默认情况下,FAB的填充色为style.xml中colorAccent定义的颜色,如有需要可以设置属性**app:backgroundTint **来自定义背景填充色;
  • 尺寸大小:FAB设有三种尺寸,标准尺寸(Normal 56dp),迷你尺寸(Mini 40dp),以及自适应尺寸(基于屏幕大小而变化),用户通过app:fabSize来设定;
    fabSize
  • 波纹颜色:app:rippleColor属性用来控制当FAB按下后,产生波纹效果的颜色;
  • 阴影尺寸:app:elevation属性用来控制FAB在正常状态下阴影的尺寸,默认6dp;
  • 按下阴影:app:pressedTranslationZ属性用来控制FAB在按下时阴影的打下,默认12dp;

第二步

根据属性的介绍,完善FAB的设置:

   android:id="@+id/btnFloatingAction"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="bottom|right"
   android:src="@drawable/ic_plus"
   app:fabSize="normal"     
   app:rippleColor="@android:color/background_dark"/>

第三步

在Activity中设置点击事件:

FloatingActionButton btnFab = (FloatingActionButton) findViewById(R.id.btnFloatingAction);
btnFab.setOnClickListener(new View.OnClickListener() {
 
   @Override
   public void onClick(View v) {
       Toast.makeText(MainActivity.this, "Hello FAB!", Toast.LENGTH_SHORT).show();
   }
});

和一般的Button的设置点击事件是一样的,使用起来很方面。

需要注意问题

FAB的呈现的效果在Android 4.4 和4.4以上的设备并不相同:

Android 5

Android 4.4

通过上面的对比图可以看出来效果的差异,Android 4.4上FAB会有边距,而起有默认的阴影,但是4.4+设备没有边框和设备。

解决边距

为了结局边框的问题,可以为4.4+设备设置边框距离,而4.4及之前的设备,边距设为0。

  • values/dimens.xml
<dimen name="fab_margin_right">0dp</dimen>
<dimen name="fab_margin_bottom">0dp</dimen>
  • values-v21/dimens.xml
<dimen name="fab_margin_right">16dp</dimen>
<dimen name="fab_margin_bottom">16dp</dimen>

在布局文件中就可以这样设置FAB的边距

<android.support.design.widget.FloatingActionButton
   ......
   ......
android:layout_marginBottom="@dimen/fab_margin_bottom"
android:layout_marginRight="@dimen/fab_margin_right"/>

这样设备就会选取符合系统版本的边距值来设置。

解决阴影

为了统一阴影的大小,可以在布局文件中利用app:borderWidth属性,统一设置阴影大小。

<android.support.design.widget.FloatingActionButton
   ......
   ......  
   app:fabSize="normal"
   app:borderWidth="0dp"
   android:layout_marginBottom="@dimen/fab_margin_bottom"
   android:layout_marginRight="@dimen/fab_margin_right"/>

动画问题

在最初,旋转动画RotateAnimation无法应用在FAB上,但是属性动画出现之后解决了这个问题。

btnFab = (FloatingActionButton) findViewById(R.id.btnFloatingAction);
btnFab.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View v) {
        Toast.makeText(FloatingActionButtonActivity.this, "Hello FAB!", Toast.LENGTH_SHORT).show();
//设置属性动画,旋转
        ObjectAnimator animator = ObjectAnimator.ofFloat(btnFab,"rotation",0f,360f);
        animator.setInterpolator(new FastOutLinearInInterpolator());
        animator.setDuration(1000).start();
    }
});

更多关于属性动画对内容,请阅读这里

相关参考

https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android Support Design Library之FloatingActionButton(二)
Android Support Design Library之FloatingActionButton(二)
0 0
Android Support Design Library之FloatingActionButton(一)
Android Support Design Library之FloatingActionButton(一)
0 0
Android Support Design Library之TextInputLayout(二)
Android Support Design Library之TextInputLayout(二)
0 0
Android Support Design Library之TextInputLayout(一)
Android Support Design Library之TextInputLayout(一)
0 0
Android Support Design Library之TabLayout
Android Support Design Library之TabLayout
0 0
Android Support Design Library之NavigationView(二)
Android Support Design Library之NavigationView(二)
0 0
Android Support Design Library之NavigationView(一)
Android Support Design Library之NavigationView(一)
0 0
Android Support Design Library之CoordinatorLayout(二)
Android Support Design Library之CoordinatorLayout(二)
0 0
Android Support Design Library之CoordinatorLayout(一)
Android Support Design Library之CoordinatorLayout(一)
0 0
Android Design Support Library v28
1). 依赖 implementation "com.android.support:design:28.0.0-alpha3" 2). MaterialButton 图1.
793 0
+关注
登高且赋
在帝都和钱塘之间奔波的非主流程序员,前国重实验室里的基层科研工作者,现在在云栖中乘物以游心,搬砖能还房贷还能有远方。 之前专攻密码应用,认证与授权,现在在做ECS。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Android组件化实现
立即下载
蚂蚁聚宝Android秒级编译—— Freeline
立即下载
Android插件化:从入门到放弃
立即下载