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

96
兔子吃过窝边草
0.2 2017.06.15 10:32* 字数 807

写在开头:

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


警察.png

看看产品需要的什么吧

image.png

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


demo.gif

分析Or撕逼

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

3.png
6.png

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


头大.png

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

coder.png

实现步骤Or踩坑过程

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

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


车技.jpg

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

fuck.png

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

贴上最终实现效果:

列表.gif
拖拽.gif

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

使用方法

项目build.gradle添加
    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }
依赖:
    dependencies {
        compile'com.github.wobiancao:ImageNice9Layout:1.0.1'
    }

git clone https://github.com/wobiancao/ImageNice9Layout.git
然后依赖
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_tipText" format="reference|string"/>//提示文字 <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<String> getAfterPicList() {
return mMulitVAdapter.getPictures();
}

####GitHub
[ImageNice9Layout](https://github.com/wobiancao/ImageNice9Layout)
如果觉得本文或本库对您有所帮助,就点个star吧?

![emmm.png](http://upload-images.jianshu.io/upload_images/1216032-512efea90ab7705b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####Demo
[体验apk](https://fir.im/nice9)
####感谢
[vlayout](https://github.com/alibaba/vlayout)
[pixabay](https://pixabay.com/)
[glide](https://github.com/bumptech/glide)

####加点徽章?
[ ![](https://api.bintray.com/packages/a12a15a05/maven/imagenice9lib/images/download.svg) ](https://bintray.com/a12a15a05/maven/imagenice9lib/_latestVersion)
![](https://img.shields.io/github/stars/wobiancao/ImageNice9Layout.svg)![](https://img.shields.io/twitter/url/https/github.com/wobiancao/ImageNice9Layout.svg?style=social
)
![](https://img.shields.io/badge/language-android-green.svg)
![](https://img.shields.io/badge/license-Apache2.0-000000.svg)
日记本