當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

CoordinatorLayout与滚动的处理

發布時間：2025/3/21 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 CoordinatorLayout与滚动的处理小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本博文專門講解和CoordinatorLayout相關的知識點，這也是Design Support Library中最重要與最難的部分。

概覽

CoordinatorLayout實現了多種Material Design中提到的滾動效果。目前這個框架提供了幾種不用寫動畫代碼就能工作的方法，這些效果包括：

讓浮動操作按鈕上下滑動，為Snackbar留出空間

擴展或者縮小Toolbar或者頭部，讓主內容區域有更多的空間。

控制哪個view應該擴展還是收縮，以及其顯示大小比例，包括視差滾動效果parallax scrolling effects 動畫。

Code Samples

官方為我們提供了一個漂亮的demo ,使用了 CoordinatorLayout 和其他的 design support library特性.

詳情請查看github

效果圖

Setup

Make sure to follow the Design Support Library instructions first.

Floating Action Buttons and Snackbars

The CoordinatorLayout can be used to create floating effects using the layout_anchor and layout_gravity attributes. See the Floating Action Buttons guide for more information.

When a Snackbar is rendered, it normally appears at the bottom of the visible screen. To make room, the floating action button must be moved up to provide space.

So long as the CoordinatorLayout is used as the primary layout, this animation effect will occur for you automatically. The floating action button has a default behavior that detects Snackbar views being added and animates the button above the height of the Snackbar.

Code

activity_fab__snackar.xml

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/main_content"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.RecyclerViewandroid:id="@+id/rvToDoList"android:layout_width="match_parent"android:layout_height="wrap_content"/><android.support.design.widget.FloatingActionButtonandroid:id="@+id/floatingActionButton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:layout_margin="16dp"android:src="@drawable/gur_project_10"app:layout_anchor="@id/rvToDoList"app:layout_anchorGravity="bottom|right|end"app:layout_behavior="demo.turing.com.materialdesignwidget.floatingActionButton.ScrollAwareFABBehavior"/></android.support.design.widget.CoordinatorLayout>

Fab_SnackarAct.java

public class Fab_SnackarAct extends AppCompatActivity {private RecyclerView recyclerView;private FloatingActionButton floatingActionButton;private CoordinatorLayout coordinatorLayout ;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_fab__snackar);coordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);floatingActionButton = (FloatingActionButton) findViewById(R.id.floatingActionButton);recyclerView = (RecyclerView) findViewById(R.id.rvToDoList);// 線性布局recyclerView.setLayoutManager(new LinearLayoutManager(this));// 設置適配器，填充數據recyclerView.setAdapter(new NormalRecyclerViewAdapter(this));floatingActionButton.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Snackbar.make(view,"HELLO",Snackbar.LENGTH_SHORT).show();}});} }

關鍵點

根布局必須為CoordinatorLayout
FloatingActionButton設置 app:layout_anchor和app:layout_anchorGravity屬性
app:layout_behavior這個屬性也可以不加也能實現點擊floatingActionButton彈出Snackbar，fab自動上移的效果，app:layout_behavior的為自定義的效果，當下滑時，fab消失，上滑時fab顯示，詳情請查看本人博客 Floating Action Button-Android M新控件

運行圖

Expanding and Collapsing Toolbars（Toolbar的擴展與收縮）

The first step is to make sure you are not using the deprecated ActionBar. Make sure to follow the Using the ToolBar as ActionBar guide.
Also make sure that the CoordinatorLayout is the main layout container.

<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_content"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /></android.support.design.widget.CoordinatorLayout>

Responding to Scroll Events

Next, we must make the Toolbar responsive to scroll events using a container layout called AppBarLayout:
接下來，我們必須使用一個容器布局：AppBarLayout來讓Toolbar響應滾動事件。

<android.support.design.widget.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="@dimen/detail_backdrop_height"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"android:fitsSystemWindows="true"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /></android.support.design.widget.AppBarLayout>

Note: AppBarLayout currently expects to be the first child nested within a CoordinatorLayout according to the official Google docs.
注意：根據官方的谷歌文檔，AppBarLayout目前必須是第一個嵌套在CoordinatorLayout里面的子view。

Next, we need to define an association between the AppBarLayout and the View that will be scrolled. Add an app:layout_behavior to a RecyclerView or any other View capable of nested scrolling such as NestedScrollView 。
The support library contains a special string resource @string/appbar_scrolling_view_behavior that maps to AppBarLayout.ScrollingViewBehavior, which is used to notify the AppBarLayout when scroll events occur on this particular view. The behavior must be established on the view that triggers the event.

然后，我們需要定義AppBarLayout與滾動視圖之間的聯系。在RecyclerView或者任意支持嵌套滾動的view比如NestedScrollView上添加app:layout_behavior。support library包含了一個特殊的字符串資源@string/appbar_scrolling_view_behavior，它和AppBarLayout.ScrollingViewBehavior相匹配，用來通知AppBarLayout 這個特殊的view何時發生了滾動事件，這個behavior需要設置在觸發事件（滾動）的view之上。

<android.support.v7.widget.RecyclerViewandroid:id="@+id/rvToDoList"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior">

