<?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=".FruitActivity"
android:fitsSystemWindows="true">
<!--fitsSystemWindows属性因为整个布局和状态栏贴合在一起 所以使用这个属性单独为根布局留出空间-->
<!--解释一下这里AppBarLayout解决了滑动控件遮挡Toolbar问题,而且CollapsingToolbarLayout只能作为AppBarLayout布局使用,而AppBarLayout又必须是CoordinatorLayout的子布局-->
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<!--CollapsingToolbarLayout折叠工具栏布局-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
<!--
theme属性指定一个主题颜色
contentScrim 趋于折叠或折叠后的背景色
layout_scrollFlags布局动作行为
scroll 随着滑动而滑动
exitUntilCollapsed 完成折叠就停留在界面不在移除屏幕
下面的代码大概意思就是当图片向上移动到移动成度就会显示Toolbar
-->
<ImageView
android:id="@+id/bg_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"/>
<!--
scaleType属性
centerCrop大 原图按照比例大小中心进行缩放,直到铺满整个ImageView
center 保持原图大小在ImageView中心显示当图片大小超出范围裁剪
centerInside 如果原图小于ImageView大小,则按原图大小显示在ImageView中心。如果原图大于ImageView大小,则进行等比例缩放,直至可以放在ImageView中。
fitCenter 原图等比例缩放至ImageView的最短一边的大小,居中显示
matrix 不该变原图大小在ImageView左上角显示,超出部分裁剪
fitStart 把原图按比例扩大(缩小)到ImageView的高度,显示在ImageView的上部分位置
fitEnd 把原图按比例扩大(缩小)到ImageView的高度,显示在ImageView的下部分位置
fitXY 把原图按照指定的大小在View中显示,拉伸显示图片,不保持原比例,填满ImageView
layout_collapseMode当前控件在折叠中状态
pin 折叠过程中位置保持不变
parallax 在折叠过程产生错位偏移
-->
<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.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--
总的来说,NestedScrollView是一个简单的控件,作用跟ScrollView基本没差别,关键在于跟ToolBar交互产生的作 用,所以应该注意的是,
app:layout_behavior="@string/appbar_scrolling_view_behavior"
这一句,这句话跟CollapsingToolbarLayout中
app:layout_scrollFlags="scroll|exitUntilCollapsed"
对应,系统一旦发现NestedScrollView中有那句话,就会检查其他控件,然后如果有上面这句对应的话,那么滑动效果就是可以实现的。就这一点来说,他的使用基本上和RecyclerView一样。
-->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!--layout_behavior 布局行为,如果不加AppBarLayout将不会响应事件-->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp"
android:layout_marginTop="35dp">
<TextView
android:id="@+id/tv_content_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"/>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
折叠式标题栏实现
最新推荐文章于 2021-05-07 02:40:00 发布