本篇文章為大家展示了怎么在Android應(yīng)用中利用CoordinatorLayout實(shí)現(xiàn)一個(gè)標(biāo)題滾動(dòng)效果,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司堅(jiān)信:善待客戶,將會(huì)成為終身客戶。我們能堅(jiān)持多年,是因?yàn)槲覀円恢笨芍档眯刨嚒N覀儚牟缓鲇瞥踉L客戶,我們用心做好本職工作,不忘初心,方得始終。10多年網(wǎng)站建設(shè)經(jīng)驗(yàn)成都創(chuàng)新互聯(lián)公司是成都老牌網(wǎng)站營(yíng)銷服務(wù)商,為您提供網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、H5技術(shù)、網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、微信小程序開(kāi)發(fā)服務(wù),給眾多知名企業(yè)提供過(guò)好品質(zhì)的建站服務(wù)。
在Material Design里,CoordinatorLayout通常用來(lái)作為頂層視圖,來(lái)協(xié)調(diào)處理各個(gè)子View之間的動(dòng)作,從而實(shí)現(xiàn)各種動(dòng)畫效果,如Snackbar與FloatingActionButton的配合顯示效果,就是以CoordinatorLayout作為根布局來(lái)實(shí)現(xiàn)的
CoordinatorLayout提供Behaviors接口,子View通過(guò)實(shí)現(xiàn)Behaviors接口來(lái)協(xié)調(diào)和其它View之間的顯示效果,可以這么理解:
CoordinatorLayout讓其子View之間互相知道彼此的存在,任意一個(gè)子View的狀態(tài)變化會(huì)通過(guò)Behaviors通知其它子View,CoordinatorLayout就像一個(gè)橋梁,連接不同的View,并使用Behavior處理各個(gè)子View之間的通信
在xml布局文件中進(jìn)行設(shè)置
<?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" xmlns:app="http://schemas.android.com/apk/res-auto"> <!--包裹頭部View實(shí)現(xiàn)滑動(dòng)效果--> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat"> <!--標(biāo)題欄--> <android.support.v7.widget.Toolbar android:id="@+id/tb_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:navigationIcon="@android:drawable/ic_dialog_email" app:title="Title" app:layout_scrollFlags="scroll" /> <!--Tab導(dǎo)航欄--> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:layout_scrollFlags="scroll|enterAlways"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/vp_tab_pager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout>
首先給被AppBarLayout包裹的View添加app:layout_scrollFlags屬性,并設(shè)置相應(yīng)的值
? scroll:讓該View可以滾動(dòng)出屏幕
? enterAlways:不需要滾動(dòng)到頂部,只要有向上滾動(dòng)的事件就顯示該View
? enterAlwaysCollapsed:定義該View何時(shí)進(jìn)入,如果你定義了一個(gè)最小高度minHeight,同時(shí)enterAlways也定義了,那么該View將會(huì)在到達(dá)這個(gè)最小高度的時(shí)候開(kāi)始慢慢顯示,直到滾動(dòng)組件滾動(dòng)到頂部時(shí)再完全展開(kāi)
? exitUntilCollapsed:定義該View何時(shí)退出,如果你定義了一個(gè)最小高度minHeight,那么這個(gè)View將在滾動(dòng)到達(dá)這個(gè)最小高度時(shí)消失
如果不設(shè)置layout_scrollFlags屬性,那么該View就會(huì)固定在屏幕上
enterAlwaysCollapsed和exitUntilCollapsed屬性主要是在搭配CollapsingToolbarLayout時(shí)使用的
注意:布局的時(shí)候,AppBarLayout里面滾動(dòng)的View要放在固定的View上面
然后在CoordinatorLayout布局里放一個(gè)可以滾動(dòng)的View(不支持ListView),這里使用ViewPager里放置一個(gè)RecylerView,為該ViewPager設(shè)置app:layout_behavior屬性,這里可直接使用Android自帶的值
app:layout_behavior=”@string/appbar_scrolling_view_behavior”
設(shè)置該值的作用相當(dāng)于告訴CoordinatorLayout,此View是一個(gè)滾動(dòng)控件,如果該View滾動(dòng)了,那么設(shè)置了layout_scrollFlags屬性的控件就可以響應(yīng)滾動(dòng)事件了
想實(shí)現(xiàn)效果一,總結(jié)
使用CoordinatorLayout作為根布局
使用AppBarLayout包裹頭部View,并給需要滾動(dòng)的View設(shè)置app:layout_scrollFlags屬性
給滑動(dòng)組件設(shè)置app:layout_behavior屬性
效果二:
使用到CollapsingToolbarLayout布局,我們?cè)谛Ч坏幕A(chǔ)上更改布局代碼
<?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.AppBarLayout android:layout_width="match_parent" android:layout_height="300dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="88dp" app:expandedTitleMarginStart="66dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <!--拉開(kāi)后顯示的背景圖片--> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/bg_image" app:layout_collapseMode="pin"/> <!--標(biāo)題欄--> <android.support.v7.widget.Toolbar android:id="@+id/tb_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:navigationIcon="@android:drawable/ic_dialog_email" app:title="Title"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/rv_data" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout>
一些屬性的作用
? title:設(shè)置Toolbar的標(biāo)題,注意:如果在CollapsingToolbarLayout中指定了title屬性,那么Toolbar中的title屬性將會(huì)變得無(wú)效
? expandedTitleMarginStart:設(shè)置下拉伸縮完成后,ToolBar標(biāo)題文字左邊的margin距離
? expandedTitleMarginEnd:設(shè)置下拉伸縮完成后,Toolbar標(biāo)題文字右邊的margin距離
? contentScrim:設(shè)置Toolbar折疊到頂部后的背景
? layout_collapseMode:折疊效果,有兩個(gè)值,pin代表從底部拉出,parallax代表從中間展開(kāi)
總結(jié)
首先我們?cè)O(shè)置一個(gè)固定的高度給AppBarLayout
然后給AppBarLayout的子View包裹了一層CollapsingToolbarLayout,并設(shè)置CollapsingToolbarLayout的滾動(dòng)屬性為scroll|exitUntilCollapsed
最后再為CollapsingToolbarLayout里的子View設(shè)置layout_collapseMode屬性,指定其展示效果
上述內(nèi)容就是怎么在Android應(yīng)用中利用CoordinatorLayout實(shí)現(xiàn)一個(gè)標(biāo)題滾動(dòng)效果,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站題目:怎么在Android應(yīng)用中利用CoordinatorLayout實(shí)現(xiàn)一個(gè)標(biāo)題滾動(dòng)效果
當(dāng)前地址:http://chinadenli.net/article22/jpsdjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機(jī)網(wǎng)站建設(shè)、App開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站、定制網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)