一、CoordinatorLayouy
CoordinatorLayouy是一個能夠協調子布局的容器布局。常見的使用方法如下:
1.與AppbarLayout共同包裹Toolbar可以實作滾動隐藏Toolbar和重制Toolbar。
2.CoordinatorLayout+CollapsingToolbarLayout配合ImageView實作視差滾動效果
2.在CoordinatorLayout下使用FloatingActionButton動态協調浮動按鈕(随着Snackbar的彈出而上下浮動)
本文将講解如何實作Toolbar随着滾動實作隐藏和ImageView的視差滾動效果。實作的效果類似于知乎日報
開發準備
Gradle引入
compile ‘com.android.support:design:24.0.0’
布局
使用CollapsingToolbarLayout時,必須使用AppbarLayout包裹住CollapsingToolbarLayout和Toolbar;CoordinatorLayout則作為整個布局的容器。
注意:要實作這些通過滾動而産生的效果,主布局中應該放置帶有滾動效果的layout元件,在這裡我放了RecylerView(ListView好像不行)
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/italia"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@id/recycle_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
>
</android.support.v7.widget.RecyclerView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
參數講解
先看CollapsingToolbarLayout下的
app:contentScrim=”?attr/colorPrimary”
作用是當整個視圖收縮時,它Layout下的View的背景色應該變成什麼顔色。最後Toolbar也會變成這種背景色。是以在這裡直接把視圖收縮時的背景色設定成Toolbar的标準色。
app:expandedTitleMarginStart=”48dp”
設定Tittle,當視圖還沒收縮時,Tittle離左邊的距離
app:layout_scrollFlags=”scroll|exitUntilCollapsed”
scrollFlags,通過設定它的值可以實作不同的滾動模式,有四種值
1.scroll ,滾動。所有的Flag都要設定這個值,設定了之後可以向上滾動出螢幕。
2.enterAlways ,設定了這個值的話,該View會在向下滑動的時候立刻顯示出來。
3.exitUntilCollapsed ,向上滑動時,所有元件都會滾出螢幕,但Toolbar除外。
4.enterAlwaysCollapsed ,如果你的View設定了最小高度(minHeight),該View隻會以這個最小高度滾出螢幕
ImageView下
app:layout_collapseMode=”parallax”.
app:layout_collapseParallaxMultiplier=”0.7”
第一行是設定折疊模式,設定為parallax,Pin是不折疊。為了使Toobar不折疊,在下面的Toolbar裡我設定成了pin。
那第二行的layout_collapseParallaxMultiplier=”0.7”又是什麼鬼呢,這個是視差滾動因子。視差滾動因子又是什麼?假如我ImageView把這個值設定成0.7,那麼當這個圖檔有70%被收縮時,你送開手指不點選螢幕,該圖檔會自動收縮。同理,設定成0是碰一下就全部自動收縮,設定成1是怎麼滑它都不會自動收縮,需要你自己滑上去
這個值的範圍是0~1,我們來看看效果
app:layout_collapseParallaxMultiplier設定成0,拉到一半都會自動收縮
app:layout_collapseParallaxMultiplier設定成1,不會自動收縮
其他細節設定
在示範圖裡,Title顔色從未收縮時的藍色變為了白色,可以通過簡單的兩行代碼實作
mCollapsingToolbar.setExpandedTitleColor(Color.BLUE);
mCollapsingToolbar.setCollapsedTitleTextColor(Color.WHITE);
如果隻想實作Toolbar的隐藏和重制的話,隻需要把Image去掉,CollapsingToolbarLayout也可以去掉。在Appbarlayout裡重新設定一下scrollFlag
注意事項
在主布局中,我在LinearLayout裡設定了
app:layout_behavior=”@string/appbar_scrolling_view_behavior”