當(dāng)前位置：首頁(yè) >

使用CoordinatorLayout打造一个炫酷的详情页

發(fā)布時(shí)間：2025/4/16 41 豆豆

生活随笔收集整理的這篇文章主要介紹了使用CoordinatorLayout打造一个炫酷的详情页小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

原文鏈接：http://www.jianshu.com/p/5287d090e777

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

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

<?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>

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

CoordinatorLayout

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

AppBarLayout

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

AppBarLayout的子布局有5種滾動(dòng)標(biāo)識(shí)(上面代碼CollapsingToolbarLayout中配置的app:layout_scrollFlags屬性)：

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

CollapsingToolbarLayout

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

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

off：默認(rèn)屬性，布局將正常顯示，無(wú)折疊行為。
pin：CollapsingToolbarLayout折疊后，此布局將固定在頂部。
parallax：CollapsingToolbarLayout折疊時(shí)，此布局也會(huì)有視差折疊效果。
當(dāng)CollapsingToolbarLayout的子布局設(shè)置了parallax模式時(shí)，我們還可以通過(guò)app:layout_collapseParallaxMultiplier設(shè)置視差滾動(dòng)因子，值為：0~1。

NestedScrollView

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

FloatingActionButton

FloatingActionButton就比較簡(jiǎn)單了，就是一個(gè)漂亮的按鈕，其本質(zhì)是一個(gè)ImageVeiw。有一點(diǎn)要注意，Meterial Design引入了海拔（或者說(shuō)高度）的概念，就是所有的view都有了高度，他們像貼紙一樣，一層一層貼在手機(jī)屏幕上，而FloatingActionButton的海拔最高，它貼在所有view的最上面，沒(méi)有view能覆蓋它。

Behavior

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

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

貼一下上圖的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>

需要代碼的自取：GitHub

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

<?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了，后面有時(shí)間換個(gè)主題再談loadingmore！

總結(jié)

以上是生活随笔為你收集整理的使用CoordinatorLayout打造一个炫酷的详情页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Android 开源之StickyHea
下一篇： AlarmManager深入浅出