使用CoordinatorLayout打造一個炫酷的詳情頁

開發(fā)中如果能恰當?shù)氖褂胢aterial design的一些設計，不僅能讓你的APP更炫酷，最重要的是開發(fā)起來easy多了。這里介紹下material design里一個很重要的控件：CoordinatorLayout，以及配合其子view的一些用法。

我們在創(chuàng)建Activity的時候，有一個Activity模板叫Scrolling Activity，它實現(xiàn)的就是簡單的可折疊工具欄，我們在創(chuàng)建Activity的時候選擇此模板，然后并不需要添加任何代碼，跑起來就是下圖的樣子，有沒有很漂亮。這個模板一般來說比較適用于App的詳情頁，比如商品詳情，個人詳情，視頻詳情之類的。


Scrolling Activity.gif
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="test.com.scrollactivity.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:fitsSystemWindows="true"
        android:layout_height="@dimen/app_bar_height"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_scrolling" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

這是上面布局引用的NestedScrollView

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_scrolling"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="test.com.scrollactivity.ScrollingActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text" />

</android.support.v4.widget.NestedScrollView>

我們先對上面出現(xiàn)的這些布局控件做個簡單的介紹吧，估計多數(shù)同學會覺得比較陌生。

CoordinatorLayout

CoordinatorLayout，音：靠迪內特雷奧特；意：協(xié)調者布局。它是support.design包中的控件，所以使用的時候要導入compile 'com.android.support:design:23.3.0'包。簡單來說，CoordinatorLayout是用來協(xié)調其子view并以觸摸影響布局的形式產(chǎn)生動畫效果的一個super-powered FrameLayout，其典型的子View包括：FloatingActionButton，SnackBar。注意：CoordinatorLayout是一個頂級父View。

AppBarLayout

AppBarLayout是一個實現(xiàn)了很多材料設計特性的垂直的LinearLayout，它能響應滑動事件。必須在它的子view上設置app:layout_scrollFlags屬性或者是在代碼中調用setScrollFlags()設置這個屬性。這個類的特性強烈依賴于它是否是一個CoordinatorLayout的直接子view，如果不是，那么它的很多特性不能夠使用。AppBarLayout需要一個具有滑動屬性的兄弟節(jié)點view，并且在這個兄弟節(jié)點View中指定behavior屬性為AppBarLayout.ScrollingViewBehavior的類實例，可以使用一個內置的string表示這個默認的實例@string/appbar_scrolling_view_behavior。

AppBarLayout的子布局有5種滾動標識(上面代碼CollapsingToolbarLayout中配置的app:layout_scrollFlags屬性)：

scroll：所有想滾動出屏幕的view都需要設置這個flag， 沒有設置這個flag的view將被固定在屏幕頂部。
enterAlways：這個flag讓任意向下的滾動都會導致該view變?yōu)榭梢?，啟用快速“返回模式”?br> enterAlwaysCollapsed：假設你定義了一個最小高度（minHeight）同時enterAlways也定義了，那么view將在到達這個最小高度的時候開始顯示，并且從這個時候開始慢慢展開，當滾動到頂部的時候展開完。
exitUntilCollapsed：當你定義了一個minHeight，此布局將在滾動到達這個最小高度的時候折疊。
snap：當一個滾動事件結束，如果視圖是部分可見的，那么它將被滾動到收縮或展開。例如，如果視圖只有底部25%顯示，它將折疊。相反，如果它的底部75%可見，那么它將完全展開。

CollapsingToolbarLayout

CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar，它繼承自FrameLayout，給它設置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。CollapsingToolbarLayout可以通過app:contentScrim設置折疊時工具欄布局的顏色，通過app:statusBarScrim設置折疊時狀態(tài)欄的顏色。默認contentScrim是colorPrimary的色值，statusBarScrim是colorPrimaryDark的色值。

CollapsingToolbarLayout，音：克萊普辛。
CollapsingToolbarLayout的子布局有3種折疊模式（Toolbar中設置的app:layout_collapseMode）

off：默認屬性，布局將正常顯示，無折疊行為。
pin：CollapsingToolbarLayout折疊后，此布局將固定在頂部。
parallax：CollapsingToolbarLayout折疊時，此布局也會有視差折疊效果。
當CollapsingToolbarLayout的子布局設置了parallax模式時，我們還可以通過app:layout_collapseParallaxMultiplier設置視差滾動因子，值為：0~1。

NestedScrollView

在新版的support-v4兼容包里面有一個NestedScrollView控件，這個控件其實和普通的ScrollView并沒有多大的區(qū)別，這個控件其實是Meterial Design中設計的一個控件，目的是跟MD中的其他控件兼容。應該說在MD中，RecyclerView代替了ListView，而NestedScrollView代替了ScrollView，他們兩個都可以用來跟ToolBar交互，實現(xiàn)上拉下滑中ToolBar的變化。在NestedScrollView的名字中其實就可以看出他的作用了，Nested是嵌套的意思，而ToolBar基本需要嵌套使用。

FloatingActionButton

FloatingActionButton就比較簡單了，就是一個漂亮的按鈕，其本質是一個ImageVeiw。有一點要注意，Meterial Design引入了海拔（或者說高度）的概念，就是所有的view都有了高度，他們像貼紙一樣，一層一層貼在手機屏幕上，而FloatingActionButton的海拔最高，它貼在所有view的最上面，沒有view能覆蓋它。

Behavior

