美文网首页
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