Android教程網 >> Android技術 >> 關於Android編程 >> 一個Activity掌握Design新控件

一個Activity掌握Design新控件

編輯：關於Android編程

谷歌在推出Android5.0的同時推出了全新的設計Material Design，谷歌為了給我們提供更加規范的MD設計風格的控件，在2015年IO大會上推出了Design支持包，Design常用的新控件有下面8種。

1. TextInputLayout（文本輸入布局）

TextInputLayout的作用是將EditText包裹起來，使得EditText的android:hint屬性的值以浮動標簽的形式顯示出來，同時可以通過setErrorEnabled(boolean)和setError(CharSequence)來顯示錯誤信息。

在xml文件中定義TextInputLayout：

在java文件中設置錯誤信息：

        this.textinputlayout.setErrorEnabled(true);
        this.textinputlayout.setError("作者不能包含標點符號");

2. TabLayout（選項卡布局）

Tablayout提供橫向布局顯示選項卡，它取代了ActionBar添加選項卡的方式。它經常與ViewPager配合使用。

在xml文件中定義TabLayout：

在java文件中添加選項卡：

        tablayout.addTab(tablayout.newTab().setText("Tab1"));
        tablayout.addTab(tablayout.newTab().setText("Tab2"));
        tablayout.addTab(tablayout.newTab().setText("Tab3"));

Tablayout與ViewPager配合使用:
- tablayout.setupWithViewPager();
這種方法下面選項卡的標題由ViewPager決定
- viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(tablayout));
這種方法下面選項卡的標題由Tablayout決定

3. Snackbar

Snackbar提供比Toast輕量級的反饋操作，谷歌推薦使用Snackbar替代Toast。Snackbar顯示或者消失的時候有一個回調方法。

        //tablayout是Snackbar努力找到持有自己的視圖
        Snackbar snackbar=Snackbar.make(tablayout,"我是Snackbar",Snackbar.LENGTH_LONG);
        //為snackbar設置回調方法
        snackbar.setCallback(new Snackbar.Callback() {
            @Override
            public void onDismissed(Snackbar snackbar, int event) {
                super.onDismissed(snackbar, event);
                Log.i("Snackbar","Snackbar消失了");
            }
            @Override
            public void onShown(Snackbar snackbar) {
                super.onShown(snackbar);
                Log.i("Snackbar","Snackbar出現了");
            }
        });
        //顯示snackbar
        snackbar.show();

4. FloatingActionButton（浮動按鈕）

FloatingActionButton在用戶界面中通常是一個漂浮的小圓圈，它有自身獨特的動態效果，比如變形、彈出、位移等等。

FloatingActionButton默認的背景顏色是主題的colorAccent，還可以通過app:backgroundTint來修改，也可以通過android:backgroundTint屬性修改，但是android:backgroundTint屬性只能在API21及以上使用。

FloatingActionButton的定義很簡單：

5. NavigationView(導航視圖)

NavigationView顧名思義是導航視圖，一般與DrawerLayout（抽屜布局）聯合使用。它為應用程序提供標准的導航菜單，菜單內容可以通過一個xml菜單文件來填充。

在xml文件中定義NavigationView

app:headerLayout：表示NavigationView的頭部布局 app:menu：表示NavigationView的導航菜單

頭部布局很簡單就是一個普通的布局文件，我們來看看導航菜單的定義吧。

我們來分析一下該xml文件：
group：表示組
android:checkableBehavior：可以接受下面3種值
- single 組中只有一個菜單項可以checked
- all 組中所有菜單項可checked
- none 組中所有菜單項都不可checked

item：表示項，下面可以有子菜單， item與item會默認有分割線分開。

6. AppBarLayout（應用程序欄布局）

AppBarLayout是一個垂直的線性布局，實現了Material Design概念的應用程序欄，支持滾動手勢。
它的子視圖提供所需的滾動行為：
- 在java文件中通過setScrollflags（int）設置
- 在xml布局文件中通過““

AppBarLayout經常作為CoordinatorLayout的直接子視圖使用。
AppBarLayout的作用是把AppBarLayout包裹的內容都作為應用程序欄。

我們在xml文件中定義一個AppBarLayout，AppBarLayout下面有一個Toolbar和一個TabLayout

我們向上滑動AppBarLayout看看有什麼效果

此時我們發現Toolbar被隱藏了，我們再在向下滑動AppBarLayout，發現Toolbar又出來了。
這就相當於是一個可以折疊的工具欄。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPtXiysfS8s6qVG9vbGJhcsno1sPByzxjb2RlPmFwcDpsYXlvdXRfc2Nyb2xsRmxhZ3M9JnF1b3Q7c2Nyb2xs"enterAlways"。
app:layout_scrollFlags屬性裡面必須至少啟用scroll這個flag，這樣這個view才會滾動出屏幕，否則它將一直固定在頂部。可以使用的其他flag有：
- enterAlways: 一旦向下滾動，不管是否繼續滾動，該view都會變為可見。
- enterAlwaysCollapsed: 這個屬性是作為enterAlways屬性的附加屬性使用的，這個flag定義的是何時進入，，當你定義了一個minHeight，並且定義了enterAlways屬性，那麼view將在到達這個最小高度的時候開始顯示，並且從這個時候開始慢慢展開，當滾動到頂部的時候展開完。
- exitUntilCollapsed: 這個flag時定義何時退出，當你定義了一個minHeight，這個view將在滾動到達這個最小高度的時候開始慢慢消失。

