扣丁学堂Android培训之实现RecyclerView可点击顶部悬浮条效果

2018-03-28 10:46:37 987浏览

今天给大家介绍项目之前需要开发一个悬浮置顶的效果，下面我们一起来看一下具体的扣丁学堂Android培训之实现RecyclerView可点击顶部悬浮条效果吧。

下面附上关键代码

　　//随意添加的一些数据，其中用top字段判断是否存在悬浮条，用日期分类，每个日期的第一条top为true
　　datas=newArrayList<>();
　　datas.add(newWalletBean("20180101",100,false));
　　datas.add(newWalletBean("20180101",100,false));
　　datas.add(newWalletBean("20180101",100,false));
　　datas.add(newWalletBean("20180102",100,false));
　　datas.add(newWalletBean("20180102",100,false));
　　datas.add(newWalletBean("20180102",100,false));
　　datas.add(newWalletBean("20180102",100,false));
　　datas.add(newWalletBean("20180103",100,false));
　　datas.add(newWalletBean("20180103",100,false));
　　datas.add(newWalletBean("20180103",100,false));
　　datas.add(newWalletBean("20180103",100,false));
　　datas.add(newWalletBean("20180104",100,false));
　　datas.add(newWalletBean("20180105",100,false));
　　linearLayoutManager=newLinearLayoutManager(getActivity());
　　rcList.setLayoutManager(linearLayoutManager);
　　//BaseQuickAdapter是我使用的一个快速适配器框架，把代码放入Recycler的adapter中都可以使用
　　mAdapter=newBaseQuickAdapter<WalletBean,BaseViewHolder>(R.layout.item_wallet,datas){
　　@Override
　　protectedvoidconvert(BaseViewHolderhelper,WalletBeanitem){
　　intpos=helper.getLayoutPosition();
　　if(pos>=1){
　　if(item.getTime().equals(datas.get(pos-1).getTime())){
　　helper.setVisible(R.id.ll_top,false);
　　item.setTop(false);
　　}else{
　　helper.setVisible(R.id.ll_top,true);
　　item.setTop(true);
　　}
　　}else{
　　helper.setVisible(R.id.ll_top,true);
　　item.setTop(true);
　　}
　　}
　　};
　　//重点是这里，给Recycler添加一个crollListener其中llTop是写在布局文件里的
　　rcList.addOnScrollListener(newRecyclerView.OnScrollListener(){
　　@Override
　　publicvoidonScrollStateChanged(RecyclerViewrecyclerView,intnewState){
　　super.onScrollStateChanged(recyclerView,newState);
　　mSuspensionHeight=llTop.getHeight();//悬浮条最底部的y
　　}
　　@Override
　　publicvoidonScrolled(RecyclerViewrecyclerView,intdx,intdy){
　　super.onScrolled(recyclerView,dx,dy);
　　//获取最顶部的item
　　Viewview=linearLayoutManager.findViewByPosition(mCurrentPosition+1);
　　//获取到的view顶部坐标小于悬浮条最底部的y轴坐标就是要重叠了
　　//datas.get(mCurrentPosition+1).isTo表示下个item存在悬浮条
　　if(view.getTop()<=mSuspensionHeight&&datas.get(mCurrentPosition+1).isTop()){
　　llTop.setY(-(mSuspensionHeight-view.getTop()));
　　}else{
　　llTop.setY(0);
　　}
　　//mCurrentPosition不是当前显示最顶部的position
　　if(mCurrentPosition!=linearLayoutManager.findFirstVisibleItemPosition()){
　　mCurrentPosition=linearLayoutManager.findFirstVisibleItemPosition();
　　llTop.setY(0);
　　}
　　}
　　});
　　llTop.setOnClickListener(newView.OnClickListener(){
　　@Override
　　publicvoidonClick(Viewv){
　　//TODO:2018/3/27点击事件处理
　　ToastUtils.show("SHOW");
　　}
　　});

下面是xml布局文件

