Android Design Support Library 使用詳解

概述

Android Design Support Library 是Google在2015年的IO大會上，帶來的全新適應Material Design設計規范的支持庫。在這個支持庫中，給我們提供了更加規范的MD設計風格控件。重要的是，Android Design Support Library中，支持所有的Android 2.1以上版本系統。在這個支持庫中，主要包含下面幾大控件：
Snackbar，FloatingActionButton，TextInputLayout，TabLayout，AppBarLayout，CollapsingToolbarLayout，NavigationView，CoordinatorLayout

在使用Android Design Support Library之前，我們只需要在AS中添加引用即可：

compile 'com.android.support:design:23.3.0'

下面我們將分別介紹各個控件的使用。

1.Snackbar

Snackbar提供了關於操作的輕量級的反饋。它可以從屏幕底部展示一個簡短的消息，與Toast相似，但是它更靈活和功能更加強大。
當它顯示一段時間後或者用戶與屏幕交互時，它會自動消失；
可以包含一個動作action；
Snackbar出現在屏幕所有其他元素之上，同一時間內只有一個Snackbar顯示。

使用Snackbar

    Snackbar bar = Snackbar.make(view,"Hello Snackbar",Snackbar.LENGTH_SHORT);
    bar.show();

方法：
make (View view, CharSequence text, int duration) -生成Snackbar消息
show () -開始顯示Snackbar消息

參數：
view，Snackbar會通過該view尋找一個父View來持有Snackbar的view。
text，顯示的消息
duration，與Toast一樣，控制Snackbar的顯示時間。

顯示的效果如下：
<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxjb2RlIGNsYXNzPQ=="hljs bash">我們可以為Snackbar添加一個點擊動作Action，如下：

    Snackbar bar = Snackbar.make(view,"Hello Snackbar",Snackbar.LENGTH_SHORT);
    bar.setAction("Action", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(context,"點擊了!",Toast.LENGTH_SHORT).show();
        }
    });
    bar.show();

運行效果如下：


上面增加一個可點擊的動作，點擊“ACTION”時，彈出Toast框。

我們還可以修改Snackbar的樣式

     Snackbar bar = Snackbar.make(view,"Hello Snackbar",Snackbar.LENGTH_SHORT);
     bar.setAction("動作", new View.OnClickListener() {
         @Override
         public void onClick(View v) {
             Toast.makeText(context,"點擊了!",Toast.LENGTH_SHORT).show();
         }
     });
     bar.setActionTextColor(Color.WHITE); //設置Aciton的字體顏色值
     Snackbar.SnackbarLayout layout = (Snackbar.SnackbarLayout) bar.getView();
     layout.setBackgroundColor(Color.RED); //設置Snackbar的背景色
     TextView textView = (TextView) layout.findViewById(R.id.snackbar_text);
     textView.setTextColor(Color.WHITE);  //設置Snackbar文字的顏色
     bar.show();

運行效果如下：


2.FloatingActionButton

FloatingActionButton是懸浮按鈕，用來強調當前屏幕中最重要的動作，吸引用戶的注意。FloatingActionButton現在是繼承自控件ImageButton，所以它也會擁有該控件的所有屬性。

使用FloatingActionButton

使用它還是非常簡單，當成普通控件來使用即可。
運行效果圖：


我們可以看到FAB有一個背景顏色，默認的背景顏色取的是theme中的colorAccent的值，可以在style中定義的colorAccent設置。

我們同樣也可以自行單獨設置其它的屬性：

app:backgroundTint：設置FAB的背景顏色。
app:rippleColor：設置FAB點擊時的背景顏色。
app:elevation：設置默認狀態下FAB的陰影大小。
app:pressedTranslationZ：點擊時候FAB的陰影大小。
app:fabSize：設置FAB的大小，該屬性有兩個值，分別為normal和mini，對應的FAB大小分別為56dp和40dp。
app:layout_anchor：設置FAB的錨點，即以哪個控件為參照點設置位置。 <—該屬性需要在CoordinatorLayout布局中使用才生效—->
app:layout_anchorGravity：設置FAB相對錨點的位置，值有 bottom、center、right、left、top等。 <—該屬性需要在CoordinatorLayout布局中使用才生效—->

對上面的屬性進行設置後，可以看到：


繼續給添加FAB的點擊事件，與Snackbar配合使用時，會出現Snackbar遮住FAB的情況，如：


出現這樣的情況，會讓用戶體驗不友好，正確的應該讓浮動操作按鈕上下滑動，為Snackbar留出空間。
為了解決該問題，我們這裡就用到了另一個控件CoordinatorLayout，關於這個控件之後在講解。

3.TextInputLayout

TextInputLayout繼承自LinearLayout，用來把EditText包裹在該布局中，可以讓hint文字變成一個在EditText上方的浮動標簽，同時還包括一個漂亮的material動畫。TextInputLayout只接受一個子元素。子元素需要是一個EditText元素。

使用TextInputLayout

獲取控件EditText對象
TextInputLayout和LinearLayout和ScrollView不同，你可以使用一個特殊的方法獲得子元素EditText，getEditText，不需要使用findViewById。

