Recycleview实现复杂布局

首先 附上Demo链接和效果供大家参考

Demo

  • 实现思路
  • 代码思考

时间是一切财富中最宝贵的财富。 —— 德奥弗拉斯多

实现思路

开始看到设计稿子的时候,就在考虑这种参差不齐的布局。是不是有得考虑对数据的重新组装和计算每个空白区域的位置等等,因为之前做过类似的补空白的item。但感觉这个要是算起来会更加复杂 就在考虑有没有比较简单的实现思路

  1. 首先我想到了用嵌套的方式去实现,但是那样的话,性能会受到很大的影响。因为UI上滑动的卡顿,是我们最不想见到的情况了。
  2. 经过和朋友的交流,他之前实现过类似得。不过我也抛弃他的做法。因为觉得他的也很复杂,感觉比较难维护
  3. 不过受到他的一些启发,最后通过对数据的处理和实现一个核心方法,实现了最终的效果

核心代码

1.对后台返回的数据进行在整合,类型划分

class Data {
var type: Int? = 0 var kname: String? = "" var year: String? = ""
}

2.重写Recycleview的onAttachedToRecyclerView方法,对返回的列的数量进行区分

 override fun onAttachedToRecyclerView(recyclerView:RecyclerView?) {
super.onAttachedToRecyclerView(recyclerView)
(recyclerView!!.layoutManager as GridLayoutManager).spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
override fun getSpanSize(position: Int): Int {
return if (list[position].type == ITEMTYPE.ITEM_YEAR.ordinal) {
2
} else {
1
}
}
}
}

3.adapter里具体代码实现

class XAdapter : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    var list = arrayListOf<Data>()

    fun update(list: ArrayList<Data>) {
this.list.clear()
this.list.addAll(list)
notifyDataSetChanged()
}
override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): RecyclerView.ViewHolder {
return if (viewType == ITEMTYPE.ITEM_YEAR.ordinal) {
YearHolder(LayoutInflater.from(parent!!.context).inflate(R.layout.item_year, null))
} else {
NormalHolder(LayoutInflater.from(parent!!.context).inflate(R.layout.item_normal, null))
}
}
override fun onBindViewHolder(holder: RecyclerView.ViewHolder?, position: Int) {
if (list[position].type == ITEMTYPE.ITEM_YEAR.ordinal) {
(holder as YearHolder).tv.text = list[position].year
} else {
(holder as NormalHolder).normal_tv.text = list[position].kname
}
}
override fun getItemCount(): Int {
return list.size
}
override fun getItemViewType(position: Int): Int {
return list[position].type!!
}
override fun onAttachedToRecyclerView(recyclerView: RecyclerView?) {
super.onAttachedToRecyclerView(recyclerView)
(recyclerView!!.layoutManager as GridLayoutManager).spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
override fun getSpanSize(position: Int): Int {
return if (list[position].type == ITEMTYPE.ITEM_YEAR.ordinal) {
2
} else {
1
}
}
}
}
}
class NormalHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
var normal_tv = itemView.findViewById<TextView>(R.id.normal_tv)
}
class YearHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
var tv = itemView.findViewById<TextView>(R.id.tv)
}

代码思考

由于之前是Java写的,最近在学习Kotlin。个人感觉多学习一些东西还是比较好的。社会在进步嘛,如果赶不上时代的步伐,就会被淘汰,尤其是在中国。

说了那么多没用的,最后还是希望大家能够在码农的道路上越走越远,前辈请多指教。

