不一样的 9 宫格图片展示，仿 Nice 首页图片列表 9 图样式，并实现拖拽效果

ImageNice9Layout

项目地址：wobiancao/ImageNice9Layout 

简介：不一样的 9 宫格图片展示，仿 Nice 首页图片列表 9 图样式，并实现拖拽效果

写在开头：

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

看看产品需要的什么吧

效果图太多就不杀猫了，直接上之前实现的 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 或下载本控件，修改响应版本然后依赖 compile project(':imagenice9lib')

或者远程依赖

compile 'com.wobiancao:imagenice9lib:1.0.1'
需要配置本地 gradle.properties 文件
VLAYOUT_VERSION = 1.0.6//vlayout 版本号
GLIDE_VERSION = 3.7.0//glide 版本号
ANDROID_BUILD_MIN_SDK_VERSION=16//minSdkVersion
ANDROID_BUILD_TARGET_SDK_VERSION=23//targetSdkVersion
ANDROID_BUILD_TOOLS_VERSION=25.0.2//buildToolsVersion
ANDROID_BUILD_SDK_VERSION=25//compileSdkVersion

2.属性：

  app:nice9_itemMargin="5dp"//每个图片之间的间距
  app:nice9_candrag="false"//是否支持拖拽，默认 false

```//提示文字

//提示文字颜色

//提示文字背景色

//提示文字背景图 ```

3.使用，直接 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"/> 4.可以公布的情报

`/**

 * 提示文字背景
 **/
public void setTipBgDrawable(Drawable tipBgDrawable) {
    mTip.setBackground(tipBgDrawable);
}

/**
 * 提示文字颜色
 **/
public void setTipColor(int tipBgColor) {
    mTip.setTextColor(tipBgColor);
}

/**
 * 提示背景颜色
 **/
public void setTipBgColor(int tipBgColor) {
    mTip.setBackgroundColor(tipBgColor);
}

/**
 * 提示文字
 **/
public void setTipText(String string) {
    mTip.setText(string);
}

public void setTipText(@StringRes int string) {
    setTipText(getResources().getString(string));
}

/**

 * 获取更改后的图片列表
 **/
public List<String> getAfterPicList() {
    return mMulitVAdapter.getPictures();
}`

简书地址

如果觉得本文或本库对您有所帮助，就点个 star 吧？ 体验 apk

感谢

vlayout

pixabay

glide