0°

RecyclerView实现混排效果,仿网易云音乐

内容预览:
  • 始发于微信公众号: 程序员小乐 分享编程技能、互联网技术、生活感悟、...~
  • 本号支持 投稿! “   前言 最近在使用网易云音乐的时候,看到...~
  • 乐乐有话说 放弃与放手的区别:放弃是牺牲本来属于你的,放手是放下那些...~

始发于微信公众号: 程序员小乐

分享编程技能、互联网技术、生活感悟、打造干货分享平台,将总结的技术、心得、经验分享给大家,这里不只限于技术!值得你去关注,点击上方 蓝字 快速关注。本号支持 投稿

  前言



最近在使用网易云音乐的时候,看到如下图的排版效果图,自己也想实现一个

RecyclerView实现混排效果,仿网易云音乐

这里采用网上用法最多的方式,而且是比较简单的方式实现的,想要做项目的同学也可以快速入手搞定首页界面,可以在最快的时间内模仿出来,且效果达到90%以上的相似

  效果演示



至于图片的加载你们可以根据网上的Api获取相应的图片加载到对应的位置,这里只是采用本地图片来演示

RecyclerView实现混排效果,仿网易云音乐

  实现分析



这里是采用RecyclerView的GridLayoutManager的一个SpanSize这么一个东西,从下图很容易知道其意思

RecyclerView实现混排效果,仿网易云音乐

  项目结构



项目结构可能对初学者感觉很庞大,不用担心,这里我会按照下面的包名划分,从最简单的开始分析

RecyclerView实现混排效果,仿网易云音乐

  引入依赖



首先是在Gradle中引入对RecyclerView的依赖

compile ‘com.android.support:recyclerview-v7:25.3.1’


  View包



由于项目用到的图片是有规格限定的,所以需要对ImageView覆写,得到我们想要尺寸的图片

  • SquareImageView:正方形图片

  • RectImageView:长方形图片


RecyclerView实现混排效果,仿网易云音乐

RecyclerView实现混排效果,仿网易云音乐


 Music包



这里是我们存储实体的地方,其中四种类型的划分,分别对应项目展示中的前三个模块的划分,其中还有一个标题也算是一种类型,所以共四种


RecyclerView实现混排效果,仿网易云音乐


 Listener包



由于RecyclerView自身是没有点击事件的,所以这个包是RecyclerView的点击事件接口


RecyclerView实现混排效果,仿网易云音乐


 Decoration包



由于RecyclerView是不提供分割线的,所以这个包是自定义的分割线


RecyclerView实现混排效果,仿网易云音乐


 ViewHolder



这里存储的是我们混排效果的控件,标题可能会有点区别,其他是一样的效果,为了后期方便拓展,我们就把他们分开,不代码复用


RecyclerView实现混排效果,仿网易云音乐

RecyclerView实现混排效果,仿网易云音乐

RecyclerView实现混排效果,仿网易云音乐

RecyclerView实现混排效果,仿网易云音乐


 Adapter包



这里就是对所有ViewHolder的控制器,然而这里并不是混排效果实现的最终地方,只不过是填充数据的地方


RecyclerView实现混排效果,仿网易云音乐

RecyclerView实现混排效果,仿网易云音乐

RecyclerView实现混排效果,仿网易云音乐


 Activity



这里就是我们实现混排效果的关键,我们会根据不同类型的数据,对RecyclerView的SpanSize的进行设置


RecyclerView实现混排效果,仿网易云音乐

RecyclerView实现混排效果,仿网易云音乐

RecyclerView实现混排效果,仿网易云音乐

RecyclerView实现混排效果,仿网易云音乐

RecyclerView实现混排效果,仿网易云音乐


 layout布局文件



这里的布局很简单,比如用到我们的正方形图片,长方形图片等,这里就不做代码贴出,详细可以查看源码


 源码下载



https://github.com/AndroidHensen/RecyclerPage


如何您想进技术群和大牛们交流,关注公众号在后台回复 “加群”,或者 “学习” 即可

作者:Hensen_

链接: http://blog.csdn.net/qq_30379689/article/details/78387411
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

RecyclerView实现混排效果,仿网易云音乐—– 由   分享

如果您觉得不错,请别忘了分享到您的朋友圈让更多的人看到!! 您的举手之劳,就是对我最好的支持,非常感谢!

RecyclerView实现混排效果,仿网易云音乐

每日英文

Try to hold the right hand with your left hand, and gave yourself most simple warmth. we should learn to get it by ourselves instead of craving for warmth from others. 

试着用左手握住右手,给了自己最简单的温暖,不再奢求别人的给予,开始学着自己给自己。


乐乐有话说

放弃与放手的区别:放弃是牺牲本来属于你的,放手是放下那些从来就不是你的。

RecyclerView实现混排效果,仿网易云音乐


推荐阅读




知识星球
这里聚集了业界内的大牛,值得各位大牛的加入!

RecyclerView实现混排效果,仿网易云音乐 

看完本文有收获?请转发分享给更多人
关注「杨守乐」,提升编程技能

【QQ技术群】279126311 []
【QQ技术群】484572225 [未]

以上就是:RecyclerView实现混排效果,仿网易云音乐 的全部内容。

本站部分内容来源于互联网和用户投稿,如有侵权请联系我们删除,谢谢。
Email:[email protected]


0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论