Recycleview实现复杂布局的更多相关文章

  1. 手把手教你给RecycleView添加头布局和尾布局

    RecycleView想必大家都不陌生,它已他的高拓展性取代了传统布局显示,同时配合协调布局,可以实现很多意想不到的酷炫交互,今天就和大家介绍一下,如何给RecycleView添加头布局和尾布局,同时 ...

  2. RecycleView实现多布局可展开列表

    代码地址如下:http://www.demodashi.com/demo/13193.html 前言 在开发的时候,我们不免会遇到这么一种数据展示,该数据有以下特征: 数据要以列表形式展示 每条数据要 ...

  3. RecycleView 实现多布局

    最近的一个新需求,简单描述下吧: 需求: 目标样式如图所示,我们需要根据需求动态添加网关和设备. 目标有了下面就是怎么实现了.首先我们选用的是RecycleView 那么主要目标就成了 在recycl ...

  4. RecycleView文字吸顶,点击吸顶布局刷新数据

    实现效果 需求 Recycle有一个头布局,可以跟随列表进行滑动 点击头布局之后可以重新加载列表数据 随着头布局的消失,留下一个可点击的布局(该布局在头布局中) 效果类似下图: 淘宝的商品列表,随着我 ...

  5. RecycleView 滑动到底部,加载更多

    android.support.v7 包提供了一个新的组件:RecycleView,用以提供一个灵活的列表试图.显示大型数据集,它支持局部刷新.显示动画等功能,可以用来取代ListView与GridV ...

  6. RecycleView设置顶部分割线(记录一个坑)

    大家都知道,想给RecycleView设置分割线可以重写RecyclerView.ItemDecoration 项目过程中,遇到一个需求:RecycleView顶部有一条灰色的间隔,我想到了给Recy ...

  7. 【腾讯Bugly干货分享】跨平台 ListView 性能优化

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/FbiSLPxFdGqJ00WgpJ94yw 导语 精 ...

  8. Material Design入门

    本文主要包括以下内容 ToolBar的使用 RecyclerView的定义与使用 ToolBar 风格 (style) 界面 (layout) 程序 (java) 首先自定义一个theme,并将App ...

  9. 解决Scrollview 嵌套recyclerview不能显示,高度不正常的问题

    我们先看一个效果,问题说的就是中间的Grid效果在Scrollview 嵌套recyclerview显示问题,在Android Api 24是好的,不过在5,1,1版本(api 22)缺出现了问题 最 ...

随机推荐

  1. MapReduce工作机制——Word Count实例(一)

    MapReduce工作机制--Word Count实例(一) MapReduce的思想是分布式计算,也就是分而治之,并行计算提高速度. 编程思想 首先,要将数据抽象为键值对的形式,map函数输入键值对 ...

  2. 新概念英语(1-45)The boss's letter

    新概念英语(1-45)The boss's letter Why can't Pamela type the letter? A:Can you come here a minute, please, ...

  3. 【原生js实现一键回到顶部】

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. windows server 2016远程桌面进去,英文系统修改语言

    由于我这边已经是改好了,以下截图来自中文版. 这边选了中文,然后点options. 选择:使该语言成为主要语言,保存. 会提示需要退出登录. 过一会重新登录,ok.

  5. mysql自带的example测试数据库导入Centos6.5

    1.下载数据库 下载地址: [test数据库] (https://github.com/datacharmer/test_db) 不出意外的话,下载下来是个unzip文件. 2.上传到数据库服务器 r ...

  6. 深入理解JavaScript的this指向问题

    Javascript的this用法 this是Javascript语言的一个关键字.它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如: function test(){ this.x ...

  7. 使用hue查看hdfs系统报无法访问:/user/hadoop。 Note: you are a Hue admin but not a HDFS superuser, "hdfs" or part of HDFS supergroup, "supergroup".

    出现这个问题,是因为默认的超级用户是hdfs ,我的是hadoop用户登录的, 也就是说首次登录hadoop这个用户是我的超级用户 此时只需要将hue.ini配置改为 然后重启即可.

  8. 使用 C# (.NET Core) 实现命令设计模式 (Command Pattern)

    本文的概念内容来自深入浅出设计模式一书. 项目需求 有这样一个可编程的新型遥控器, 它有7个可编程插槽, 每个插槽可连接不同的家用电器设备. 每个插槽对应两个按钮: 开, 关(ON, OFF). 此外 ...

  9. 用js来实现那些数据结构06(队列)

    其实队列跟栈有很多相似的地方,包括其中的一些方法和使用方式,只是队列使用了与栈完全不同的原则,栈是后进先出原则,而队列是先进先出(First In First Out). 一.队列    队列是一种特 ...

  10. [LeetCode] Maximum Average Subarray I 子数组的最大平均值

    Given an array consisting of n integers, find the contiguous subarray of given length k that has the ...