android的折疊式布局好多app都已經(jīng)用了,看起來效果確實很贊,最近項目中也使用了,記錄使用筆記,備忘.
在android studio的模板里面,Scrolling Activity就實現(xiàn)了這個折疊式布局,可以直接看到效果.今天我們就在它的基礎上學習定制自己的折疊效果.
先看下模板里面的xml
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.happycodingirl.collapsingtoolbarlayoutdemo.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
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:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>
1.其中注意一點:
android:fitsSystemWindows="true"
這個屬性是為了適應狀態(tài)欄高度.當為true時,會自動給view加一個ppadding,以使view不會擠壓到狀態(tài)欄里面.
需要注意的一點是toolbar沒有設置android:fitSystemWindows="true"默認也就是false.如果也置為true,你會發(fā)現(xiàn)toolbar上方又多出來了一個padding.沒有居中了.
2.可通過在CollapsingToolbarLayout標簽下添加
app:titleEnabled="false"
使toolbar的title固定,而不隨整個布局的拉伸位置下移.
或者在代碼中設置
collapsingToolbarLayout.setTitleEnabled(false);
3.在我們的應用中需要添加在toolbar下面添加一條線,以使toolbar界限明顯.
最后在根CoordinatorLayout布局下添加View,如下
<View
android:layout_marginTop="65dp"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="2dp"
app:layout_anchor="@id/toolbar"
app:layout_anchorGravity="bottom"
android:background="@android:color/holo_green_dark"
/>
其中marginTop值需要設置為toolbar的高度+statusBar的高度.此處要注意不要忘了寫marginTop,否則該View會壓在toolbar上,別忘了加狀態(tài)欄的高度.(StormZhang在其toolabr適配方案里面也是直接寫死statusBar高度為25dp).其實我還是對寫死的東西有點沒有安全感,一直在疑惑所有手機的statusBar都是25dp嗎,臨時在我手機上顯示都正常.若有知道statusBar高度是否在所有手機上都一樣高的問題的,望賜教.
app:layout_anchor="@id/toolbar"
設置該view以哪個View作為錨點.
app:layout_anchorGravity="bottom"
處于錨點View的下方.
4.collapsingToolbarLayout 標簽下的
app:contentScrim="?attr/colorPrimary"
限定的是toolbar折疊在頂部時的背景色.
5.不要忘記了collapsingToolbarLayout本質上依然是一個FrameLayout,Toolbar必須寫在最后面,否則折疊后被后面添加的布局遮擋了.
我的測試代碼如下:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.happycodingirl.collapsingtoolbarlayoutdemo.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:titleEnabled="false"
app:contentScrim="@android:color/holo_orange_dark"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_marginTop="40dp"
android:src="@drawable/sea"
android:scaleType="fitXY"
android:layout_gravity="bottom"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="150dp" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:fitsSystemWindows="false"
app:navigationIcon="@android:drawable/ic_btn_speak_now"
android:layout_width="match_parent"
android:layout_height="40dp"
app:layout_collapseMode="pin"
android:gravity="center"
android:layout_gravity="top"
android:minHeight="40dp"
android:background="@android:color/holo_orange_dark"
app:popupTheme="@style/AppTheme.PopupOverlay" >
<LinearLayout
android:orientation="horizontal"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="toolbar title"
android:gravity="center"
android:textSize="25dp"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:gravity="center"
android:layout_gravity="right|center"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:src="@android:drawable/ic_search_category_default"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<View
android:layout_marginTop="65dp"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="2dp"
app:layout_anchor="@id/toolbar"
app:layout_anchorGravity="bottom"
android:background="@android:color/holo_green_dark"
/>
<include layout="@layout/content_scrolling" />
</android.support.design.widget.CoordinatorLayout>
展開效果:
展開效果
折疊效果:
toolbar顯示正常
在上述xml里面如果將ImageView放到toolbar后面,屬性不變,折疊后的效果如下:
toobar被遮擋
其實toolbar還是在折疊的位置上,只是被上面的imageView遮擋住了.
AppBarLayout 本質上是個LinearLayout,所以可以在CollapsingToolbarLayout和結束標簽后面和AppBarLayout結束標簽前面添加一個TabLayout,toolbar折疊后TabLayout緊貼在toolbar下面吸附的效果.
還有一個非常重要的知識點app:layoutFlags各個值代表的各種效果,下篇博客再寫.
洗洗睡啦,呼呼~~~
