Android Material Design Android官方控件学习目录
CollapsingToolbarLayout
- 折叠工具栏布局
- extends FrameLayout ,作为AppBarLayout的子布局,ToolbarLayout的父布局存在,用于包装Toolbar
- 所以通过app:layout_scrollFlags 五种组合模式 CollapsingToolbarLayout实现嵌套滚动
- 官方为我们实现了折叠Toolbar的效果,不用自己自定义或者使用第三方开源库来实现.
CollapsingToolbarActivity简单展示CollapsingToolbarLayout的折叠效果
- 设置app:layout_scrollFlags= "scroll|exitUntilCollapsed "实现折叠效果
- 需要一个最大值height和一个minHeight
- CollapsingToolbarLayout嵌套一个Toolbar和一个背景ImageView
- 当NestedScrollView向上滚动时,CollapsingToolbarLayout最先向上滚动,一般会折叠到Toolbar高度:Toolbar height 必须为固定值
- 当NestedScrollView向下滚动时,CollapsingToolbarLayout最后向下滚动,扩大到最大height,一般为背景ImageView的高度
布局如下
<?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"
tools:context="com.wega.materialdesignwidget.CollapsingToolbarLayoutActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/ll_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/CollapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_weight="1"
app:collapsedTitleTextAppearance="@style/collapsedTitleTextAppearance"
app:contentScrim="#6F51B5"
app:expandedTitleTextAppearance="@style/expandedTitleTextAppearance"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#603F9F"
app:title="CollapsingToolbarLayout1"
app:titleEnabled="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/timg"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="@drawable/ic_action_back"
app:subtitle="CollapsingToolbarLayout3"
app:theme="@style/ThemeOverlay.AppCompat.Dark"
app:title="CollapsingToolbarLayout2">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3558B3"
android:minHeight="40dp"
app:tabIndicatorColor="#cdcdcd"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="#fff"
app:tabTextAppearance="@style/TextAppearance.AppCompat.Small"
app:tabTextColor="#cdcdcd">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_action_tab"
android:tag="tag第三项"
android:text="第一项" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_action_tab"
android:tag="tag第三项"
android:text="第二项" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:icon="@drawable/ic_action_tab"
android:tag="tag第三项"
android:text="第三项" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#cdcdcd"
android:lineSpacingExtra="12dp"
android:padding="12dp"
android:text="@string/collapsingtoolbarlayout" />
<TextView
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#ababab" />
<TextView
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#cdcdcd" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout的四个要素
collapsedTitle(可折叠标题)
- 在CollapsingToolbarLayout最上层存在一个跟随折叠的可变字体title的’titleView’,通过mCollapsingTextHelper进行绘制
- 并且作为子view的Toolbar的title和subTitle不会显示(Toolbar会被CollapsingToolbarLayout找到并设置)
app:title="CollapsingToolbarLayout"
折叠状态属性设置
app:collapsedTitleGravity
app:collapsedTitleTextAppearance
展开状态属性设置
app:expandedTitleGravity
app:expandedTitleMargin
app:expandedTitleMarginTop
app:expandedTitleMarginBottom
app:expandedTitleMarginLeft
app:expandedTitleMarginRight
是否使用CollapsingToolbarLayout的title,
false 将展示Toolbar的title
app:titleEnabled
app:statusBarScrim
- 状态栏纱布
- 根据滚动位置到达一个阀值,改变StatusBar颜色,只能在5.0 API21 LOLLIPOP以上有作用。
- 折叠时状态栏的颜色
app:statusBarScrim
or
setStatusBarScrim(Drawable)
- This scrim is only shown when we have been given a top system inset
- CollapsingToolbarLayout需要嵌入到StatusBar,才起作用 这个涉及到使用透明化状态栏
style.xml
<item name="android:windowTranslucentStatus">true</item>
or
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
- 问题1:AppBarLayout设置android:fitsSystemWindows有效, CollapsingToolbarLayout和Toolbar无效
- 问题2:展开时StatusBar位置(CollapsingToolbarLayout的paddingTop)颜色可通过CollapsingToolbarLayout或者AppBarLayout的background设置。默认为colorPrimary
- 问题3:展开时StatusBar位置需要背景图嵌入,以后再说吧
app:contentScrim
- 内容纱布
- 折叠时CollapsingToolbarLayout的颜色
app:contentScrim
or
setContentScrim(Drawable)
- toolbar不设置背景颜色,不然会覆盖,通常也需要toolbar为透明
app:layout_collapseMode
- collapsingToolbarLayout子布局设置
app:layout_collapseMode:parallax
app:layout_collapseMode:parallax 视差滚动
app:layout_collapseParallaxMultiplier 视差因子 默认0.5
app:layout_collapseParallaxMultiplier
- 可取0-1
- 子View相对collapsingToolbarLayout向下运动速度,
- 当0时,没有相对速度,即相对于collapsingToolbarLayout静止,
- 当1时,与collapsingToolbarLayout向上速度相等,即相对于phoneView静止
- imageview一般设置为parallax
app:layout_collapseMode:pin
- 钉子 固定在屏幕上, 即相对于phoneView静止
- toolbar一般设置为pin
ps
CollapsingToolbarLayout通过实现AppBarLayout的OnOffsetChangedListener接口,根据AppBarLayout的偏移来实现子布局和title的视差移动以及ContentScrim和StatusBarScrim的显示