纸墨设计文档: Floating Action Button(FAB)

jopen 8年前

在 谷歌官方的纸墨设计文档 中介绍如下：

FAB 用于主要的功能按钮。FAB 是一个漂浮在 UI 之上的圆形图标，并且当点击该按钮的时候，通常具有 变形、位移 等动画效果。

如何使用

  • 在项目的 build.gradle 文件中添加 appcompat 和 design 库：

Java 

dependencies {      compile 'com.android.support:cardview-v7:X.X.X' // where X.X.X version      compile 'com.android.support:design:X.X.X' // where X.X.X version  }
dependencies {      compile 'com.android.support:cardview-v7:X.X.X' // where X.X.X version      compile 'com.android.support:design:X.X.X' // where X.X.X version  }
</div>
  • 你的 Activity 继承至 android.support.v7.app.AppCompatActivity ：

Java 

public class MainActivity extends AppCompatActivity {        ...  }
public class MainActivity extends AppCompatActivity {        ...  }
</div>
  • 在布局文件中使用 FloatingActionButton

XHTML 

<android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:src="@drawable/ic_call" />
<android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:src="@drawable/ic_call"/>
</div>

如何修改样式？

  • 在你的 styles.xml 中定义自定义样式：

XHTML 

<style name="MyFloatingButton" parent="Theme.AppCompat.Light">        <item name="colorAccent">@color/pink</item>  </style>
<stylename="MyFloatingButton" parent="Theme.AppCompat.Light">        <itemname="colorAccent">@color/pink</item>  </style>
</div>
  • 通过 style 属性来使用该theme

XHTML 

<android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:src="@drawable/ic_call"      android:theme="@style/MyFloatingButton" />
<android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:src="@drawable/ic_call"      android:theme="@style/MyFloatingButton"/>
</div>

Ripple 效果颜色

使用 app:rippleColor 属性来修改当点击 FloatingActionButton 时候的 水波纹 的颜色。

XHTML 

<android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:src="@drawable/ic_call"      app:rippleColor="@color/indigo" />
<android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:src="@drawable/ic_call"      app:rippleColor="@color/indigo"/>
</div>

图标

使用 android:src 来指定 FloatingActionButton 的图标。

XHTML 

<android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:src="@drawable/ic_favorite"/>
<android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:src="@drawable/ic_favorite"/>
</div>

####大小

在谷歌官方的 纸墨设计文档中介绍 :

FAB 有两种尺寸：

  • 默认尺寸：适合大部分情况
  • 迷你尺寸：当默认尺寸和当前 UI 的其他元素不协调的时候使用迷你尺寸

使用 app:fabSize 来修改 FloatingActionButton 的大小，其取值为预设的两个常量： mini 或者 normal 。

XHTML 

<android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:src="@drawable/ic_mini"      app:fabSize="mini"/>
<android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:src="@drawable/ic_mini"      app:fabSize="mini"/>
</div> </div>

来自： http://blog.chengyunfeng.com/?p=845

相关经验