美文网首页
MaterialDesign风格FloatingActionBu

MaterialDesign风格FloatingActionBu

作者: 临窗听雨 | 来源:发表于2017-05-10 22:30 被阅读145次

  一、概述

        FloatingActionButton是Android5.0之后出现的新的控件,遵循meterialdesign设计风格,我们很多的应用右下角都有一个按钮,用于相应用户的更多操作。

       简单看下效果图:

6.0效果图 4.4.4效果图

二、特性

2.1、阴影效果--景深(反馈动作:按下去阴影加深elevation)

2.2、水波纹效果(在5.0以下没有此效果)

三、兼容性需要注意的问题

3.1、需要写两套布局layout/layout-v21

layout-v21:添加layout_margin="15dp" 要添加margin不然按钮不会和父布局有间距

layout: 添加layout_margin="0dp" 默认就会有间距

四、XML布局代码属性讲解

4.1、XML中的主要代码为:

<android.support.design.widget.FloatingActionButton

    android:id="@+id/fab"

    android:onClick="rotate"

   android:layout_alignParentRight="true"

   android:layout_alignParentBottom="true"

    android:layout_width="wrap_content"

   android:layout_height="wrap_content"

   android:src="@drawable/ic_add_white_24dp"

   app:backgroundTint="?attr/colorPrimary"

   app:elevation="10dp"

   android:layout_margin="16dp"

   app:fabSize="normal"

   app:rippleColor="#ff0"

    app:pressedTranslationZ="12dp"

   android:clickable="true"

  />

app:backgroundTint="?attr/colorPrimary"背景着色 对5.0和4.x都有作用

app:elevation="10dp"阴影深度 都有作用

app:fabSize="mini"大小:normal,mini 按钮大小

android:clickable="true" 添加这个属性后点击才会有水波纹效果 5.x以上有效果

app:pressedTranslationZ="12dp" 点击后设置该组件在Z方向(垂直屏幕方向)上的位移。 5.x以上有效果

       mainActivity中的代码主要是一个点击事件,用来处理点击后按钮旋转的效果,不做赘述。

最后附上代码地址:http://download.csdn.net/detail/u013453973/9839006

相关文章

网友评论

      本文标题:MaterialDesign风格FloatingActionBu

      本文链接:https://www.haomeiwen.com/subject/dscntxtx.html