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

lyning 发布于2019-06-25 11:21 / 1184人阅读

摘要：写在开头为什么要实现这么个功能，当然不是我闲得慌，当然是产品的需求。

写在开头：

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

看看产品需要的什么吧

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

分析Or撕逼

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

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

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

实现步骤Or踩坑过程

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

最后排除1、2方案，采用方案3
时间上，自定义LayoutManager可能来不及，不知里面有什么坑，只好去找轮子

让我们看看有什么轮子：
FreeSizeDraggableLayout
Android 布局之GridLayout
我发现这两个，都不是我想要的,具体可去看源码和实现
然后又找到两个关于自定义recyclerview的库
two-way
vlayout
找到以上库的时候，半天已经过去，只剩下半天“充裕”的时间了

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

贴上最终实现效果：

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

使用方法

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布局就行：

    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吧？

Demo

体验apk

感谢

vlayout
pixabay
glide

超融合服务器服务器托管仿360首页效果 html列表样式图片 js实现图片渐入效果仿微软首页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/13700.html

Android自定义控件

摘要：自定义之高仿支付宝芝麻信用分仪表盘效果最近写的一个自定义，仿了下支付宝新旧版的芝麻信用分的仪表盘效果。项目需求讨论自定义实现步骤及封装根据实际项目需求出发。来快速实现各种自定义界面的对话框。究其原因，目前只用到了最基础的一部分功能。自定义 View 之高仿支付宝芝麻信用分仪表盘效果最近写的一个自定义 View，仿了下支付宝新旧版的芝麻信用分的仪表盘效果。项目需求讨论 - Andr...

Tikitoo 2019-06-25 11:48 评论0 收藏0
滑动 - 收藏集 - 掘金

摘要：分析提到侧滑删除，一个经典的例子就是玩转仿探探卡片式滑动效果掘金讲起本篇博客的历史起源，估计有一段历史了。列表左右滑动开源组件掘金是一款用于为上的排布提供左滑右滑操作的库。 Android 仿 YouTube 拖拽视频效果的实现 - Android - 掘金Android仿YouTube拖拽视频效果的实现 youtube-like-drag-video-view 代码已经开源到GitH...

ShevaKuilin 2019-06-25 11:22 评论0 收藏0
GitHub 上受欢迎的 Android UI Library 整理二

摘要：通知克服和的限制高仿淘宝微信等热门通知视图通过一行代码实现通知功能工具类轮播框通知全新的通知栏聊天视图简化开发快速创建聊天信息视图聊天视图实现聊天界面基于实际需求做出的灵活可定制的功能模仿饿了么详情页的例子带通知 https://github.com/Tapadoo/Al... ★2528 - 克服Toast和Snackbar的限制https://github.com/wenming...

nifhlheimr 2019-06-25 12:51 评论0 收藏0
RecycleView相关

摘要：接下来通过一系列的文章讲解如何使用处理常见的的一些问题自定义实现下拉刷新，加载更多自定义实现下拉刷新，加载更多增强版之继承自，堪称增强版。自我感觉本系列算是中文关于资料中的干货。因网上有大量半吊子写的相关的中文文章。 Android ItemTouchHelper 实践实现 RecyclerView 拖动排序和滑动删除，我想到的是 ViewDragHelper ，或者是第三方库，当我...

weij 2019-06-25 11:49 评论0 收藏0
Android酷炫动画效果

摘要：高级特效之酷炫抢红包金币下落动画最近项目需求要求做一个抢红包特效。使用动画让页面跳转更炫酷中引入了很多炫酷的动画效果，便是其中一种。 Android自定义View：一个精致的打钩小动画一个精致的打钩动画。 Android 自定义水平进度条圆角进度项目中实现进度条进度过程中显示圆角样式 ViewPager系列之仿魅族应用的广告BannerView 前言 Banner广告位是APP ...

scq000 2019-06-25 11:48 评论0 收藏0