紙墨設計文檔: Floating Action Button(FAB)

jopen 8年前發布 | 14K 次閱讀 安卓開發 Android開發 移動開發

在 谷歌官方的紙墨設計文檔 中介紹如下：

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
}
  • 你的 Activity 繼承至 android.support.v7.app.AppCompatActivity ：

Java 

public class MainActivity extends AppCompatActivity {  
    ...
}
public class MainActivity extends AppCompatActivity {  
    ...
}
  • 在布局文件中使用 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"/>

如何修改樣式？

  • 在你的 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>
  • 通過 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"/>

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"/>

圖標

使用 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"/>

####大小

在谷歌官方的 紙墨設計文檔中介紹 :

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"/>

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

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！