Android CoordinatorLayout詳解及實例代碼
Android CoordinatorLayout詳解
一、CoordinatorLayout有什么作用
CoordinatorLayout作為“super-powered FrameLayout”基本實現(xiàn)兩個功能：
1、作為頂層布局
2、調(diào)度協(xié)調(diào)子布局
CoordinatorLayout使用新的思路通過協(xié)調(diào)調(diào)度子布局的形式實現(xiàn)觸摸影響布局的形式產(chǎn)生動畫效果。CoordinatorLayout通過設(shè)置子View的 Behaviors來調(diào)度子View。系統(tǒng)（Support V7）提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior<V extends View> 等。
使用CoordinatorLayout需要在Gradle加入Support Design Library：
compile 'com.android.support:design:22.2.1'
二、CoordinatorLayout與FloatingActionButton
定義布局文件：
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
CoordinatorLayout作為“super-powered FrameLayout”，設(shè)置子視圖的android:layout_gravity屬性控制位置。
Activity:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view,"FAB",Snackbar.LENGTH_LONG)
.setAction("cancel", new View.OnClickListener() {
@Override
public void onClick(View v) {
//這里的單擊事件代表點擊消除Action后的響應(yīng)事件
}
})
.show();
}
});
}
}
效果：
FloatingActionButton是最簡單的使用CoordinatorLayout的例子，F(xiàn)loatingActionButton默認使用FloatingActionButton.Behavior。
三、CoordinatorLayout與AppBarLayout3.1 AppBarLayout嵌套TabLayout
布局文件代碼：
<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.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
效果：
效果顯示，視圖滾動時，Toolbar會隱藏，這個效果是Android Support Library里面,新增的CoordinatorLayout, AppBarLayout實現(xiàn)的。通過AppBarLayout的子視圖的屬性控制。觀察AppBarLayout的子布局，Toobar有app:layout_scrollFlags屬性，這就是控制滑動時視圖效果的屬性。app:layout_scrollFlags有四個值：
1.scroll: 所有想滾動出屏幕的view都需要設(shè)置這個flag， 沒有設(shè)置這個flag的view將被固定在屏幕頂部。例如，TabLayout 沒有設(shè)置這個值，將會停留在屏幕頂部。
2.enterAlways: 設(shè)置這個flag時，向下的滾動都會導(dǎo)致該view變?yōu)榭梢?，啟用快速“返回模式”?/p>
3.enterAlwaysCollapsed: 當你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標志時，你的視圖只能已最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。
4.exitUntilCollapsed: 滾動退出屏幕，最后折疊在頂端。
為了ToolBar可以滾動，CoordinatorLayout里面,放一個帶有可滾動的View.如上的例子,放的是ViewPager,而ViewPager里面是放了RecylerView的,即是可以滾動的View。CoordinatorLayout包含的子視圖中帶有滾動屬性的View需要設(shè)置app:layout_behavior屬性。例如，示例中Viewpager設(shè)置了此屬性。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
為了使得Toolbar有滑動效果，必須做到如下三點:
1. CoordinatorLayout作為布局的父布局容器。
2. 給需要滑動的組件設(shè)置 app:layout_scrollFlags=”scroll|enterAlways” 屬性。
3. 給滑動的組件設(shè)置app:layout_behavior屬性
3.2 AppBarLayout嵌套CollapsingToolbarLayout
<?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"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@drawable/header"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="CardView"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/card_string" />
</LinearLayout>
</android.support.v7.widget.CardView>
……
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_done"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
效果：
這種效果在詳情頁面用的較多，展示個性化內(nèi)容，圖像有強烈的吸引力。這個效果重點使用了CollapsingToolbarLayout 。
CollapsingToolbarLayout可實現(xiàn)Toolbar的折疊效果。CollapsingToolbarLayout的子視圖類似與LinearLayout垂直方向排放。
CollapsingToolbarLayout 提供以下屬性和方法是用：
1. Collapsing title：ToolBar的標題，當CollapsingToolbarLayout全屏沒有折疊時，title顯示的是大字體，在折疊的過程中，title不斷變小到一定大小的效果。你可以調(diào)用setTitle(CharSequence)方法設(shè)置title。
2. Content scrim：ToolBar被折疊到頂部固定時候的背景，你可以調(diào)用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來改變背景。
3. Status bar scrim：狀態(tài)欄的背景，調(diào)用方法setStatusBarScrim(Drawable)。還沒研究明白，不過這個只能在Android5.0以上系統(tǒng)有效果。
4. Parallax scrolling children：CollapsingToolbarLayout滑動時，子視圖的視覺差，可以通過屬性app:layout_collapseParallaxMultiplier=”0.6”改變。值de的范圍[0.0,1.0]，值越大視察越大。
5. CollapseMode ：子視圖的折疊模式，在子視圖設(shè)置，有兩種“pin”：固定模式，在折疊的時候最后固定在頂端；“parallax”：視差模式，在折疊的時候會有個視差折疊的效果。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來改變。
CoordinatorLayout 還提供了一個 layout_anchor 的屬性，連同 layout_anchorGravity 一起，可以用來放置與其他視圖關(guān)聯(lián)在一起的懸浮視圖（如 FloatingActionButton）。本例中使用FloatingActionButton。
通過下面的參數(shù)設(shè)置了FloatingActionButton的位置，兩個屬性共同作用使得FAB 浮動按鈕也能折疊消失，展現(xiàn)。
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
使用CollapsingToolbarLayout實現(xiàn)折疊效果，需要注意3點
1. AppBarLayout的高度固定
2. CollapsingToolbarLayout的子視圖設(shè)置layout_collapseMode屬性
3. 關(guān)聯(lián)懸浮視圖設(shè)置app:layout_anchor，app:layout_anchorGravity屬性
四、自定義behavior
CoordinatorLayout功能如此強大，而他的神奇之處在于Behavior對象，CoordinatorLayout自己并不控制View，所有的控制權(quán)都在Behavior。前面寫到了FloatingActionButton.Behavior，AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior。 AppBarLayout中有兩個Behavior，一個是拿來給它自己用的，另一個是拿來給它的兄弟結(jié)點用的。這些Behavior實現(xiàn)了復(fù)雜的控制功能。系統(tǒng)的Behavior畢竟有限，我們可以通過自定義的方式來實現(xiàn)自己的Behavior。
通過 CoordinatorLayout.Behavior(YourView.Behavior.class) 來定義自己的Behavior，并在layout 文件中設(shè)置 app:layout_behavior=”com.example.app.YourView$Behavior” 來達到效果。
自定義Behavior 需要重寫兩個方法：
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)
如下面的例子，實現(xiàn)了點擊FloatingActionButton點擊旋轉(zhuǎn)90度，并適配Snackbar。
public class RotateBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> {
private static final String TAG = RotateBehavior.class.getSimpleName();
public RotateBehavior() {
}
public RotateBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
return dependency instanceof Snackbar.SnackbarLayout;
}
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
float translationY = getFabTranslationYForSnackbar(parent, child);
float percentComplete = -translationY / dependency.getHeight();
child.setRotation(-90 * percentComplete);
child.setTranslationY(translationY);
return false;
}
private float getFabTranslationYForSnackbar(CoordinatorLayout parent,
FloatingActionButton fab) {
float minOffset = 0;
final List<View> dependencies = parent.getDependencies(fab);
for (int i = 0, z = dependencies.size(); i < z; i++) {
final View view = dependencies.get(i);
if (view instanceof Snackbar.SnackbarLayout && parent.doViewsOverlap(fab, view)) {
minOffset = Math.min(minOffset,
ViewCompat.getTranslationY(view) - view.getHeight());
}
}
return minOffset;
}
}
<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.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_done"
app:layout_behavior="com.meizu.coordinatorlayoutdemo.RotateBehavior"/>
</android.support.design.widget.CoordinatorLayout>
效果：
綜上，基本覆蓋了CoordinatorLayout的使用方式。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要為大家介紹了Android?App如何防止抓包的方法及分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Android Studio連接SQLite數(shù)據(jù)庫的登錄注冊實現(xiàn)
這篇文章主要介紹了Android Studio連接SQLite數(shù)據(jù)庫的登錄注冊實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
如何在Android中實現(xiàn)一個簡易的Http服務(wù)器
這篇文章主要介紹了如何在Android中實現(xiàn)一個簡易的Http服務(wù)器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Kotlin對象的懶加載方式by?lazy?與?lateinit?異同詳解
這篇文章主要為大家介紹了Kotlin對象的懶加載方式by?lazy?與?lateinit?異同詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
開發(fā)過程中經(jīng)常會自定義View來實現(xiàn)各種各樣炫酷的效果，在實現(xiàn)這些效果的同時，我們往往會定義很多attr屬性這篇文章主要介紹了Android自定義attr的各種坑,需要的朋友可以參考下2016-04-04
Android學(xué)習(xí)筆記——Menu介紹(三)
今天繼續(xù)昨天沒有講完的Menu的學(xué)習(xí)，主要是Popup Menu的學(xué)習(xí),需要的朋友可以參考下2014-10-10
Android Studio中通過CMake使用NDK并編譯自定義庫和添加預(yù)編譯庫
這篇文章是基于Android Studio 3.01版本的，NDK是R16。本文重點給大家介紹Android Studio中通過CMake使用NDK并編譯自定義庫和添加預(yù)編譯庫的相關(guān)知識，感興趣的朋友一起看看吧2018-01-01
Android selector狀態(tài)選擇器的使用詳解
這篇文章主要為大家詳細介紹了Android selector狀態(tài)選擇器的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
在平常使用手機的過程中，九宮格解鎖是我們經(jīng)常接觸到的。常見的比如有鎖屏中的九宮格，還有支付寶中的九宮格等。因為九宮格可以保護用戶的隱私，所以它的應(yīng)用面很廣泛。那么今天我們就來自定義一個屬于自己的九宮格吧！2016-08-08
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)顏色選取器 ，類似SeekBar的方式通過滑動選擇顏色，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06