CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar组合悬浮置顶的效果

  最近由于公司业务需求的增加,产品部门给了一个新功能 类似于掌上英雄联盟的效果,但是实际功能比掌上英雄联盟要多,可以看一下掌上英雄联盟的效果。效果图如下:

 CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar组合悬浮置顶的效果_第1张图片CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar组合悬浮置顶的效果_第2张图片

我们产品的功能需求是,当向上滑动的时候名称呈渐变的显示,逐步变色显示,悬停在头顶。下面是多个fragment包含了两个列表(RecylerView)和多个TextView。(我们产品设计的是两个可以切换的页面)。

下面说重点:

由于这个组合控件大部分需要跟NestedScrollView结合使用,造成了RecylerView滚动会出现卡顿的情况,然后一些博客中就提到了使用RecylerView中的一个属性setNestedScrollingEnabled(false)这个属性去解决这个卡顿的问题。确实,本人也尝试过了,可以解决卡顿的问题。但是,问题来了,如果我的下面包含一个可以上拉加载更多的评论列表或者视频列表的功能,而且效果必须是回弹的效果,那这个滑动冲突就出现了。而且,本人在测试NestedScrollView里面包含了RecylerView以后,RecylerView根本不会复用,如果你一直加载更多,就会出现内存泄露的问题。直接进入正题上代码:

 
   


android.support.design.widget.CollapsingToolbarLayout    //这个是里面的内容
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:contentScrim="@color/white"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">
  // 中间的内容  省略....



 CollapsingToolbarLayout 提供以下属性和方法是用: 
1. Collapsing title:ToolBar的标题,当CollapsingToolbarLayout全屏没有折叠时,title显示的是大字体,在折叠的过程中,title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。 
2. Content scrim:ToolBar被折叠到顶部固定时候的背景,你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。 
3. Status bar scrim:状态栏的背景,调用方法setStatusBarScrim(Drawable)。还没研究明白,不过这个只能在Android5.0以上系统有效果。 
4. Parallax scrolling children:CollapsingToolbarLayout滑动时,子视图的视觉差,可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0],值越大视察越大。 
5. CollapseMode :子视图的折叠模式,在子视图设置,有两种“pin”:固定模式,在折叠的时候最后固定在顶端;“parallax”:视差模式,在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

本人在Fragment中的代码:

  

        
    

使用一个带有下拉刷新和上拉加载更多的刷新控件SmoothRefreshLayout 进行刷新和加载更多
https://github.com/dkzwm/SmoothRefreshLayout 这是刷新控件的地址
Fragment中的布局没有嵌套NestedScrollView 如果你们不用进行上拉记载更多的话 可以使用NestedScrollView去嵌套并且设置RecylerView的属性setNestedScrollingEnabled为false就直接可以了。但是进行上拉加载更多并且带有回弹效果的就必须去掉该NestedScrollView 控件。
下面看我给SmoothRefreshLayout 设置的属性:
  mClassicFooter = new ClassicFooter(activity);
        mRefreshLayout.setFooterView(mClassicFooter);
        mRefreshLayout.setDisableLoadMore(false);//是否关闭加载更多
        mRefreshLayout.setEnableOverScroll(false);//越界回弹
        mRefreshLayout.setDisableRefresh(true);//关闭刷新
        mRefreshLayout.setResistanceOfFooter(3f);//设置上拉加载更多的阻尼
        mRefreshLayout.setDisablePerformRefresh(false);
        mRefreshLayout.setEnabledInterceptEventWhileLoading(true);//开启刷新中拦截事件的消耗
        mRefreshLayout.setOnRefreshListener(new SmoothRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefreshBegin(boolean isRefresh) {
                if (isRefresh) {
                    currentPage = 1;
                    loadFindPageData(currentPage);
                } else {
                    currentPage = currentPage + 1;
                    if (maxPage >= currentPage) {
                        loadFindPageData(currentPage);
                    } else {
                        mRefreshLayout.setEnableLoadMoreNoMoreData(true);
                    }
                }
                mRefreshLayout.refreshComplete();
            }

            @Override
            public void onRefreshComplete(boolean isSuccessful) {

            }
        });
    }


    @Override
    public void loadPageSuccess(BigVListResponse s) {
        maxPage = s.getMaxPage();
        currentPage = Integer.parseInt(s.getCurrPage());
        if (mClassicFooter != null) {
            mClassicFooter.setLastUpdateTime();
        }
        final List list = s.getData();
        if (list != null && list.size() > 0) {
            offSet += VideoInfoList.removeDumplicate(index, list);
        }
        initVideoData();}

基于这种方式就在CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout这种悬浮状态中实现上拉加载更多,更加不会出现RecylerView控件不复用造成内存导致程序奔溃的问题。


最后请看完整的效果:

CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar组合悬浮置顶的效果_第3张图片CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar组合悬浮置顶的效果_第4张图片CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar组合悬浮置顶的效果_第5张图片CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar组合悬浮置顶的效果_第6张图片CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar组合悬浮置顶的效果_第7张图片


最后附上我的完整代码




本人第一次发布博客 可能有一些地方写的不够好 希望大家能够谅解 有什么错误的地方请提出来






 
   
  
 
  
 
  


你可能感兴趣的:(Android开发)