1. 首页

类微信界面开发之RecyclerView

之前编写了类微信的界面,属于最基础的界面。

这次在上次的(最普通的)界面加上了RecyclerView,正所谓何为RecyclerView,请亲爱的读者们访问官网,上边有很详细的文档解说,在这里不多解释。下面是官网:

[https://developer.android.google.cn/guide/topics/ui/layout/recyclerview#java](使用 RecyclerView 创建列表)

我在编写这个RecyclerView之前,参考了上头领导发下来的资料,本篇文章的大部分代码内容均来源于这个资料,这个资料以及源码会在文章的末尾提供。

在微信通讯录界面里,会看到很多联系人,这些联系人每个都占有一个小长方形格子,每个长方形格子的宽和手机的屏幕宽度是适应的,手指往下滑动,会继续加载长方形格子,点击这个长方形格子,会进入到相应联系人的个人信息界面。这是我用自己的话来表述我对RecyclerView的理解,当然这也只是RecyclerView 的冰山一角。以RecyclerView 为起点开发出来的功能有很多,像百度搜索照片出现的不同尺寸的图像,像QQ聊天界面可以下拉刷新也可以右滑删除,还有京东购物页面可以下拉加载等等。

在这里,我演示的也是比较简单的拖动流,类似于在KTV唱歌时,有的人想把自己点的歌的顺序调前,就可以长按你选中的歌曲,然后向上拖动改变位置,其余的歌曲位置也会相应改变。

为了保险,我先单独创建了一个项目,目的是测试拖动流是否能运行成功。如下图:

类微信界面开发之RecyclerView

测试成功,接下来就是怎样加入到类微信界面中去。

第一次做类微信界面时,用的是fragment这个标签,对于fragment

Fragment是一种可以嵌入在活动中的UI片段,能够让程序更加合理和充分地利用大屏幕的空间,出现的初衷是为了适应大屏幕的平板电脑,可以将其看成一个小型Activity,又称作Activity片段。

使用Fragment可以把屏幕划分成几块,然后进行分组,进行一个模块化管理。Fragment不能够单独使用,需要嵌套在Activity中使用,其生命周期也受到宿主Activity的生命周期的影响

官方定义如下:

A Fragment represents a behavior or a portion of user interface in an Activity. You can combine multiple fragments in a single activity to build a multi-pane UI and reuse a fragment in multiple activities. You can think of a fragment as a modular section of an activity, which has its own lifecycle, receives its own input events, and which you can add or remove while the activity is running.

从官方的定义可以得到:

  • Fragment依赖于Activity,不能独立存在
  • 一个Activity可以有多个Fragment
  • 一个Fragment可以被多个Activity重用
  • Fragment有自己的生命周期,并能接收输入事件
  • 可以在Activity运行时动态地添加或删除Fragment

这一次做拖动流,也是在原先的`fragment`基础上添加的,从定义中可以看出来 **“能够让程序更加合理和充分地利用大屏幕的空间”** ,`RecyclerView`也正是需要`fragment`的搭配,就像瀑布流,图片尺寸不一,但仍能铺满屏幕供使用者阅读。

上次创建了四个Java文件

类微信界面开发之RecyclerView

我将这个RecyclerView 显示在设置界面中,就需要将相应的代码段写入到settingFragment``.java文件中,而主函数MainActivity添加相应的构造函数(你要输入的数据)以及调用函数和函数返回。

在单拖动流中,有这么些Java文件

类微信界面开发之RecyclerView

只能有一个main文件,所以要把DragActivity.java写入到settingsFragment.java中去,其余的可以直接移到同级目录里,并创建相应的drawablelayoutxml文件。

drag_recycle_item.xml的design:

类微信界面开发之RecyclerView

可以看出这就是微信通讯录中的联系人所在的小长方形格子

select_bg.xml 和 common_bg.xml 的注释:

类微信界面开发之RecyclerView

select_bg.xml 相当于提示你正在选择这个小长方形格子, common_bg.xml 提示你完成了移动操作或没有进行移动操作。

在tongxunluFragment中:

类微信界面开发之RecyclerView

有几个需要注意的地方:

1.资料中没有这步定义变量,为了能融入微信界面,需要创建。

类微信界面开发之RecyclerView

2.原文中括号内是this指针变量,但这个变量经测试是空指针,没有任何用,将this改为getActivity()

类微信界面开发之RecyclerView

3.(这里第一次调用变量view)这一步强制转换view为RecyclerView型

类微信界面开发之RecyclerView

4.第二次调用view,并将tab03RecyclerView结合。

类微信界面开发之RecyclerView

最后的结果:

类微信界面开发之RecyclerView

本文的代码大部分转载于这个地方:

www.jianshu.com/p/c4cfe38a9… 

本文代码的码云地址:

这里有单拖动流和显示在微信界面的拖动流

作者:CHINA_ganchun
链接:https://juejin.im/post/6890906618645446670

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:类微信界面开发之RecyclerView

链接:https://www.javascriptc.com/4711.html

« LeetCode 044. 通配符匹配
Vue3 项目搭建你懂了吗»
Flutter 中文教程资源

相关推荐

QR code