用CoordinatorLayout和自定义AppBarLayout.ScrollingViewBehavior实现微博发现页面交互

按公司产品经理需求,前段时间模仿微博“发现”页面写了一个比较有意思的交互,对学习CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout以及自定义Behavior很有帮助,所以就打算写个学习笔记,分享一下,方便其他有相同需求的人进行开发。还可以帮助熟悉design包中控件的用法。
以下是项目源码的地址
https://github.com/HaobinXu/WeiboDiscoverLayout
以下是效果图

Gif_20161228_140019.gif

CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout的用法就不在这里累赘说了,有很多文章都可以搜到。
有一点发现可能与其他作者不相同,就是AppBarLayout下可以放多个CollapsingToolbarLayout。我就是放了两个,一个用于收缩,一个用于粘滞在顶部

  

        
            ...

        

        
                
        

整个Demo最重要的实现代码,都是在DiscoverScrollBehavior的onDependentViewChanged方法中。onDependentViewChanged官方解释是:
This method is called whenever a dependent view changes in size or position outside of the standard layout flow. A Behavior may use this method to appropriately update the child view in response。
也就是说当所依赖的view尺寸或位置改变时,会调用这个方法。我们可以通过这个方法去更新CoordinatorLayout的子View。该方法有三个参数:

public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) 

对应到我的项目,我仅仅需要处理的就是dependency是AppBarLayout、child是ViewPager的情况。因为我需要根据AppBarLayout的高度变化,来改变ViewPager每个Fragment中红色TextView(实际应用中可以改成任意的Layout)的位置。并且,由于每个Fragment中都有TextView,所以我需要一个ArrayList来找到并储存这些View,当AppBarLayout改变时,同时改变所有的View。所以我通过以下代码,先保存找出所有要改变的子View

ViewPager viewPager = (ViewPager) child;
FragmentStatePagerAdapter adapter = (FragmentStatePagerAdapter) viewPager.getAdapter();
    for (int i = 0; i < adapter.getCount(); i++) {
        Fragment fragment = (Fragment) adapter.instantiateItem(viewPager, i);
        ViewGroup viewGroup = (ViewGroup) fragment.getView();
        if (viewGroup != null)
            mChildViews.add(viewGroup.findViewById(R.id.layout_top));
        }

有了子View,需要做的就是根据AppBarLayout高度的改变,计算出子View的位置:

maybeInitProperties(dependency);
// - dependency.getY()是appbar移动的距离(初始在顶部),mParentHeight
// 所以expandedPercentageFactor的值就是appbar移动的距离占总距离的百分比
float expandedPercentageFactor = -dependency.getY() / (mParentHeight-mActionBarSize);
// beginChange是当expandedPercentageFactor大于这个值时,子view需要开始推出
if (expandedPercentageFactor >= beginChange) {
    //因为我是在appbar移动beginChange之后才开始动,所以,totalY = (1 - beginChange) * mParentHeight。appbar移动完这个距离的时候,childView需要全部显示出来,并且有一个tabLayout固定在顶部
    //所以他们的时间是一样的,所以childView要移动的距离是(mChildFinalHeight + mActionBarSize)
    //得出(expandedPercentageFactor - beginChange) * mParentHeight / totalY = (mChildFinalHeight + mActionBarSize) / X
    //即appbar之后实际移动的距离比上它启动动画之后移动的总距离,等于child的高度比上它的移动距离。即得出X = (expandedPercentageFactor - beginChange) * mChildFinalHeight / (1 - beginChange)
    //得出实际的childMargin = mStartMargin + X
    float childMargin = mStartMargin + (expandedPercentageFactor - beginChange) * (mChildFinalHeight) / (1 - beginChange);
    for (View mChildView : mChildViews) {
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mChildView.getLayoutParams();
        lp.topMargin = (int) childMargin;
        mChildView.setLayoutParams(lp);
    }
} else {
    for (View mChildView : mChildViews) {
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mChildView.getLayoutParams();
        lp.topMargin = mStartMargin;
        mChildView.setLayoutParams(lp);
    }
}

if (viewPager == null) {
    viewPager = (ViewPager) child;
}
if (mParentHeight + dependency.getY() <= mActionBarSize) {
    float parentMargin = mActionBarSize - dependency.getY() - mParentHeight;
    CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) viewPager.getLayoutParams();
    lp.topMargin = (int) parentMargin;
    viewPager.setLayoutParams(lp);
} else {
    CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) viewPager.getLayoutParams();
    lp.topMargin = 0;
    viewPager.setLayoutParams(lp);
}

具体如何计算的,在代码中有详细的注释,这边就不累赘了。
如果有不清楚的欢迎提问。
有写得不对以及不好的地方,希望指正,毕竟第一次写~多谢

你可能感兴趣的:(用CoordinatorLayout和自定义AppBarLayout.ScrollingViewBehavior实现微博发现页面交互)