CoordinatorLayout
主要的两个用途
As a top-level application decor or chrome layout
As a container for a specific interaction with one or more child views
AppBarLayout
是一个垂直的LinearLayout,用来代替ActionBar,他的子View通过设置setScrollFlags(int)
来确定他们自己的滚动方式,但是这个属性的使用要让AppBarLayout 的上级视图为CoordinatorLayout ,如果上级视图为其他ViewGroup 那么AppBarLayout 的大部分属性将无效。
ScrollFlags in XML
-
scroll
只有设置这个标志,这个视图才会滚动出屏幕隐藏起来,下面的属性才有意义
-
enterAlways
在向下划动的时候不管这个视图有没有跟着滚动,这个视图都会执行向下滑动事件,被称为
快速返回模式
-
enterAlwaysCollapsed
和上面不同的是,只有下划到顶部的时候,这个视图才会显示出来
-
exitUntilCollapsed
如果设置了minHeight 那这个视图在滚动到这个大小的高度的时候将会折叠起来
-
snap
在滚动结束时,这个视图的可见部分的高度占原来的的25% 时将会自动折叠起来,相反,如果可见部分高度占原来高度的75% 时将会自动完全展开
CollapsingToolbarLayout
CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承自FrameLayout,给它设置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色,通过app:statusBarScrim设置折叠时状态栏的颜色。默认contentScrim是colorPrimary的色值,statusBarScrim是colorPrimaryDark的色值。
XML layout_collapseMode 属性
-
off
默认属性,视图将不会进行折叠行为
-
pin
CollapsingToolbarLayout 折叠后,这个视图将会固定到顶部
-
parallax
视图将会有折叠的动画效果。同时设置
layout_collapseParallaxMultiplier
取值“0~1” 之间 数字越大需要折叠的部分越像是固定住的一样像是下面的部分是慢慢往上面盖住一样; 数字越小,就像是被折叠的部分和下面是连在一起的被推上去的一样
示例布局文件
//设置这个不然就会被上面的折叠布局覆盖上一部分
通过AppBarLayout.OnOffsetChangedListener 来监听CollapsingToolbarLayout 的折叠状态
自定义OnOffsetChangedListener 接口
//AppBar 在垂直方向上发生偏移量改变时,会回调这个接口
public abstract class AppBarLayoutListener implements AppBarLayout.OnOffsetChangedListener {
public enum State {
/**
* 完全展开的
*/
EXPANDED,
/**
* 全部折叠起来的
*/
COLLAPSED,
/**
* 可以看见部分的
*/
IDLE
}
private State mCurrentState = State.IDLE;
/**
*
* @param appBarLayout
* @param verticalOffset 传回来的是相对于完全展开时Y轴的像素值 为负数 说人话就是上划了多少(-verticalOffset)像素
*/
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (verticalOffset == 0) {
if (mCurrentState != State.EXPANDED) {
mCurrentState = State.EXPANDED;
onStateChange(mCurrentState);
}
Log.e("yxs0412", "onOffsetChanged: " + verticalOffset + "--" + mCurrentState.name());
} else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
if (mCurrentState != State.COLLAPSED) {
mCurrentState = State.COLLAPSED;
onStateChange(mCurrentState);
}
Log.e("yxs0412", "onOffsetChanged: " + verticalOffset + "--" + mCurrentState.name());
} else {
if (mCurrentState != State.IDLE) {
mCurrentState = State.IDLE;
onStateChange(mCurrentState);
}
Log.e("yxs0412", "onOffsetChanged: " + verticalOffset + "--" + mCurrentState.name());
}
}
protected abstract void onStateChange(State mCurrentState);
}
使用的时候
AppBarLayout.addOnOffsetChangedListener(new AppBarLayoutListener() {
@Override
protected void onStateChange(State mCurrentState) {
if (mCurrentState == State.EXPANDED) {
startPicChangeTimer();
} else if (mCurrentState == State.COLLAPSED) {
cancelPicChangeTimer();
} else if (mCurrentState == State.IDLE) {
startPicChangeTimer();
}
}
});
PS
Toolbar设置标题文字
在代码中设置文字标题和图标
Toolbar.setTitle("First Page");
Toolbar.setNavigationIcon(R.drawable.logo);