　　<RelativeLayout
　　xmlns:android="http://schemas.android.com/apk/res/android"
　　android:layout_width="match_parent"
　　android:layout_height="match_parent"
　　android:background="@color/gray_bg">
　　<android.support.v4.widget.SwipeRefreshLayout
　　android:id="@+id/swipeLayout"
　　android:layout_width="match_parent"
　　android:layout_height="match_parent"
　　android:orientation="vertical"
　　>
　　<android.support.v7.widget.RecyclerView
　　android:background="@color/color_white"
　　android:id="@+id/rc_list"
　　android:scrollbars="none"
　　android:layout_width="match_parent"
　　android:layout_height="match_parent">
　　</android.support.v7.widget.RecyclerView>
　　</android.support.v4.widget.SwipeRefreshLayout>
　　<LinearLayout
　　android:id="@+id/ll_top"
　　android:background="@color/red"
　　android:paddingRight="20dp"
　　android:paddingLeft="20dp"
　　android:paddingBottom="9dp"
　　android:paddingTop="9dp"
　　android:orientation="horizontal"
　　android:layout_width="match_parent"
　　android:layout_height="wrap_content">
　　<TextView
　　android:id="@+id/tv_time_day"
　　android:layout_weight="1"
　　android:layout_width="0dp"
　　android:layout_height="wrap_content"
　　android:text="2018年2月20日"
　　android:textColor="@color/color_rb_checked_false"
　　android:textSize="13sp"/>
　　<TextView
　　android:id="@+id/tv_sum_money"
　　android:layout_width="wrap_content"
　　android:layout_height="wrap_content"
　　android:text="合计-1075.51元"
　　android:textColor="@color/color_rb_checked_false"
　　android:textSize="13sp"/>
　　</LinearLayout>
　　</RelativeLayout>
　　<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
　　android:layout_width="match_parent"
　　android:layout_height="wrap_content"
　　android:orientation="vertical"
　　android:background="@drawable/list_touch_bg">
　　<LinearLayout
　　android:id="@+id/ll_top"
　　android:background="@color/red"
　　android:paddingRight="20dp"
　　android:paddingLeft="20dp"
　　android:paddingBottom="9dp"
　　android:paddingTop="9dp"
　　android:orientation="horizontal"
　　android:layout_width="match_parent"
　　android:layout_height="wrap_content">
　　<TextView
　　android:id="@+id/tv_time_day"
　　android:layout_width="0dp"
　　android:layout_height="wrap_content"
　　android:layout_weight="1"
　　android:text="2018年2月20日"
　　android:textColor="@color/color_rb_checked_false"
　　android:textSize="13sp"/>
　　<TextView
　　android:id="@+id/tv_sum_money"
　　android:layout_width="wrap_content"
　　android:layout_height="wrap_content"
　　android:text="合计-1075.51元"
　　android:textColor="@color/color_rb_checked_false"
　　android:textSize="13sp"/>
　　</LinearLayout>
　　<LinearLayout
　　android:paddingBottom="12dp"
　　android:paddingLeft="20dp"
　　android:paddingRight="20dp"
　　android:paddingTop="12dp"
　　android:background="@color/color_white"
　　android:orientation="horizontal"
　　android:layout_width="match_parent"
　　android:layout_height="wrap_content">
　　<TextView
　　android:id="@+id/tv_time"
　　android:layout_weight="1"
　　android:layout_width="0dp"
　　android:layout_height="wrap_content"
　　android:text="21:44结算"
　　android:textColor="@color/color_rb_checked_true"
　　android:textSize="17sp"/>
　　<TextView
　　android:id="@+id/tv_money"
　　android:layout_width="wrap_content"
　　android:layout_height="wrap_content"
　　android:text="-1075.51元"
　　android:textColor="@color/color_rb_checked_true"
　　android:textSize="17sp"
　　/>
　　</LinearLayout>
　　<View
　　android:background="@color/gray_bg"
　　android:layout_width="match_parent"
　　android:layout_height="1dp"/>
　　</LinearLayout>

可以看到我在SwipeRefreshLayout中放了一个lltop作为悬浮条，每个item中都给了同样布局的悬浮条，但默认隐藏，所以我们的点击事件实际操作的是lltop，至于更新lltop中的数据就不用说了，滑动到下个悬浮条的时候更新就可以了。

RecyclerView顶部悬浮条的功能也就这样实现了，当然考虑到代码实际性能可能并不如recyclerView.addItemDecoration，但思路是一样的，并且支持了悬浮条的点击事件。

最后想要了解更多请关注扣丁学堂Android培训官网、微信公众号平台，扣丁学堂Android视频教程从零基础到精通免费试听试学，就业终端服务系统随时监控学员的学习情况和效果，顺利毕业后根据学员自身风格和学习效果推荐就业。如果你想要学习Android开发工程师技术就不要再犹豫了，喜欢就付诸行动吧。

【关注微信公众号获取更多学习资料】

查看更多关于“Android开发技术”的相关资讯>>