ImageNice9Layout九宫格图片展示样式

联合创作 · 2023-09-24 07:10

ImageNice9Layout 是简单的实现不一样的9宫格图片展示样式。


写在开头


为什么要实现这么个功能,当然不是我闲得慌,当然是产品的需求。身为码农你只能想方设法去实现,即使留给你的时间已经不多了,想起一句话:这个需求很简单,怎么实现我不管,月底上线


警察.png


看看产品需要的什么吧


image.png


效果图太多就不杀猫了,直接上之前实现的demo效果图吧


demo.gif


分析 Or 撕逼


初一看,恩9种样式,宫格布局的,这个应该很简单,还要实现拖拽, RecyclerView + GridLayoutManager设置spanSize + ItemTouchHelper 一波带走; 再一看,我擦这3张的和6张的怎么这么是这样的?


3.png


6.png


左边的好说,右边的喂??有点类似瀑布流的样子


头大.png


然后,大话说出去了,解决呗。猫:然而事情并没有这么简单


coder.png


实现步骤 Or 踩坑过程


首先,时间上,规定时间需要上线版本,这个布局留给我的时间有且仅有充裕的1天,对于实现过类似功能的人来说,一天确实很充裕;


其次,功能上,逻辑并不复杂,条理也很清晰,就是9张图,9种排列方式,用到的地方两处:


1).发布的时候需要拖拽,


2)显示详情的时候需要展示,不能拖拽;


方案有:


1.写9种静态布局;


2.addview的方式动态添加布局;


3.万能的recyclerView


最后排除1、2方案,采用方案3


时间上,自定义LayoutManager可能来不及,不知里面有什么坑,只好去找轮子


车技.jpg


让我们看看有什么轮子:


FreeSizeDraggableLayout


Android 布局之GridLayout


我发现这两个,都不是我想要的,具体可去看源码和实现


然后又找到两个关于自定义recyclerview的库


two-way


vlayout


找到以上库的时候,半天已经过去,只剩下半天“充裕”的时间了


fuck.png


当时导入two-way库的时候出现了问题,一直build不起,只好选择vlayout,毕竟时间不等人;


上面的demo.gif是用vlayout实现的;后面我试了two-way库,也实现了这个效果,喜欢的朋友可以去试试


最终实现效果:


拖拽样式


拖拽动画不是很理想,希望有小伙伴能提点意见怎么修改这个拖拽动画,我简单的把这个控件封装了一下,便于以后使用


使用方法


1.git clone 或下载本控件,修改响应版本然后依赖 compile project(':imagenice9lib')


2.属性: `app:nice9_itemMargin="5dp"//每个图片之间的间距


app:nice9_candrag="false"//是否支持拖拽,默认false`


3.Item点击接口:


mImageNice9Layout.setItemDelegate(new ImageNice9Layout.ItemDelegate());


4.使用,直接xml布局就行:


` <wobiancao.nice9.lib.ImageNice9Layout


    android:id="@+id/item_nice9_image"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:layout_marginTop="8dp"

    app:nice9_itemMargin="5dp"

    app:nice9_candrag="false"/>`
浏览 23
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报