app:layout_scrollFlags這個屬性其實一般就只有下面4種使用情況，我們來一一講解。

1. `app:layout_scrollFlags="scroll"`

該view顯示時，只有在滾動視圖頂部向上滾動時，該view才會慢慢消失。該view消失後，只有在滾動視圖頂部向下滾動時，該view才會慢慢出現。

2. `app:layout_scrollFlags="scroll|enterAlways"`

該view顯示時，只要滾動視圖向上滾動，該view就會慢慢消失。該view消失後，只要滾動視圖向下滾動，該view就會慢慢出現。

3. `app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"`,同時該view設置了`minHeight`

該view顯示時，只要滾動視圖向上滾動，該view就會慢慢消失。該view消失後，只要滾動視圖向下滾動，該view就會慢慢出現:
當滾動視圖不在頂部時，該view只會慢慢出現minHeight高度的內容當滾動視圖在頂部時，該view會慢慢出現全部的內容

4. `app:layout_scrollFlags="scroll|exitUntilCollapsed"`,同時該view設置了`minHeight`

該view顯示時，只有在滾動視圖頂部向上滾動時，該view才會慢慢消失，但不會完全消失，會保留著 minHeight高度的內容依然可見。該view消失後，只有在滾動視圖頂部向下滾動時，該view才會慢慢出現。

注意：只有AppBarLayout第一個設置app:layout_scrollFlags屬性的直接子視圖可以折疊

7. CoordinatorLayout（協作布局）

CoordinatorLayout是一個超級強大的FrameLayout。
CoordinatorLayout有兩個主要用途：
- 作為頂級應用程序的裝飾或著色布局
- 作為特定交互的容器，與一個或多個孩子視圖交互

CoordinatorLayout作為一個父視圖，它的孩子可以通過特定的行為與CoordinatorLayout別的孩子交互。
當視圖類作為CoordinatorLayout的孩子時，可以定義特定的行為。
- 在xml文件中使用app:layout_behavior。
- 在view類使用@DefaultBehavior修飾符來添加注解。

在CoordinatorLayout的孩子視圖FloatingActionButton中設置
app:layout_behavior="com.lavor.designnewcontrols.ScrollBehavior"
com.lavor.designnewcontrols.ScrollBehavior的代碼如下：

public class ScrollBehavior extends CoordinatorLayout.Behavior {
    /**
     * 因為是在XML中使用app:layout_behavior定義靜態的這種行為,
     * 必須實現一個構造函數使布局的效果能夠正常工作。
     * 否則 Could not inflate Behavior subclass error messages.
     */
    public ScrollBehavior(Context context, AttributeSet attrs) {
        super();
    }

    /**
     * 開始滾動時
     */
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        //如果child可見，設置其不可見
        if(child.getVisibility()==View.VISIBLE){
            ((FloatingActionButton)child).hide();
        }
        //如果child不可見，設置其可見
        else{
            ((FloatingActionButton)child).show();
        }
        return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }
}

CoordinatorLayout的子視圖可以設置app:layout_anchor屬性，該屬性的值對應著CoordinatorLayout中其它子視圖（不能是該視圖本身或其子視圖）的android:id屬性。這可以將浮動視圖放在任意地方。

我們將FloatingActionButton（浮動按鈕）放置到Toolbar的右下方結束位置。

注意：使用CoordinatorLayout時，AppBarLayout下面有一個RecyclerView時，RecyclerView會與AppBarLayout重疊，因為CoordinatorLayout是幀布局。

要解決這個問題可以設置RecyclerView的app:layout_behavior="@string/appbar_scrolling_view_behavior"，其實此時該屬性的值就是android.support.design.widget.AppBarLayout$ScrollingViewBehavior

8. CollapsingToolbarLayout（折疊工具欄布局）

CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar，它繼承至FrameLayout，它通常是作為AppBarLayout直接子視圖使用。它提供的折疊工具欄更高級，還可以制造視覺差。

對於CollapsingToolbarLayout，我們通常是這樣使用的，將其定義為AppBarLayout的第一個直接子視圖，並且其自身定義如下：它裡面有一個ImageView和一個Toolbar，形成折疊工具欄。

首先，CollapsingToolbarLayout要設置app:layout_scrollFlags，這個屬性在介紹AppBarLayout的時候已經講過了，app:contentScrim表示滾動達到一定阈值後Toolbar的背景顏色，app:expandedTitleMarginStart設置擴張時候(還沒有收縮時)title向左填充的距離。其次， ImageView的app:layout_collapseMode屬性的值為parallax，設置為這個模式時，在內容滾動時，CollapsingToolbarLayout中的View（比如ImageView)也可以同時滾動，實現視差滾動效果，通常和app:layout_collapseParallaxMultiplier屬性(設置視差因子)搭配使用，其值為0~1。最後，Toolbar的app:layout_collapseMode屬性的值為pin，設置為這個模式時，當CollapsingToolbarLayout完全收縮後，Toolbar還可以保留在屏幕上。

程序源代碼下載：一個Activity掌握Design新控件

關於Design新控件國外有一篇不錯的教程：https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
該教程源代碼的github地址：https://github.com/chrisbanes/cheesesquare