Android CoordinatorLayout詳解及實(shí)例代碼
Android CoordinatorLayout詳解
一、CoordinatorLayout有什么作用
CoordinatorLayout作為“super-powered FrameLayout”基本實(shí)現(xiàn)兩個(gè)功能:
1、作為頂層布局
2、調(diào)度協(xié)調(diào)子布局
CoordinatorLayout使用新的思路通過(guò)協(xié)調(diào)調(diào)度子布局的形式實(shí)現(xiàn)觸摸影響布局的形式產(chǎn)生動(dòng)畫(huà)效果。CoordinatorLayout通過(guò)設(shè)置子View的 Behaviors來(lái)調(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) { //這里的單擊事件代表點(diǎn)擊消除Action后的響應(yīng)事件 } }) .show(); } }); } }
效果:
FloatingActionButton是最簡(jiǎn)單的使用CoordinatorLayout的例子,F(xiàn)loatingActionButton默認(rèn)使用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>
效果:
效果顯示,視圖滾動(dòng)時(shí),Toolbar會(huì)隱藏,這個(gè)效果是Android Support Library里面,新增的CoordinatorLayout, AppBarLayout實(shí)現(xiàn)的。通過(guò)AppBarLayout的子視圖的屬性控制。觀察AppBarLayout的子布局,Toobar有app:layout_scrollFlags屬性,這就是控制滑動(dòng)時(shí)視圖效果的屬性。app:layout_scrollFlags有四個(gè)值:
1.scroll: 所有想滾動(dòng)出屏幕的view都需要設(shè)置這個(gè)flag, 沒(méi)有設(shè)置這個(gè)flag的view將被固定在屏幕頂部。例如,TabLayout 沒(méi)有設(shè)置這個(gè)值,將會(huì)停留在屏幕頂部。
2.enterAlways: 設(shè)置這個(gè)flag時(shí),向下的滾動(dòng)都會(huì)導(dǎo)致該view變?yōu)榭梢?jiàn),啟用快速“返回模式”。
3.enterAlwaysCollapsed: 當(dāng)你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí),你的視圖只能已最小高度進(jìn)入,只有當(dāng)滾動(dòng)視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度。
4.exitUntilCollapsed: 滾動(dòng)退出屏幕,最后折疊在頂端。
為了ToolBar可以滾動(dòng),CoordinatorLayout里面,放一個(gè)帶有可滾動(dòng)的View.如上的例子,放的是ViewPager,而ViewPager里面是放了RecylerView的,即是可以滾動(dòng)的View。CoordinatorLayout包含的子視圖中帶有滾動(dòng)屬性的View需要設(shè)置app:layout_behavior屬性。例如,示例中Viewpager設(shè)置了此屬性。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
為了使得Toolbar有滑動(dòng)效果,必須做到如下三點(diǎn):
1. CoordinatorLayout作為布局的父布局容器。
2. 給需要滑動(dòng)的組件設(shè)置 app:layout_scrollFlags=”scroll|enterAlways” 屬性。
3. 給滑動(dòng)的組件設(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>
效果:
這種效果在詳情頁(yè)面用的較多,展示個(gè)性化內(nèi)容,圖像有強(qiáng)烈的吸引力。這個(gè)效果重點(diǎn)使用了CollapsingToolbarLayout 。
CollapsingToolbarLayout可實(shí)現(xiàn)Toolbar的折疊效果。CollapsingToolbarLayout的子視圖類似與LinearLayout垂直方向排放。
CollapsingToolbarLayout 提供以下屬性和方法是用:
1. Collapsing title:ToolBar的標(biāo)題,當(dāng)CollapsingToolbarLayout全屏沒(méi)有折疊時(shí),title顯示的是大字體,在折疊的過(guò)程中,title不斷變小到一定大小的效果。你可以調(diào)用setTitle(CharSequence)方法設(shè)置title。
2. Content scrim:ToolBar被折疊到頂部固定時(shí)候的背景,你可以調(diào)用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=”?attr/colorPrimary”來(lái)改變背景。
3. Status bar scrim:狀態(tài)欄的背景,調(diào)用方法setStatusBarScrim(Drawable)。還沒(méi)研究明白,不過(guò)這個(gè)只能在Android5.0以上系統(tǒng)有效果。
4. Parallax scrolling children:CollapsingToolbarLayout滑動(dòng)時(shí),子視圖的視覺(jué)差,可以通過(guò)屬性app:layout_collapseParallaxMultiplier=”0.6”改變。值de的范圍[0.0,1.0],值越大視察越大。
5. CollapseMode :子視圖的折疊模式,在子視圖設(shè)置,有兩種“pin”:固定模式,在折疊的時(shí)候最后固定在頂端;“parallax”:視差模式,在折疊的時(shí)候會(huì)有個(gè)視差折疊的效果。我們可以在布局中使用屬性app:layout_collapseMode=”parallax”來(lái)改變。
CoordinatorLayout 還提供了一個(gè) layout_anchor 的屬性,連同 layout_anchorGravity 一起,可以用來(lái)放置與其他視圖關(guān)聯(lián)在一起的懸浮視圖(如 FloatingActionButton)。本例中使用FloatingActionButton。
通過(guò)下面的參數(shù)設(shè)置了FloatingActionButton的位置,兩個(gè)屬性共同作用使得FAB 浮動(dòng)按鈕也能折疊消失,展現(xiàn)。
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
使用CollapsingToolbarLayout實(shí)現(xiàn)折疊效果,需要注意3點(diǎn)
1. AppBarLayout的高度固定
2. CollapsingToolbarLayout的子視圖設(shè)置layout_collapseMode屬性
3. 關(guān)聯(lián)懸浮視圖設(shè)置app:layout_anchor,app:layout_anchorGravity屬性
四、自定義behavior
CoordinatorLayout功能如此強(qiáng)大,而他的神奇之處在于Behavior對(duì)象,CoordinatorLayout自己并不控制View,所有的控制權(quán)都在Behavior。前面寫(xiě)到了FloatingActionButton.Behavior,AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior。 AppBarLayout中有兩個(gè)Behavior,一個(gè)是拿來(lái)給它自己用的,另一個(gè)是拿來(lái)給它的兄弟結(jié)點(diǎn)用的。這些Behavior實(shí)現(xiàn)了復(fù)雜的控制功能。系統(tǒng)的Behavior畢竟有限,我們可以通過(guò)自定義的方式來(lái)實(shí)現(xiàn)自己的Behavior。
通過(guò) CoordinatorLayout.Behavior(YourView.Behavior.class) 來(lái)定義自己的Behavior,并在layout 文件中設(shè)置 app:layout_behavior=”com.example.app.YourView$Behavior” 來(lái)達(dá)到效果。
自定義Behavior 需要重寫(xiě)兩個(gè)方法:
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)
如下面的例子,實(shí)現(xiàn)了點(diǎn)擊FloatingActionButton點(diǎn)擊旋轉(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的使用方式。
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
Android Studio連接SQLite數(shù)據(jù)庫(kù)的登錄注冊(cè)實(shí)現(xiàn)
這篇文章主要介紹了Android Studio連接SQLite數(shù)據(jù)庫(kù)的登錄注冊(cè)實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06如何在Android中實(shí)現(xiàn)一個(gè)簡(jiǎn)易的Http服務(wù)器
這篇文章主要介紹了如何在Android中實(shí)現(xiàn)一個(gè)簡(jiǎn)易的Http服務(wù)器,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05Kotlin對(duì)象的懶加載方式by?lazy?與?lateinit?異同詳解
這篇文章主要為大家介紹了Kotlin對(duì)象的懶加載方式by?lazy?與?lateinit?異同詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Android學(xué)習(xí)筆記——Menu介紹(三)
今天繼續(xù)昨天沒(méi)有講完的Menu的學(xué)習(xí),主要是Popup Menu的學(xué)習(xí),需要的朋友可以參考下2014-10-10Android Studio中通過(guò)CMake使用NDK并編譯自定義庫(kù)和添加預(yù)編譯庫(kù)
這篇文章是基于Android Studio 3.01版本的,NDK是R16。本文重點(diǎn)給大家介紹Android Studio中通過(guò)CMake使用NDK并編譯自定義庫(kù)和添加預(yù)編譯庫(kù)的相關(guān)知識(shí),感興趣的朋友一起看看吧2018-01-01Android selector狀態(tài)選擇器的使用詳解
這篇文章主要為大家詳細(xì)介紹了Android selector狀態(tài)選擇器的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-09-09輕松實(shí)現(xiàn)安卓(Android)九宮格解鎖
在平常使用手機(jī)的過(guò)程中,九宮格解鎖是我們經(jīng)常接觸到的。常見(jiàn)的比如有鎖屏中的九宮格,還有支付寶中的九宮格等。因?yàn)榫艑m格可以保護(hù)用戶的隱私,所以它的應(yīng)用面很廣泛。那么今天我們就來(lái)自定義一個(gè)屬于自己的九宮格吧!2016-08-08Android自定義View實(shí)現(xiàn)顏色選取器
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)顏色選取器 ,類似SeekBar的方式通過(guò)滑動(dòng)選擇顏色,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06