詳解android特性之CoordinatorLayout用法探析實(shí)例
當(dāng)我在AS上新建一個(gè)module時(shí)，系統(tǒng)默認(rèn)的最外層布局不再是我們熟悉的五大布局中的一種，而是一個(gè)全新的布局：CoordinatorLayout。它是Material風(fēng)格的重要組件, 作為布局的頂層控件，協(xié)調(diào)(Coordinate)其他組件, 實(shí)現(xiàn)聯(lián)動(dòng)。
下面來(lái)看一個(gè)最簡(jiǎn)單的例子，CoordinatorLayout與FloatingActionButton的使用，它可以使浮動(dòng)按鈕上下移動(dòng)，為Snackbar流出空間來(lái)展示。
定義的布局文件如下：
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.lingyun.coordinatorlayoutdemo.MainActivity"> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" android:src="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout>
代碼就很簡(jiǎn)單了，如下：
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
}
就是通過(guò)findViewById獲取FloatingActionButton，設(shè)置點(diǎn)擊事件，在onclick中讓Snackbar顯示一下即可。那么，效果圖就像下面展示的莪一樣：
接下來(lái)看一個(gè)高級(jí)點(diǎn)的效果，就是標(biāo)題欄，也就是ToolBar的擴(kuò)展與收縮效果。要想要ToolBar響應(yīng)滾動(dòng)事件，這里我們需要用到一個(gè)控件：AppBarLayout，這個(gè)控件必須作為CoordinatorLayout的直接子View，才會(huì)響應(yīng)滾動(dòng)事件。首先因?yàn)槲覀兊腡ooBar是需要響應(yīng)滾動(dòng)的視圖，所以需要為其配置一個(gè)屬性：layout_scrollFlags。然后呢，我們需要定義一下AppBarLayout與滾動(dòng)視圖(如RecyclerView，NestedScrollView等可以支持嵌套滾動(dòng)的控件)supportlibrary包含了一個(gè)特殊的字符串資源@string/appbar_scrolling_view_behavior，它和AppBarLayout.ScrollingViewBehavior相匹配，用來(lái)通知AppBarLayout 這個(gè)特殊的view何時(shí)發(fā)生了滾動(dòng)事件，這個(gè)behavior需要設(shè)置在觸發(fā)事件（滾動(dòng)）的view之上。最終layout布局如下：
主布局（activity_main.xml）：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/appbar_main"/>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
appbar_main.xml布局：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
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="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"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
content_main.xml布局：
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="你是誰(shuí)？你從哪里來(lái)？你到哪里去？"/>
</android.support.v4.widget.NestedScrollView>
效果圖如下：
通過(guò)效果顯示，當(dāng)視圖在滾動(dòng)的時(shí)候，ToolBar滾出了屏幕，為內(nèi)容區(qū)域留出了更大空間。其中控制ToolBar是否可以滾出屏幕的屬性是由app:layout_scrollFlags="scroll|enterAlways"。來(lái)說(shuō)一下這個(gè)屬性，要想滾出屏幕layout_scrollFlags必須設(shè)置scrll這個(gè)flag。剩下的幾個(gè)flag解釋如下：
enterAlways:只要滾動(dòng)視圖向下滾動(dòng)，view就會(huì)顯示出來(lái)。
enterAlwaysCollapsed:顧名思義，這個(gè)flag定義的是何時(shí)進(jìn)入（已經(jīng)消失之后何時(shí)再次顯示）。假設(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: 同樣顧名思義，這個(gè)flag時(shí)定義何時(shí)退出，當(dāng)你定義了一個(gè)minHeight，這個(gè)view將在滾動(dòng)到達(dá)這個(gè)最小高度的時(shí)候消失。
下面來(lái)通過(guò)flag為exitUntilCollapsed時(shí)，來(lái)實(shí)現(xiàn)Toolbar的折疊顯示的效果。這個(gè)時(shí)候呢，我們把Toolbar直接放在CollapsingToolbarLayout下，先修改appbar_main.xml布局如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
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="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="248dp"
app:expandedTitleMarginEnd="10dp"
app:expandedTitleMarginStart="10dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
效果圖：
下面再來(lái)看一個(gè)更好玩高級(jí)的效果，實(shí)現(xiàn)滑動(dòng)的時(shí)候差生視覺(jué)差的感覺(jué)。先看效果圖：
先appbar_main.xml的布局如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
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="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="248dp"
app:expandedTitleMarginEnd="10dp"
app:expandedTitleMarginStart="10dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:background="@drawable/bg"/>
<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>
實(shí)現(xiàn)視覺(jué)差的屬性主要來(lái)自于app:layout_collapseMode="parallax",這個(gè)flag代表的是視差模式，即在折疊的時(shí)候會(huì)有視差折疊的效果，而“pin”，固定模式，就是在折疊的最后固定在最頂端。
上面說(shuō)了那么多，其實(shí)這些效果的實(shí)現(xiàn)都離不開(kāi)一個(gè)東西，那就是Behavior。CoordinatorLayout的工作原理是搜索定義了CoordinatorLayout Behavior的子view，不管是通過(guò)在xml中使用app:layout_behavior標(biāo)簽還是通過(guò)在代碼中對(duì)view類(lèi)使用@DefaultBehavior修飾符來(lái)添加注解。當(dāng)滾動(dòng)發(fā)生的時(shí)候，CoordinatorLayout會(huì)嘗試觸發(fā)那些聲明了依賴(lài)的子view。要自己定義CoordinatorLayoutBehavior，你需要實(shí)現(xiàn)layoutDependsOn() 和onDependentViewChanged()兩個(gè)方法。
綜上，差不就是CoordinatorLayout 的實(shí)現(xiàn)各種效果了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Android編程鬧鐘設(shè)置方法,結(jié)合實(shí)例形式分析了Android鬧鐘設(shè)置的步驟與時(shí)間監(jiān)聽(tīng)的操作技巧,需要的朋友可以參考下2016-10-10
Flutter之Timer實(shí)現(xiàn)短信驗(yàn)證碼獲取60s倒計(jì)時(shí)功能的代碼
這篇文章主要介紹了Flutter之Timer實(shí)現(xiàn)短信驗(yàn)證碼獲取60s倒計(jì)時(shí)功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
Android實(shí)現(xiàn)類(lèi)似IOS右滑返回的效果(原因分析及解決辦法)
這篇文章主要介紹了Android實(shí)現(xiàn)類(lèi)似IOS右滑返回的效果，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-03-03
這篇文章主要介紹了Android 軟引用和弱引用詳解的相關(guān)資料,并附實(shí)現(xiàn)實(shí)例代碼，需要的朋友可以參考下2016-11-11
Android NDK開(kāi)發(fā)(C語(yǔ)言-文件讀寫(xiě))
這篇文章主要介紹了Android NDK開(kāi)發(fā)C語(yǔ)言文件讀寫(xiě)，一個(gè)文件，無(wú)論它是文本文件還是二進(jìn)制文件，都是代表了一系列的字節(jié)。下面我們就來(lái)看看在Android NDK開(kāi)發(fā)中的C語(yǔ)言文件讀寫(xiě)詳細(xì)內(nèi)容吧,需要的朋友可以參考一下2021-12-12
android GridView多選效果的實(shí)例代碼
在使用 GridView的時(shí)候，有時(shí)需要多選上面顯示的類(lèi)容，比如批量刪除上面顯示的圖片，批量上傳圖片等。這個(gè)時(shí)候我們可以使用層疊圖來(lái)實(shí)現(xiàn)，效果如下：2013-06-06
Android中實(shí)現(xiàn)EditText圓角的方法
Android中實(shí)現(xiàn)EditText圓角的方法，需要的朋友可以參考一下2013-03-03
Android編程實(shí)現(xiàn)列表側(cè)滑刪除的方法詳解
這篇文章主要介紹了Android編程實(shí)現(xiàn)列表側(cè)滑刪除的方法,結(jié)合實(shí)例形式詳細(xì)分析了Android列表側(cè)滑刪除功能的原理與具體實(shí)現(xiàn)技巧,注釋中包含詳盡的說(shuō)明,需要的朋友可以參考下2018-01-01
Android 中按home鍵和跳轉(zhuǎn)到主界面的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家分享Android 中按home鍵和跳轉(zhuǎn)到主界面的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-04-04
Android 設(shè)置主題實(shí)現(xiàn)點(diǎn)擊波紋效果的示例
本篇文章主要介紹了Android 設(shè)置主題實(shí)現(xiàn)點(diǎn)擊波紋效果的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11