仿Nice首页图片列表9图样式,并实现拖拽效果

复制粘贴侠
• 阅读 3635

写在开头:

为什么要实现这么个功能,当然不是我闲得慌,当然是产品的需求。身为码农你只能想方设法去实现,即使留给你的时间已经不多了,想起一句话:这个需求很简单,怎么实现我不管,月底上线
仿Nice首页图片列表9图样式,并实现拖拽效果

看看产品需要的什么吧

仿Nice首页图片列表9图样式,并实现拖拽效果

效果图太多就不杀猫了,直接上之前实现的demo效果图吧
仿Nice首页图片列表9图样式,并实现拖拽效果

分析Or撕逼

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

仿Nice首页图片列表9图样式,并实现拖拽效果

仿Nice首页图片列表9图样式,并实现拖拽效果

左边的好说,右边的喂??有点类似瀑布流的样子
仿Nice首页图片列表9图样式,并实现拖拽效果

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

仿Nice首页图片列表9图样式,并实现拖拽效果

实现步骤Or踩坑过程

首先,时间上,规定时间需要上线版本,这个布局留给我的时间有且仅有充裕的1天,对于实现过类似功能的人来说,一天确实很充裕;
其次,功能上,逻辑并不复杂,条理也很清晰,就是9张图,9种排列方式,用到的地方两处:
1)发布的时候需要拖拽;
2)显示详情的时候需要展示,不能拖拽;
方案有:
1.写9种静态布局;
2.addview的方式动态添加布局;
3.万能的recyclerView

最后排除1、2方案,采用方案3
时间上,自定义LayoutManager可能来不及,不知里面有什么坑,只好去找轮子
仿Nice首页图片列表9图样式,并实现拖拽效果

让我们看看有什么轮子:
FreeSizeDraggableLayout
Android 布局之GridLayout
我发现这两个,都不是我想要的,具体可去看源码和实现
然后又找到两个关于自定义recyclerview的库
two-way
vlayout
找到以上库的时候,半天已经过去,只剩下半天“充裕”的时间了
仿Nice首页图片列表9图样式,并实现拖拽效果

当时导入two-way库的时候出现了问题,一直build不起,只好选择vlayout,毕竟时间不等人;上面的demo.gif是用vlayout实现的;后面我试了two-way库,也实现了这个效果,喜欢的朋友可以去试试

贴上最终实现效果:

仿Nice首页图片列表9图样式,并实现拖拽效果

仿Nice首页图片列表9图样式,并实现拖拽效果

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

使用方法

1.
git clone https://github.com/wobiancao/ImageNice9Layout.git
然后依赖
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"/>

GitHub

ImageNice9Layout
如果觉得本文或本库对您有所帮助,就点个star吧?

仿Nice首页图片列表9图样式,并实现拖拽效果

Demo

体验apk

感谢

vlayout
pixabay
glide

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
3年前
UIWebView长按保存图片和识别图片二维码的实现方案(使用缓存)
0x00需求:长按识别UIWebView中的二维码,如下图长按识别二维码0x01方案1:给UIWebView增加一个长按手势,激活长按手势时获取当前UIWebView的截图,分析是否包含二维码。核心代码:略优点:流程简单,可以快速实现。不足:无法实现保存UIWebView中图片,如果当前We
Easter79 Easter79
3年前
springboot2之优雅处理返回值
前言最近项目组有个老项目要进行前后端分离改造,应前端同学的要求,其后端提供的返回值格式需形如{"status":0,"message":"success","data":{}}方便前端数据处理。要实现前端同学这个需求,其实也挺简单的,
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
3年前
CSS实现文字两端对齐
最近的项目遇到了这样的需求:(要求标题部分不管文字多少,都必须两端对齐)如下图:!(https://oscimg.oschina.net/oscnet/6e151291c0c55e2a231d00ec198d6c5be11.png)当时也没有多想直接使用‘&ensp;’进行代替,毕竟产品同学想快一点看到效果,不敢怠慢!不过到第二个页面就傻眼了
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(