尊重勞動成果，轉載請注明出處：http://blog.csdn.net/growth58/article/details/48754869
關注新浪微博：@于衛國
郵箱：yuweiguocn@gmail.com

Google在2015 I/O大會上公布了Material Design Support Library，使用它可以創建materail應用在API 19以下突然變得很容易。在這個系列中，我們將使用RSS閱讀器應用，我們用于Material系列的基礎應用，重寫讓它完全使用新的Design Support Library。在這篇文章中我們將添加一個Floating Action Button or FAB 。

在開始之前值得注意的是這個應用根本不需要一個FAB 因為這沒有動作可執行。然而，為了展示目前添加一個FAB 有多么容易，我從Douglas Adams獲得一點靈感：

“Arthur Dent:如果我按下這個按鈕會發生什么？
Ford Prefect:我不知道。
Arthur Dent:Oh.
Ford Prefect:發生了什么？
Arthur Dent:亮起一個標志，說‘請不要再按這個按鈕’。”
——Douglas Adams, The Original Hitchhiker Radio Scripts

因此我們將會添加一個FAB，當按下時彈出一個Snackbar 說“請不要再按這個按鈕” 。

首先我們需要添加一個FloatingActionButton 到我們布局文件：

res/layout/include_main.xml

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/main_layout"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_scrollFlags="scroll|enterAlways" /><android.support.design.widget.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"android:clipToPadding="false"android:paddingLeft="@dimen/home_offset"app:tabMode="scrollable" /></android.support.design.widget.AppBarLayout><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior" /><android.support.design.widget.FloatingActionButtonandroid:id="@+id/fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="end|bottom"android:layout_margin="16dp"android:src="@drawable/ic_block" /></android.support.design.widget.CoordinatorLayout>

做其它事情之前，我們先看一下效果：

Oh noes!我們的FAB是白色的并且看起來相當丑陋。還記得在我們的TabLayout 中我們遇到 indicator bar 的顏色的問題，我們設置了它為白色來匹配文字？你猜怎么著？accent 顏色同樣被用來FAB 的顏色。然而它很容易被修復，讓我們使用accent 顏色讓它在這兩種情況都能工作：

res/values/colors.xml

<resources><color name="sa_green">#1E9618</color><color name="sa_green_dark">#146310</color><color name="sa_green_transparent">#201E9618</color><color name="sa_accent">#4EE147</color> </resources>

res/values/styles.xml

<resources><!-- Base application theme. --> <style name="AppTheme" parent="Base.AppTheme" /><style name="Base.AppTheme" parent="Theme.AppCompat.Light.NoActionBar"><item name="colorPrimary">@color/sa_green</item><item name="colorPrimaryDark">@color/sa_green_dark</item><item name="colorAccent">@color/sa_accent</item><item name="colorControlHighlight">@color/sa_green_transparent</item> </style></resources>

這樣看起來還不錯：

剩下就是在我們的Activity中寫上OnClickListener ：

public class MainActivity extends AppCompatActivity implements ArticlesConsumer {private static final String DATA_FRAGMENT_TAG = DataFragment.class.getCanonicalName();private static final int MENU_GROUP = 0;private DrawerLayout drawerLayout;private NavigationView navigationView;private ViewPager viewPager;private TabLayout tabLayout;private FloatingActionButton fab;private Articles articles;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);navigationView = (NavigationView) findViewById(R.id.nav_view);viewPager = (ViewPager) findViewById(R.id.viewpager);tabLayout = (TabLayout) findViewById(R.id.tab_layout);fab = (FloatingActionButton) findViewById(R.id.fab);setupToolbar();setupNavigationView();setupDataFragment();setupFab();}private void setupFab() {fab.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Snackbar.make(v, R.string.fab_press, Snackbar.LENGTH_LONG).show();}});} }

現在我們可以嘗試看一下效果：

注意到FAB是怎樣隨著Snackbar向上移動的嗎？我們沒有做任何事情獲取這個行為，所以發生了什么？它是我們的朋友CoordinatorLayout 又一次在后臺做的處理。

當Snackbar 被創建時我們通過參考一個View ——在這種情況下它是FAB 生成onClick()調用。Snackbar 查看這個View 的父布局，如果它發現一個CoordinatorLayout 并且用CoordinatorLayout 注冊了它的行為。FloatingActionButton 也用CoordinatorLayout 注冊了它自己的行為，它依賴于Snackbar 的行為，當Snackbar 進出時CoordinatorLayout 會傳遞相關的信息。它甚至是很智能的，在大屏幕上Snackbar 不會拉伸至全寬，它不會移動FAB 因為不需要。

相當整潔，并且我們不需要做任何事情！

為了證明CoordinatorLayout 的執行邏輯，簡單地通過CoordinatorLayout 之外的View 調用Snackbar.make()方法，你會看到這個漂亮的行為停止了。

這有一個真的需要提及的問題。如果你在Android 4.x 設備上運行這個代碼FAB 的渲染相當難看的：

這有一個很簡單的變通辦法，在布局文件中添加app:borderWidth=”0dp” 屬性到FloatingActionButton ，一切看起來都好了：

這個解決辦法來自于 Chris Banes via Sebastiano Poggi 因此我猜測它將會在未來的design support library版本中被修復。多虧了Seb & Chris 提供給我如此簡單的變通辦法。

隨著這個最后的問題，所有的示例圖片和視頻已經完成從Lollipop 設備上并且我們期待一個完全material 體驗，但是怎么做才能很好地運行在舊版本的Android設備上呢？在下一篇文章我們將學習關于向后兼容的技巧。

源代碼可以從這下載。

請我喝杯咖啡，請使用支付寶掃描下方二維碼：

原文地址：https://blog.stylingandroid.com/design-library-part-4/

總結

以上是生活随笔為你收集整理的Android Material Design Library系列教程（四）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。