技术控

    今日:30| 主题:57959
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] RecyclerView 加载更多与 CoordinatorLayout

[复制链接]
素颜马尾好菇凉 投递于 2016-10-18 14:05:00
393 6
RecyclerView 加载更多与 CoordinatorLayout 的简单实现
  在2015年Google的年度大会上,已经升级了新的Support Library,视觉效果及用户体验毋庸置疑,所以今天主要简单主要介绍Material Design中最主要的二个控件,RecyclerView的上拉加载更多和CoordinatorLayout的结合使用,废话不多说,先上图:
   

RecyclerView 加载更多与 CoordinatorLayout

RecyclerView 加载更多与 CoordinatorLayout-1-技术控-specific,supplied,Google,another,whether

  CoordinatorLayout

  CoordinatorLayout 从字面上理解,它是一个协调view,主要处理子view之间的相互依赖关系,增加交互体验,通过layoutDependsOn()来判断子view(child)是否依赖dependency,通过onDependentViewChanged()来判断子view(child)在所依赖view发生改变后的是否要做处理,好,我们看一下源码:
  1. /**
  2. * Determine whether the supplied child view has another specific sibling view as a
  3. * layout dependency.
  4. * /
  5. public boolean layoutDependsOn(CoordinatorLayout parent, V child, View dependency) {
  6.             return false;
  7.         }
  8. /**
  9. * Respond to a change in a child's dependent view
  10. */
  11. public boolean onDependentViewChanged(CoordinatorLayout parent, V child, View dependency) {
  12.             return false;
  13.         }
复制代码
如果有自定义功能我们可以extends CoordinatorLayout.Behavior,今天我们介绍简单使用,后续会对CoordinatorLayout.Behavior做详细探讨:
  
       
  • 首先要在Gradle中加入Library  
  1. compile 'com.android.support:design:24.2.1'
复制代码
       
  • 在布局文件中加入CoordinatorLayout,如果是新建项目的话选择Navigation Drawer Actiivty模版会包含,这里加入了开源库NavigationTabStrip对 demo 中的viewpage做绑定   
  • 需要注意的是,如果要实现图片中的Toolbar隐藏效果必须加入,Toolbar其实就是我们的上面提到的子view  
  1. app:layout_scrollFlags="scroll|enterAlways"
复制代码
       
  • 加入所依赖的behavior可以用ViewPager  
  1. <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"
  3.     android:id="@+id/vp"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     app:layout_behavior="@string/appbar_scrolling_view_behavior"
  7.     >
  8. </android.support.v4.view.ViewPager>
复制代码
       
  • 同样必须加入  
  1. app:layout_behavior="@string/appbar_scrolling_view_behavior"
复制代码
       
  • ok,至于下拉加载更多用SwipeRefreshLayout  
  1. <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:id="@+id/swiprefreshlayout"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.     <com.recyclerviewmore.widget.RecyclerViewUpRefresh
  6.         android:id="@+id/recyclerview"
  7.         android:layout_width="match_parent"
  8.         android:layout_height="match_parent"></com.recyclerviewmore.widget.RecyclerViewUpRefresh>
  9. </android.support.v4.widget.SwipeRefreshLayout>
复制代码
RecyclerView

  以上简单实现了CoordinatorLayout的效果下面再介绍RecyclerView的上拉加载更多,与CoordinatorLayout配合使用,其实相对与大家比较熟悉的listview来说RecyclerView更灵活,是完美的替代品,所有效果都可以自定义 布局管理(LayoutManager)下面是最简单的用法,要特殊需求需要自定义LayoutManager
  
       
  • 布局管理(LayoutManager)下面是最简单的用法,要特殊需求需要自定义LayoutManager  
  1. mRecyclerView.setLayoutManager(newLinearLayoutManager(getActivity()));
  2. mRecyclerView.setLayoutManager(new GridLayoutManager(getActivity(), 3));
复制代码
       
  • 设置分割线(ItemDecoration) 要extends RecyclerView.ItemDecoration   
  • ItemAnimator 动画效果 (同样RecyclerView 实现 RecyclerView.Adapter可以实现丰富的ui效果,上拉加载更多就是利用Adapter中的viewtype来实现)
       
  • 重写RecyclerView的onScrollStateChanged
    1. @Override
    2.     public void onScrollStateChanged(int state) {
    3.         super.onScrollStateChanged(state);
    4.         if (state == RecyclerView.SCROLL_STATE_IDLE && loadMoreListener != null && !isLoadingData && canloadMore) {
    5.             LayoutManager layoutManager = getLayoutManager();
    6.             int lastVisibleItemPosition;
    7.             if (layoutManager instanceof GridLayoutManager) {
    8.                 lastVisibleItemPosition = ((GridLayoutManager) layoutManager).findLastVisibleItemPosition();
    9.             } else if (layoutManager instanceof StaggeredGridLayoutManager) {
    10.                 int[] into = new int[((StaggeredGridLayoutManager) layoutManager).getSpanCount()];
    11.                 ((StaggeredGridLayoutManager) layoutManager).findLastVisibleItemPositions(into);
    12.                 lastVisibleItemPosition = last(into);
    13.             } else {
    14.                 lastVisibleItemPosition = ((LinearLayoutManager) layoutManager).findLastVisibleItemPosition();
    15.             }
    16.             if (layoutManager.getChildCount() > 0
    17.                     && lastVisibleItemPosition >= layoutManager.getItemCount() - 1) {
    18.                 if (loadingMoreFooter != null) {
    19.                     loadingMoreFooter.setVisible();
    20.                 }
    21.                 isLoadingData = true;
    22.                 loadMoreListener.onLoadMore();
    23.             }
    24.         }
    25.     }
    复制代码
      
  • 根据viewType来显示FooterView
    1. @Override
    2.   public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    3.     if (viewType == FOOTER) {
    4.       return new SimpleViewHolder(loadingMoreFooter);
    5.     }
    6.     return adapter.onCreateViewHolder(parent, viewType);
    7.   }
    复制代码
      
  • 绑定数据
    1. @Override
    2. public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    3.   holder.itemView.setOnClickListener(this);
    4.   holder.itemView.setOnLongClickListener(this);
    5.   if (adapter != null) {
    6.     int count = adapter.getItemCount();
    7.     if (position < count) {
    8.       adapter.onBindViewHolder(holder, position);
    9.       return;
    10.     }
    11.   }
    12. }
    复制代码

   另外事件处理需要自定义 初来乍到,有写的不合理之处请多指正,具体简单实现见 demo



上一篇:React.Js: Achieving 20ms server response time with Server Side Rendering
下一篇:BG-UI:一个后台UI框架
zjs007 投递于 2016-10-18 14:46:54
确实不错,顶先
回复 支持 反对

使用道具 举报

happyTIME_2 投递于 2016-10-18 21:04:52
你觉得该怎么做呢?
回复 支持 反对

使用道具 举报

贺艳琳 投递于 2016-10-19 03:51:20
看完帖子,洗洗睡了!
回复 支持 反对

使用道具 举报

ZM1220 投递于 2016-10-28 09:25:09
到2016-10-28 走过了年少,脚起了水泡  
回复 支持 反对

使用道具 举报

可乐天曲 投递于 2016-11-20 07:52:44
横溢的不只是才华,还有虫坛里的帖子
回复 支持 反对

使用道具 举报

以亦 投递于 2016-11-21 12:30:40
你会变成大海,然后被鲨鱼吃掉!
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表