wobiancao/ImageNice9Layout

写在开头：

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

看看产品需要的什么吧

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

#新增属性


 <attr name="nice9_tipColor" format="reference|color"/>//提示文字颜色
 
 <attr name="nice9_tipBgColor" format="reference|color"/>//提示文字背景色
 
 <attr name="nice9_tipBgDrawable" format="reference"/>//提示文字背景图

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 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.

wobiancao / ImageNice9Layout

License

About

Languages