android的折叠式布局好多app都已经用了,看起来效果确实很赞,最近项目中也使用了,记录使用笔记,备忘.
在android studio的模板里面,Scrolling Activity就实现了这个折叠式布局,可以直接看到效果.今天我们就在它的基础上学习定制自己的折叠效果.
先看下模板里面的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"
这个属性是为了适应状态栏高度.当为true时,会自动给view加一个ppadding,以使view不会挤压到状态栏里面.
需要注意的一点是toolbar没有设置android:fitSystemWindows="true"默认也就是false.如果也置为true,你会发现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上,别忘了加状态栏的高度.(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各个值代表的各种效果,下篇博客再写.
洗洗睡啦,呼呼~~~