如：

textinput_username = (TextInputLayout) findViewById(R.id.textinput_username);
EditText username = textinput_username.getEditText();

顯示錯誤信息
TextInputLayout的錯誤處理簡單快速。需要的方法是setErrorEnabled和setError。
使用setError時，錯誤信息會出現在EditText的下面。使用setErrorEnabled可以隱藏錯誤信息。

如：

    public void handleClick(View view) {
        String username = textinput_username.getEditText().getText().toString();
        if (TextUtils.isEmpty(username)) {
            textinput_username.setError("請輸入用戶名!");
        } else {
            textinput_username.setError(null); //必須添加，否則出現錯誤信息第二次不顯示的問題
            textinput_username.setErrorEnabled(false);
        }
    }

4.TabLayout

TabLayout提供了一個水平布局來顯示tabs。可以實現TabPageIndicator或PagerTabStrip相同的效果了。與ViewPager配合使用可發揮它的優勢。
布局文件：

常用的屬性：
app:tabIndicatorColor：Tab指示器下標的顏色
app:tabSelectedTextColor：Tab被選中時字體的顏色
app:tabTextColor：Tab未被選中時字體的顏色

Activity中調用

        tablayout = (TabLayout) findViewById(R.id.tablayout);
        tablayout.setTabMode(TabLayout.MODE_FIXED);
        tablayout.addTab(tablayout.newTab().setText("Tab 1"));
        tablayout.addTab(tablayout.newTab().setText("Tab 2"));
        tablayout.addTab(tablayout.newTab().setText("Tab 3"));
        tablayout.addTab(tablayout.newTab().setText("Tab 4"));
        tablayout.addTab(tablayout.newTab().setText("Tab 5"));
        tablayout.addTab(tablayout.newTab().setText("Tab 6"));

tablayout.setTabMode()中存在兩種選擇：
TabLayout.MODE_FIXED：不支持水平滑動
TabLayout.MODE_SCROLLABLE：支持水平滑動效果

配合ViewPager的使用完整代碼：

        viewpager = (ViewPager) findViewById(R.id.viewpager);
        tablayout = (TabLayout) findViewById(R.id.tablayout);
        tablayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        viewpager.setAdapter(pagerAdapter);
        tablayout.setupWithViewPager(viewpager);
        tablayout.getTabAt(0).setText("Tab 1");
        tablayout.getTabAt(1).setText("Tab 2");
        tablayout.getTabAt(2).setText("Tab 3");
        tablayout.getTabAt(3).setText("Tab 4");
        tablayout.getTabAt(4).setText("Tab 5");
        tablayout.getTabAt(5).setText("Tab 6");
        tablayout.getTabAt(6).setText("Tab 7");
        tablayout.getTabAt(7).setText("Tab 8");
        tablayout.getTabAt(8).setText("Tab 9");
        tablayout.getTabAt(9).setText("Tab 10");

注意：
設置tab欄信息時，要在
viewpager.setAdapter(pagerAdapter);
tablayout.setupWithViewPager(viewpager);之後，否則會出現tab上的文字不顯示的問題。具體原因可以通過查看setupWithViewPager方法內部，裡面執行了removeAllTabs()的操作。所以需要重新設置tabs中的標題信息。
效果圖：


5.AppBarLayout

AppBarLayout是一個垂直的線性布局，實現了許多MD的特性，包括滾動手勢。
它的子View通過 setScrollFlags(int) 方法或者設置app:layout_scrollFlags屬性來提供滾動的行為。但是必須是作為CoordinatorLayout的直接子view，這些行為才會生效。

1.實現上滑隱藏，下滑顯示的效果。（CoordinatorLayout + AppBarLayout + Toolbar + TabLayout）
布局文件設置：

效果圖如下：


總結如下：
根布局控件必須是CoordinatorLayout;
toolbar要放在布局AppBarLayout中；
toolbar需要設置屬性app:layout_scrollFlags=”scroll|enterAlways”；
在RecyclerView或者任意支持嵌套滾動的view比如NestedScrollView上添加屬性app:layout_behavior=”@string/appbar_scrolling_view_behavior”，這樣才能和AppBarLayout聯動

6.CollapsingToolbarLayout

CollapsingToolbarLayout被用來包裹Toolbar，實現了一個可折疊的app bar。它用來作為AppBarLayout的子類。CollapsingToolbarLayout還可以包含一個ImageView，用來作為滑動時的背景。

在CollapsingToolbarLayout中有幾個常見的屬性設置：
app:contentScrim=”@color/colorPrimary”：設置當CollapsingToolbarLayout完全折疊（收縮）後的背景顏色；
app:expandedTitleMarginStart=”48dp”：設置CollapsingToolbarLayout處於擴張時（未收縮）時，title距離左邊的距離；
app:layout_scrollFlags=”scroll|exitUntilCollapsed”：設置滾動標志，這裡面有幾個值：
scroll：想滾動就必須設置這個。
enterAlways：實現quick return效果, 當向下移動時，立即顯示View（比如Toolbar)。
exitUntilCollapsed：向上滾動時收縮View時，Toolbar一直固定在上面。
enterAlwaysCollapsed：當你的View已經設置minHeight屬性又使用此標志時，你的View只能以最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。

