在上一讲中我们讲了NestedScrolling机制,其实android很多有些常用的控件都是支持NestedScrolling机制的,如RecyclerView,NestedScrollView等,
代码语言:javascript复制public class RecyclerView extends ViewGroup implements ScrollingView, NestedScrollingChild2{}
public class NestedScrollView extends FrameLayout implements NestedScrollingParent2,NestedScrollingChild2, ScrollingView{}
这些控件内部用的就是我们上一讲的东西,通过上一讲的内容其实我们已经可以实现很复杂的ui效果了,那个这一讲讲什么呢,就是CoordinatorLayout,CoordinatorLayout.Behavior这个相当于NestedScrolling机制的运用和封装。
简单来说CoordinatorLayout像一个容易,包含所有子View,协调其子View之间的动作的一个父View,而Behavior是用来给CoordinatorLayout里的子View实现交互的。
单单说概念可能大家都理解不深,接下来就讲我写的类似美团外卖骨架的demo吧。 看效果图先吧:
waimaidetails.gif
这种效果假如不用CoordinatorLayout其实还是有点难麻烦的,不过有了CoordinatorLayout就简单了,首先我们看一下布局文件:
代码语言:javascript复制<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.jack.meituangoodsdetails.view.GoodDetailsView
android:id="@ id/goods_details_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.jack.meituangoodsdetails.view.GoodDetailsView>
<com.jack.meituangoodsdetails.view.GoodsListView
android:id="@ id/goods_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/goods_list_behavior">
</com.jack.meituangoodsdetails.view.GoodsListView>
<com.jack.meituangoodsdetails.view.GoodsTitleView
android:id="@ id/goods_title_view"
android:layout_width="match_parent"
android:layout_height="50dp">
</com.jack.meituangoodsdetails.view.GoodsTitleView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
从上面的布局文件可以看出,CoordinatorLayout包含着3个自定义的Viewr然后就没了,其中GoodDetailsView是图片和下面商品详情的View,GoodsTitleView如其名字那样是界面的头部的View, GoodsListView就是给我们滑动的View了。在这布局里,我们看到一个比较特殊的东西app:layout_behavior="@string/goods_list_behavior",这是什么呢?
其实这是CoordinatorLayout父View绑定一个叫goods_list_behavior的子View,有个这个就完成了父View和子View的关联,那么goods_list_behavior又指向那个类呢?看字符串资源文件
代码语言:javascript复制<string name="goods_list_behavior">com.jack.meituangoodsdetails.hehavior.GoodsListBehavior</string>
可以是指向一个叫GoodsListBehavior的类,这也是这个UI交互的核心,所有的UI交互都在这个类完成,代码如下:
代码语言:javascript复制public class GoodsListBehavior extends CoordinatorLayout.Behavior<GoodsListView> {
private CoordinatorLayout parentView;
private GoodDetailsView detailsView;
private GoodsTitleView titleView;
private GoodsListView goodView;
private Context context;
private Scroller scroller;
private int duration=1000;
private Handler handler;
private int pagingTouchSlop;
private int verticalPagingTouch;
//商品界面的中心
int centerGoodView;
//商品界面离顶部的间隔
int goodViewTop;
public GoodsListBehavior(Context context, AttributeSet attrs){
super(context,attrs);
this.context=context;
this.pagingTouchSlop=DensityUtils.dp2px(context,5);
this.scroller=new Scroller(context);
this.handler=new Handler();
}
@Override
public boolean layoutDependsOn(@NonNull CoordinatorLayout parent, @NonNull GoodsListView child, @NonNull View dependency) {
this.goodView=child;
this.parentView=parent;
if(dependency instanceof GoodsTitleView){
titleView=(GoodsTitleView) dependency;
return true;
}
if(dependency instanceof GoodDetailsView){
detailsView=(GoodDetailsView) dependency;
detailsView.expandBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
startScroll((int)goodView.getTranslationY(),goodViewTop-parentView.getHeight());
}
});
return true;
}
return false;
}
@Override
public boolean onLayoutChild(@NonNull CoordinatorLayout parent, @NonNull GoodsListView child, int layoutDirection) {
CoordinatorLayout.LayoutParams layoutParams=(CoordinatorLayout.LayoutParams)child.getLayoutParams();
if(layoutParams.height==CoordinatorLayout.LayoutParams.MATCH_PARENT){
layoutParams.height=parent.getHeight()-titleView.getHeight();
child.setLayoutParams(layoutParams);
goodViewTop=titleView.getHeight() DensityUtils.dp2px(context,160);
child.setTranslationY(goodViewTop);
return true;
}
return super.onLayoutChild(parent, child, layoutDirection);
}
@Override
public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout,
@NonNull GoodsListView child,
@NonNull View directTargetChild,
@NonNull View target, int axes, int type) {
handler.removeCallbacks(flingRunnable);
return (axes & ViewCompat.SCROLL_AXIS_VERTICAL)!=0;
}
@Override
public void onNestedPreScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull GoodsListView child,
@NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
//防止左右误滑
verticalPagingTouch =dy;
if(goodView.viewPager.isScrollable()&&Math.abs(verticalPagingTouch)>pagingTouchSlop){
goodView.viewPager.setScrollable(false);
}
if(dy>0){
//向上滑
if(child.getTranslationY()<=titleView.getHeight()){
child.setTranslationY(titleView.getHeight());
}else{
child.setTranslationY(child.getTranslationY()-dy);
consumed[1]=dy;
}
}else{
//向下滑
if(((GoodsListFragment) child.getFragment().get(child.viewPager.getCurrentItem())).isScrollAble()){
child.setTranslationY(child.getTranslationY()-dy);
}
}
if(child.getTranslationY()>=goodViewTop){
detailsView.updateView(dy);
titleView.checkView();
} else{
titleView.updateView(dy);
}
}
@Override
public void onStopNestedScroll(@NonNull CoordinatorLayout parent,
@NonNull GoodsListView child,
@NonNull View target, int type) {
verticalPagingTouch = 0;
goodView.viewPager.setScrollable(true);
centerGoodView=(parent.getHeight() goodViewTop)/2;
if(child.getTranslationY()>goodViewTop&&child.getTranslationY()<centerGoodView){
//恢复
startScroll((int)child.getTranslationY(),(int)(goodViewTop-child.getTranslationY()));
}else if(child.getTranslationY()>centerGoodView){
//隐藏
startScroll((int)child.getTranslationY(),(int)(parent.getHeight()-child.getTranslationY()));
}
}
@Override
public boolean onNestedFling(@NonNull CoordinatorLayout coordinatorLayout, @NonNull GoodsListView child, @NonNull View target, float velocityX, float velocityY, boolean consumed) {
if(velocityY<0){
//向下
startScroll((int)child.getTranslationY(),(int)(coordinatorLayout.getHeight()-child.getTranslationY()));
}else{
//向上
if(goodView.getTranslationY()<goodViewTop){
startScroll((int)child.getTranslationY(),(int)(titleView.getHeight()-child.getTranslationY()));
}else{
startScroll((int)child.getTranslationY(),(int)(goodViewTop-child.getTranslationY()));
}
}
return true;
}
public void startScroll(int startY,int dy){
scroller.startScroll(0,startY,0,dy,duration);
this.handler.post(flingRunnable);
}
Runnable flingRunnable=new Runnable() {
@Override
public void run() {
if(scroller.computeScrollOffset()){
goodView.setTranslationY(scroller.getCurrY());
if(goodView.getTranslationY()>=goodViewTop){
detailsView.updateView(scroller.getStartY()-scroller.getFinalY());
}else{
titleView.updateView(scroller.getStartY()-scroller.getFinalY());
}
handler.post(flingRunnable);
}
}
};
}
看上去代码还是有点多,首先要形成与父View的关联GoodsListBehavior必须继承GoodsListBehavior,这样子View一滑动才可以回调相应的NestedScrolling机制的一些方法,在这里我们看几个方法:
代码语言:javascript复制/**
* 开始滑动的时候调用一次,手松开的时候调用一次
* 返回true代表获取滑动事件,其他的scroll事件就会被触发
* coordinatorLayout
* child 使用此Behavior的View
* directTargetChild 是target或是target的parent
* target 处理滑动事件的view
* axes 垂直滚动2 横向滚动1
* type 滑动类型touch 0手指按下 1手指松开
*/
public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout,
@NonNull GoodsListView child,
@NonNull View directTargetChild,
@NonNull View target, int axes, int type);
/**
* 页面滑动的时候调用
* coordinatorLayout 同上
* child 同上
* target 同上
* dxConsumed 水平滑动的实时距离
* dyConsumed 竖直滑动的实时距离
* dxUnconsumed view处于滚动状态,但是并不是由target消耗的滚动时候触发,这个是水平滚动的实时距离
* dyUnconsumed view处于滚动状态,但是并不是由target消耗的滚动时候触发,这个是竖直滚动的实时距离
* type 同上
*/
public void onNestedPreScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull GoodsListView child,@NonNull View target, int dx, int dy, @NonNull int[] consumed, int type);
//手指松开时,调用一次,滑动停止时调用一次
public void onStopNestedScroll(@NonNull CoordinatorLayout parent,
@NonNull GoodsListView child,
@NonNull View target, int type);
/**
* 滑动时手指松开如果还继续滑动的时候调用一次
* coordinatorLayout 同上
* child 同上
* target 同上
* velocityX 水平加速度
* velocityY 竖直加速度
* consumed 同上 false不拦截 true则不会有惯性滑动,需要自己处理
*/
public boolean onNestedFling(@NonNull CoordinatorLayout coordinatorLayout, @NonNull GoodsListView child, @NonNull View target, float velocityX, float velocityY, boolean consumed);
是不是和我们上一讲中的NestedScrollingParent回调方法很像,其实说白了CoordinatorLayout内部还是用NestedScrolling机制实现的。因为这个方法比较常用,所以我就讲这几个方法,m没出现的暂时不讲。除了上面几个,还有如下:
代码语言:javascript复制/**
* 指定依赖的View,在这里指定依赖的View之后,
* @param parent
* @param child 使用该Behavior的View
* @param dependency 依赖的View
* @return 当指定的View是我们需要的View时,返回true
*/
boolean layoutDependsOn(@NonNull CoordinatorLayout parent, @NonNull GoodsListView child, @NonNull View dependency);
确定使用Behavior的View要依赖的View的类型,在这里,我做的最多的是初始化各个View,如GoodDetailsView,GoodsTitleView,GoodsListView,CoordinatorLayout分别对应detailsView,titleView,goodView,parentView。
代码语言:javascript复制/**
* CoordinatorLayout绘制child的时候调用
* parent 同上
* child 同上
* CoordinatorLayout布局解析的方法 0=ltr 1=rtl,因为有些国家是从左向右显示的
**/
boolean onLayoutChild(@NonNull CoordinatorLayout parent, @NonNull GoodsListView child, int layoutDirection); 确定使用Behavior的View位置,这一步确定各个子View的初始位置,具体无非通过计算得到各个View的位置再移动,代码很简单已给。
onStartNestedScroll():当(axes & ViewCompat.SCROLL_AXIS_VERTICAL)!=0既表示竖直滑动嵌套滑动就开始了,最主要的作用就是确定滑动的方向。
onNestedPreScroll():当我们滑动时候就会不断的调用这个方法,这也是我们实现各种效果的关键,我在这里做的最主要的就是各种滑动动画效果的实现,而效果无非就是放大,缩小,透明度,View的移动等。
onStopNestedScroll():看名字就知道了,当停止滑动时调用的方法,主要是执行当滑到一般停止时要怎么恢复还是隐藏商品列表的判断
onNestedFling(): 当手指快速一划时所触发的方法,在代码中结合着Scroller,onNestedFling赋一个结束值给Scroller,Scroller会不断产生中间值直到结束为止。而我们拿到这些中间中间值进行动画处理。
这个就是各个方法的功能和职责,也是整个整个功能的骨架,共同支撑了整个交互的执行,而具体的细节请看源码。
https://github.com/jack921/MeiTuanGoodsDetails