Behavior是Android新出的Design庫里新增的布局概念。Behavior只有是CoordinatorLayout的直接子View才有意義。只要將Behavior綁定到CoordinatorLayout的直接子元素上，就能對觸摸事件（touch events）、window insets、measurement、layout以及嵌套滾動（nested scrolling）等動作進行攔截。Design Library的大多功能都是借助Behavior的大量運用來實現(xiàn)的。當然，Behavior無法獨立完成工作，必須與實際調用的CoordinatorLayout子視圖相綁定。具體有三種方式：通過代碼綁定、在XML中綁定或者通過注釋實現(xiàn)自動綁定。上面NestedScrollView中app:layout_behavior="@string/appbar_scrolling_view_behavior"的Behavior是系統(tǒng)默認的，我們也可以根據(jù)自己的需求來自定義Behavior。

但實際的開發(fā)中，詳情頁NestedScrollView中不可能只簡單的包了一個TextView，那樣的話產(chǎn)品經(jīng)理也太便宜你了，這么大片的區(qū)域呢，怎么著也要來個列表吧，一個不夠，給我放仨，可以左右切換。于是乎真正的詳情頁做出來可能是這個樣子的。那所以我們可能還要在上面的代碼基礎上做些修改，F(xiàn)loatingActionButton就不要了，NestedScrollView和RecyclerView一塊用據(jù)說是有問題的，但我這里很明顯是需要一個Viewpager，然后里面放幾個Fragment，F(xiàn)ragment里放一個RecyclerView完事。Tab指示欄呢就用系統(tǒng)自帶的TabLayout，這個控件也在design包里，最新的design包甚至還貼心的提供了TabLayout的子View：TabItem，開發(fā)真的是變得越來越easy了。

qqqq.gif

貼一下上圖的Layout

<android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context="com.example.administrator.myapplication.MainActivity">
    
        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true">
    
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:collapsedTitleTextAppearance="@style/ToolBarTitleText"
                app:contentScrim="#46a8ba"
                app:expandedTitleMarginEnd="48dp"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleTextAppearance="@style/transparentText"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:fitsSystemWindows="true">
       
                <LinearLayout
                    android:id="@+id/login_layout"
                    android:layout_width="match_parent"
                    android:layout_height="240dp"
                    android:background="@mipmap/profile_bg"
                    android:orientation="vertical"
                    android:paddingBottom="10dp"
                    app:layout_collapseMode="pin"
                    app:layout_collapseParallaxMultiplier="0.7">
    
                        <de.hdodenhof.circleimageview.CircleImageView
                            android:id="@+id/head_img"
                            android:layout_width="60dp"
                            android:layout_height="60dp"
                            android:layout_marginTop="60dp"
                            android:layout_centerInParent="true"
                            android:layout_gravity="center"
                            android:src="@mipmap/ic_launcher"
                            app:border_color="@android:color/white"
                            app:border_width="2dp"
                            />
                        <TextView
                            android:id="@+id/nick_name"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:ellipsize="end"
                            android:gravity="center"
                            android:maxLength="24"
                            android:text="Star"
                            android:layout_marginTop="10dp"
                            android:singleLine="true"
                            android:textColor="#ffffff"
                            android:textSize="14sp"/>
    
                        <TextView
                            android:id="@+id/sign"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="5dp"
                            android:ellipsize="end"
                            android:gravity="center"
                            android:maxLength="70"
                            android:maxLines="2"
                            android:text="吹牛逼的都是年輕人"
                            android:textColor="#ffffff"
                            android:textSize="14sp"
                            android:visibility="visible"/>
                    </LinearLayout>
    
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
            </android.support.design.widget.CollapsingToolbarLayout>
    
            <android.support.design.widget.TabLayout
                android:id="@+id/toolbar_tab"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                android:background="#ffffff"
                android:fillViewport="false"
                app:layout_scrollFlags="scroll"
                app:tabIndicatorColor="#0835f8"
                app:tabIndicatorHeight="2.0dp"
                app:tabSelectedTextColor="#0835f8"
                app:tabTextColor="#ced0d3">
    
                <android.support.design.widget.TabItem
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="A" />
    
                <android.support.design.widget.TabItem
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="B" />
    
                <android.support.design.widget.TabItem
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="C" />
    
            </android.support.design.widget.TabLayout>
        </android.support.design.widget.AppBarLayout>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    
    </android.support.design.widget.CoordinatorLayout>

需要代碼的自?。?a target="_blank" rel="nofollow">GitHub

有同學希望能加上下拉刷新，上拉加載，其實也是簡單的。我們還是用SwipeRefreshLayout吧。但我們現(xiàn)在面臨一個問題，這個SwipeRefreshLayout加在哪？我見過案例是把SwipeRefreshLayout做為頂級View包在CoordinatorLayout的外面，我覺得這個做法還是很糟糕的，首先CoordinatorLayout推薦做為頂級View使用，現(xiàn)在又在外面套了個刷新，不倫不類的；其次，如上面的案例就會出現(xiàn)一個SwipeRefreshLayout會對應三個子列表的刷新，處理起來還是麻煩。我們是不是可以把SwipeRefreshLayout套在ViewPager外面呢？也是可以的，但還是麻煩。我們就把下拉刷新這件事交給Fragment自己來做好了。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/swipeLayout"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/list_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
</android.support.v4.widget.SwipeRefreshLayout>

完了效果就是醬嬸滴，至于上拉加載也是很easy了，后面有時間換個主題再談loadingmore！

D10D328C-F768-4816-BBF9-ED225B49698E-788-00000084B95CB0F7.gif

代碼已更新?。?！

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容