在CollapsingToolbarLayout中子ImageView的常見設置：
app:layout_collapseMode=”parallax”：設置子布局設置折疊模式
parallax：視差模式，在折疊的時候會有個視差折疊的效果。
pin：固定模式，在折疊的時候最後固定在頂端
app:layout_collapseParallaxMultiplier=”0.7”：設置視差的系數，介於0.0-1.0之間。

在CollapsingToolbarLayout中Toolbar的設置：
app:layout_collapseMode=”pin”：當CollapsingToolbarLayout完全收縮後， Toolbar還可以保留在屏幕上。

注：
1.使用CollapsingToolbarLayout時，必須把title設置到CollapsingToolbarLayout上，如果設置在Toolbar上不顯示。
2.設置title的字體顏色：
擴張時候的title顏色：mCollapsingToolbarLayout.setExpandedTitleColor();
收縮後在Toolbar上顯示時的title的顏色：mCollapsingToolbarLayout.setCollapsedTitleTextColor();

完整布局文件：

代碼文件：

toolbar = (Toolbar) findViewById(R.id.toolbar);
collapsing_layout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_layout);
collapsing_layout.setExpandedTitleColor(Color.RED);//設置還沒收縮時狀態下字體顏色
collapsing_layout.setCollapsedTitleTextColor(Color.GREEN);//設置收縮後Toolbar上字體的顏色

效果圖：


總結：
1.根布局控件必須是CoordinatorLayout
2.AppBarLayout包含CollapsingToolbarLayout布局，CollapsingToolbarLayout需要指定屬性
app:layout_scrollFlags=”scroll|exitUntilCollapsed” 向上滾動收縮view
app:contentScrim=”@color/colorPrimary” 折疊後的背景顏色
3.CollapsingToolbarLayout中包含視差圖片的控件ImageView和Toolbar 兩個子控件。
4.設置視差控件ImageView的兩個屬性：
app:layout_collapseMode=”parallax”
app:layout_collapseParallaxMultiplier=”0.7”
5.為了和視差控件ImageView交互，需要設置ToolBar的屬性
app:layout_collapseMode=”pin”
6.給帶scroll屬性的控件，比如NestedScrollView或者ScrollView，需要指定屬性：
app:layout_behavior=”@string/appbar_scrolling_view_behavior”
7.如果存在FloatingActionButton，指定屬性
app:layout_anchor=”@id/appbar_layout” //錨點定在AppBarLayout上,則可以隨視差滾動聯動

7.CoordinatorLayout

CoordinatorLayout 是一個非常強大的FrameLayout布局。
主要實現兩個基本的功能：
作為布局的頂層節點。
協調子View的調度。

1.CoordinatorLayout 與 FloatingActionButton
可以讓FAB上下滑動，為Snackbar流出空間。
布局文件：

Activity：

  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.content_main);
        fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                Snackbar.make(fab,"點擊了",Snackbar.LENGTH_LONG).show();
            }
        });
    }

效果圖：


關於CoordinatorLayout 與 AppBarLayout /CollapsingToolbarLayout 可以查看上面的介紹。

8.NavigationView
NavigationView表示一個標准的應用程序導航菜單，菜單可以有標准的menu資源文件填充。
NavigationView常見的是放在DrawerLayout中使用。

使用NavigationView
1.activity_main.xml的布局文件

裡面include了一個布局文件content_main.xml

接著看到NavigationView中，有兩個屬性app:headerLayout=”@layout/header_layout”，app:menu=”@menu/menu_drawer” ,分別代表drawer布局中的header和menuitem的區域。

header_layout.xml 文件如下：

menu_drawer.xml布局文件：

2.Activity中代碼：

public class MainActivity extends AppCompatActivity {
    private FloatingActionButton fab;
    private DrawerLayout drawerLayout;
    private NavigationView navigationView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fab = (FloatingActionButton) findViewById(R.id.fab);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        navigationView = (NavigationView) findViewById(R.id.navigationview);
        setupDrawerContent(navigationView);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                drawerLayout.openDrawer(Gravity.LEFT);
            }
        });
    }
    private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            private MenuItem mPreMenuItem;
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                //每次只能選擇一個item
                if (mPreMenuItem != null){
                    mPreMenuItem.setChecked(false);
                }
                item.setChecked(true);
                drawerLayout.closeDrawers();
                mPreMenuItem = item;
                return true;
            }
        });
        //設置默認選中的item
        navigationView.getMenu().getItem(0).setChecked(true);
    }
}

效果圖如下：


自定義該背景色
上面的menuItem 使用的是默認屬性，直接采用主題的顏色。
我們可以進行自定義該背景色，通過設置屬性：

app:itemTextColor="@color/menu_item_color"
app:itemIconTint="@color/menu_item_color"

首先在res/color文件下創建一個selector文件menu_item_color.xml：