Material Design 元件之FloatingActionBu
Material Design 設計規範在 Google I/O 2014 推出,這種設計理念一經推出就受到廣大開發者的喜愛,主要側重於紙墨化創作和突出設計的實體感,使得設計更接近於真實世界,力求平滑、連續的互動方式與使用者體驗,這種設計規範更能促進 Android 生態系統的發展,為此,Google 提供了一系列的符合 Material Design 風格的控制元件,如 FloatingActionButton、Snackbar、TabLayout 等。雖然經常在開發中用到,但是沒有做記錄,打算從頭開始記錄一下這些元件的使用,今天說一下 CoordinatorLayout 和 FloatingActionButton 相關的知識。
CoordinatorLayout
CoordinatorLayout 是一個加強版的 FramLayout,意味著如果不加任何限制,在 CoordinatorLayout 裡面的子 View 都會預設出現在左上角,CoordinatorLayout 有兩個主要的使用方式:
- 作為應用的頂層佈局
- 作為與一個或多個子 View 互動的容器
可為 CoordinatorLayout 裡面的子 View 指定 Behavior,就在單個父佈局中提供許多不同的互動效果,子 View 之間也可以相互互動,CoordinatorLayout 可以使用 CoordinatorLayout.DefaultBehavior 註解來指定子 View 的預設行為,總之,可以藉助 CoordinatorLayout 實現不同的滾動效果。
FloatingActionButton
FloatingActionButton 是 Material Design 型別的按鈕控制元件,一般表現是浮動在 UI 上層的圓形圖示,有自己的 behavior 並可以設定錨點。
FloatingActionButton 有兩種大小,分別是 normal(56dp) 和 mini(40dp) ,預設是 mini(40dp),其大小可以透過屬性 fabSize 來指定需要的大小,當然也可以設定 fabSize 為 auto,系統會根據不同的螢幕選擇合適的大小。
FloatingActionButton 間接繼承 ImageView,可以使用如下方式在程式碼中設定圖示:
//設定圖示
fab.setImageDrawable(getResources().getDrawable(R.drawable.fab));
fab.setImageResource(R.drawable.fab);
FloatingActionButton 的背景顏色預設是主題的 colorAccent 表示的值,在程式碼中可以透過如下方式修改 FloatingActionButton 的背景顏色,具體如下:
//設定背景顏色
fab.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#000000")));
可以透過如下方式設定 FloatingActionButton 的大小,具體如下:
//設定大小
fab.setSize(FloatingActionButton.SIZE_MINI);
那麼,如何自定義 FloatingActionButton 的大小呢,可以從 FloatingActionButton 部分原始碼中看到決定其大小的尺寸是定義到 dimens 檔案中的,具體由 design_fab_size_mini 和 design_fab_size_normal 來決定,部分程式碼如下:
//原始碼
private int getSizeDimension(@Size final int size) {
final Resources res = getResources();
switch (size) {
case SIZE_AUTO:
// If we're set to auto, grab the size from resources and refresh
final int width = res.getConfiguration().screenWidthDp;
final int height = res.getConfiguration().screenHeightDp;
return Math.max(width, height) < AUTO_MINI_LARGEST_SCREEN_WIDTH
? getSizeDimension(SIZE_MINI)
: getSizeDimension(SIZE_NORMAL);
case SIZE_MINI:
return res.getDimensionPixelSize(R.dimen.design_fab_size_mini);
case SIZE_NORMAL:
default:
return res.getDimensionPixelSize(R.dimen.design_fab_size_normal);
}
}
所以只需要建立 dimens 資料夾,在裡面重新設定 design_fab_size_mini 和 design_fab_size_normal 的值即可自定義 FloatingActionButton 的大小了,具體如下:
/**dimens.xml**/
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="">
<dimen name="design_fab_size_mini" tools:override="true">20dp</dimen>
<dimen name="design_fab_size_normal" tools:override="true">100dp</dimen>
</resources>
當然 FloatingActionButton 間接繼承 ImageView,ImageView 的一些屬性肯定可以使用,這裡就不在說了。
FloatingActionButton 的屬性
下面是一些常用的屬性,具體如下:
android:src //設定圖示(24dp)
app:backgroundTint //設定圖示背景顏色。
app:rippleColor //設定點選時水波紋顏色
app:elevation //設定陰影大小
app:fabSize //設定大小
app:pressedTranslationZ //按下時距離Z軸的距離
app:layout_anchor //設定錨點
app:layout_anchorGravity//設定相對錨點的位置
關於屬性,瞭解一下,具體使用時設定後觀察效果不失為一種直觀的學習方式。
簡單使用
總覺得做筆記還是有效果圖比較好,那就簡單使用 CoordinatorLayout 和 FloatingActionButton 看一下具體效果,佈局如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android=""
xmlns:tools=""
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app=""
tools:context="com.manu.materialdesignsamples.samples.SampleActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rvData"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:visibility="visible"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:layout_gravity="bottom|end"
android:src="@drawable/fab"
android:scaleType="center"
app:backgroundTint="@color/colorAccent"
app:backgroundTintMode="src_in"
app:elevation="5dp"
app:rippleColor="#000000"
app:fabSize="auto"
app:pressedTranslationZ="10dp"/>
</android.support.design.widget.CoordinatorLayout>
然後在設定 FloatingActionButton 的點選事件,具體如下:
findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v,"我是Snackbar...",Snackbar.LENGTH_SHORT)
.setAction("取消", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(SampleActivity.this, "取消", Toast.LENGTH_SHORT).show();
}
}).show();
}
});
先來一張效果圖,具體如下:
可知 FloatingActionButton 會自動給 Snackbar 留出位置,避免 Snackbar 彈出時遮擋 FloatingActionButton,因為在 FloatingActionButton 內部已經實現了使用 Snackbar 對應的 Behavior,CoordinatorLayout 會根據對應的 Behavior 的具體表現自動調整子 View 的位置,這裡當然是 FloatingActionButton 的位置,可以試一試將根佈局設定為 RelativeLayout 等,當然,此時 Snackbar 彈出時會遮擋 FloatingActionButton,顧名思義 CoordinatorLayout 就是協調佈局,關於 Behavior 這部分留到後面整理。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/2983/viewspace-2823792/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Material Design元件之AppBarLayoutMaterial Design元件APP
- Material Design Lite元件之徽章Material Design元件
- Material Design 元件之FloatingActionButtonMaterial Design元件
- Material Design Lite元件之按鈕Material Design元件
- Android之Material DesignAndroidMaterial Design
- Material Design 之 TabLayout 使用Material DesignTabLayout
- Material Design之AppBarLayoutMaterial DesignAPP
- Material Design 之 TextInputLayout和TextInputEditTextMaterial Design
- flutter的進階之路之Material Design與IOS風格元件FlutterMaterial DesigniOS元件
- Material DesignMaterial Design
- Material Design - 常用控制元件介紹和使用Material Design控制元件
- Material Design 相容性控制元件學習Material Design控制元件
- Material Design 控制元件知識梳理(8) TabLayoutMaterial Design控制元件TabLayout
- Material Design 控制元件知識梳理(9) TextInputLayoutMaterial Design控制元件
- Material Design 控制元件知識梳理(6) SnackbarMaterial Design控制元件
- Material Design AnimationMaterial Design
- Material Design時代Material Design
- Material Design 系列之 CardView、FAB 和 SnackbarMaterial DesignView
- Material Design實戰Material Design
- 安卓Material Design(2)安卓Material Design
- 安卓Material Design(3)安卓Material Design
- 安卓Material Design(5)安卓Material Design
- Material Design 控制元件知識梳理(5) DrawerLayout && NavigationViewMaterial Design控制元件NavigationView
- Material Design 控制元件知識梳理(4) FloatingActionButtonMaterial Design控制元件
- Angular Material 攻略 03 angular Material Design 安裝AngularMaterial Design
- Material Design 之 Behavior 的使用和自定義 BehaviorMaterial Design
- Material Design 控制元件知識梳理(7) BottomNavigationBarMaterial Design控制元件Navigation
- Material Design之-互動效果炸裂的 FloatingActionMenuMaterial Design
- Material Design 實戰 之第一彈——Toolbar詳解Material Design
- Material Design之 AppbarLayout 開發實踐總結Material DesignAPP
- Android UI進階之旅7 Material Design之PaletteAndroidUIMaterial Design
- Material Design 控制元件知識梳理(1) Android Design Support Library 是什麼Material Design控制元件Android
- Android Material Design控制元件使用(二)——FloatButton TextInputEditText TextInputLayout 按鈕AndroidMaterial Design控制元件
- Material Design 控制元件知識梳理(2) AppBarLayout & CollapsingToolbarLayoutMaterial Design控制元件APP
- Material Design 相關資源Material Design
- Android UI進階之旅7--Material Design之PaletteAndroidUIMaterial Design
- https://material.google.com/material-design/environment.htmlHTTPGoHTML
- Material Design之RecyclerView基本講解與瀑布流的實現Material DesignView