當CoordinatorLayout發現RecyclerView中定義了這個屬性，它會搜索自己所包含的其他view，看看是否有view與這個behavior相關聯。AppBarLayout.ScrollingViewBehavior描述了RecyclerView與AppBarLayout之間的依賴關系。RecyclerView的任意滾動事件都將觸發AppBarLayout或者AppBarLayout里面view的改變。

AppBarLayout里面定義的view只要設置了app:layout_scrollFlags屬性，就可以在RecyclerView滾動事件發生的時候被觸發：

<android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:fitsSystemWindows="true"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.AppBarLayout>

app:layout_scrollFlags屬性里面必須至少啟用scroll這個flag，這樣這個view才會滾動出屏幕，否則它將一直固定在頂部。可以使用的其他flag有：

enterAlways: 一旦向上滾動這個view就可見。

Normally, the Toolbar only appears when the list is scrolled to the top as shown below:

enterAlwaysCollapsed: 顧名思義，這個flag定義的是何時進入（已經消失之后何時再次顯示）。假設你定義了一個最小高度（minHeight）同時enterAlways也定義了，那么view將在到達這個最小高度的時候開始顯示，并且從這個時候開始慢慢展開，當滾動到頂部的時候展開完。

exitUntilCollapsed: 同樣顧名思義，這個flag時定義何時退出，當你定義了一個minHeight，這個view將在滾動到達這個最小高度的時候消失。
snap：Using this option will determine what to do when a view only has been partially reduced. If scrolling ends and the view size has been reduced to less than 50% of its original, then this view to return to its original size. If the size is greater than 50% of its sized, it will disappear completely.

記住，要把帶有scroll flag的view放在前面，這樣收回的view才能讓正常退出，而固定的view繼續留在頂部。

此時，你應該注意到我們的Toolbar能夠響應滾動事件了。

Creating Collapsing Effects（制造折疊效果）

如果想制造toolbar的折疊效果，我們必須把Toolbar放在CollapsingToolbarLayout中：

現在效果就成了：

通常，我們我們都是設置Toolbar的title，而現在，我們需要把title設置在CollapsingToolBarLayout上，而不是Toolbar。

CollapsingToolbarLayout collapsingToolbar =(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);collapsingToolbar.setTitle("Title");

Note that when using CollapsingToolbarLayout, the status bar should be made translucent (API 19) or transparent (API 21) as shown in this file. In particular, the following styles should be set in res/values-xx/styles.xml as illustrated:

<style name="AppTheme" parent="Base.AppTheme"><item name="android:windowTranslucentStatus">true</item> </style> <style name="AppTheme" parent="Base.AppTheme"><item name="android:windowDrawsSystemBarBackgrounds">true</item><item name="android:statusBarColor">@android:color/transparent</item> </style>

Creating Parallax Animations（制造視差效果）

CollapsingToolbarLayout還能讓我們做出更高級的動畫，比如在里面放一個ImageView，然后在它折疊的時候漸漸淡出。同時在用戶滾動的時候title的高度也會隨著改變。

為了制造出這種效果，我們添加一個定義了app:layout_collapseMode=”parallax” 屬性的ImageView。

<android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"app:contentScrim="?attr/colorPrimary"app:expandedTitleMarginEnd="64dp"app:expandedTitleMarginStart="48dp"app:layout_scrollFlags="scroll|exitUntilCollapsed"><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.v7.widget.Toolbar><ImageViewandroid:src="@drawable/cheese_1"app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"android:layout_width="wrap_content"android:layout_height="wrap_content"android:scaleType="centerCrop"app:layout_collapseMode="parallax"android:minHeight="100dp"/></android.support.design.widget.CollapsingToolbarLayout>

Custom Behaviors （自定義Behavior）

在CoordinatorLayout 與浮動操作按鈕中我們討論了一個自定義behavior的例子。
譯文http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0718/3197.html 。

CoordinatorLayout的工作原理是搜索定義了CoordinatorLayout Behavior 的子view，不管是通過在xml中使用app:layout_behavior標簽還是通過在代碼中對view類使用@DefaultBehavior修飾符來添加注解。當滾動發生的時候，CoordinatorLayout會嘗試觸發那些聲明了依賴的子view。

要自己定義CoordinatorLayout Behavior，你需要實現layoutDependsOn() 和onDependentViewChanged()兩個方法。比如AppBarLayout.Behavior 就定義了這兩個關鍵方法。這個behavior用于當滾動發生的時候讓AppBarLayout發生改變。

public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {return dependency instanceof AppBarLayout;}public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {// check the behavior triggeredandroid.support.design.widget.CoordinatorLayout.Behavior behavior = ((android.support.design.widget.CoordinatorLayout.LayoutParams)dependency.getLayoutParams()).getBehavior();if(behavior instanceof AppBarLayout.Behavior) {// do stuff here}}

英文原文：

https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout

總結

以上是生活随笔為你收集整理的CoordinatorLayout与滚动的处理的全部內容，希望文章能夠幫你解決所遇到的問題。

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

CoordinatorLayout

上一篇： CoordinatorLayout+Ap
下一篇：数据存储之-SQLite数据库一