写在开头：

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

看看产品需要的什么吧

效果图太多就不杀猫了，直接上之前实现的 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

License

  Copyright 2017 Adrián García Lomas

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.