先上效果图:(录屏软件有点问题,直接用图片了)
向上滑动过程展示如图:
接下来 布局:
在xml中解释很清楚了
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.example.administrator.coordinatedemo.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
style="@style/MyAppBarLayout"
>
<!--scroll表示可以滚动,enterAlways表示向下移动时立即显示Toolbar,
contentScrim - 设置当完全CollapsingToolbarLayout折叠后的背景颜色。
有颜色渐进的变化
expandedTitleMarginStart这个是一开始展开时距离左侧的距离
exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。
-->
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/collaps_toolbar_layout"
app:expandedTitleMarginStart="29dp"
app:contentScrim="@color/colorAccent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@mipmap/ic_launcher"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<!--
pin - 此模式,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。
parallax - 设置为这个模式时,在内容滚动时,
CollapsingToolbarLayout中的View(比如我们上面的ImageView)也可以同时滚动,实现视差滚动效果,
通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1
关于视差效果,大家有兴趣可以去了解-->
<!--实现此效果,控件必须是Toolbar,不要设置toobar的位置,
对CollapsingToolbarLayout设置的title会无效-->
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:id="@+id/toolbar"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
MainActivity
package com.example.administrator.coordinatedemo;
import android.graphics.Color;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private CollapsingToolbarLayout colaps;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = ((Toolbar) findViewById(R.id.toolbar));
colaps = (CollapsingToolbarLayout) findViewById(R.id.collaps_toolbar_layout);
setSupportActionBar(toolbar);
//返回图标
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
//一定给CollapsingToolbarLayout设置title不要给toolbar设置title,无效
colaps.setTitle("这个是显示的Title");
//可选
colaps.setExpandedTitleColor(Color.RED);//设置还没收缩时状态下字体颜色
colaps.setCollapsedTitleTextColor(Color.BLUE);//设置收缩后Toolbar上字体的颜色
}
}