NineGridLayout仿照朋友圈九宫格动态图片排版

简介: 微博,空间,朋友圈的动态,都有能够根据图片数量的不同,使用不同的布局排版。最具代表的就是1张图片,4张图片,多于9张图片时。网上方法很多,我使用NineGridLayout来实现此功能。

微博,空间,朋友圈的动态,都有能够根据图片数量的不同,使用不同的布局排版。
最具代表的就是1张图片,4张图片,多于9张图片时。
网上方法很多,我使用NineGridLayout来实现此功能。
我在此浅谈使用方法,原理性的东西暂时谈不起。

1.导入依赖库

img_fed39761bf3672b16dab723207c724b6.png

我使用的这个库也是来自网上大神的。在此留下大神的链接。
http://jaeger.itscoder.com/android/2016/03/06/nine-grid-iamge-view-libaray.html
此链接里有更详细的说明,和demo。

2.新建MyNineGridLayout继承NineGridLayout,并重写三个方法,添加构造方法。

img_c7424a571431d2ed0ec2fdd649c5443a.png
image.png

这个时候,其实我们就是新建了View控件,那么接下来的事情就很简单了,只需要像使用其他控件一样使用它就可以了。

3.首先在xml中使用该控件

img_9e048676de230efaba5746d87f5363f8.png
image.png

4.然后因为是朋友圈动态中的一个控件,所以用到RecyclerView。因此MyNineGridLayout控件的初始化放在Adapter适配器中。

public class MyNineGridLayoutAdapter extends RecyclerView.Adapter<MyNineGridLayoutAdapter.ViewHolder>
{
    private Context context;
    private List<NineGridTestModel> modelList;

    /*
    * RecyclerView的三个方法
    * */
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (null == context)
        {
            context = parent.getContext();
        }
        View view = LayoutInflater.from(context).inflate(R.layout.my_statu_item, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.layout.setIsShowAll(false);//当图片多于9张时,不完全显示。
        holder.layout.setUrlList(modelList.get(position).urlList);//设置图片源
    }

    @Override
    public int getItemCount() {
        return (null == modelList) ? 0 : modelList.size();
    }

    /*
    * 内部ViewHolder类
    * */
    public class ViewHolder extends RecyclerView.ViewHolder
    {
        NineGridLayout layout;
        public ViewHolder(View itemView) {
            super(itemView);
            layout = (NineGridLayout) itemView.findViewById(R.id.layout_nine_grid);
        }
    }

    public MyNineGridLayoutAdapter( List<NineGridTestModel> modelList)
    {
        this.modelList = modelList;
    }
}

注意onBindViewHolder()中的两个方法:
holder.layout.setIsShowAll(false);当图片数量大于9张时,最后一张会显示剩余图片数,如“+3”。当参数为true时,会直接显示所以图片。
holder.layout.setUrlList(modelList.get(position).urlList);设置图片的来源,其中的urlList是List<String>类型。
当你的图片源与前面的步骤都没有问题是,就可以正常工作了。

5.当你用到项目时,效果大体是这样。

img_59b42bbe2238da9999864e02bf1c3ae9.jpe
S70723-23435300.jpg
img_7fa4d6f7a15753b8f73b8e5deb1704f0.jpe
S70723-23440730.jpg
目录
相关文章
|
16天前
好看的粒子特效代码
好看的粒子特效代码,鼠标可以拖住旋转或者放大,喜欢的话可以拿去使用
26 2
|
3月前
404错误页面简约清新源码 非常好看
404错误页面简约清新源码 非常好看,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
22 0
404错误页面简约清新源码 非常好看
|
3月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
90 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
5月前
首途第三十三套清新简约卡片风格蓝紫渐变色短视频模板 | 苹果CMSV10主题
首途第三十三套清新简约卡片风格蓝紫渐变色短视频模板 | 苹果CMSV10主题 我们的简约风格,以纯洁的白色和深邃的紫色为主色调,为您提供了一种清新、时尚的浏览体验。在这个简洁而美丽的界面中,您可以轻松畅享各种精彩短视频。我们专注于简单的设计,使用户能够轻松找到他们喜欢的内容,而不受繁杂的界面干扰。紫色的调性为网页增添了一抹神秘和优雅,让您在欣赏视频的同时感受到一份宁静和舒适。清晰的布局和直观的操作,让您可以更专注于视频内容,而不被复杂的功能所困扰
60 1
|
6月前
宽屏好看的个人引导页源码
宽屏好看的个人引导页源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果
70 5
宽屏好看的个人引导页源码
|
JSON 自然语言处理 前端开发
用D3制作一张有翻页特效的手撕日历(只需100行代码)
在D3中用十分简单的代码就可以实现丰富的动画,下面来看一下手撕日历的动画效果吧
277 1
用D3制作一张有翻页特效的手撕日历(只需100行代码)
|
6月前
只用一个背景图片实现九宫格抽奖(uniapp纯代码)
只用一个背景图片实现九宫格抽奖(uniapp纯代码)
75 0
|
前端开发
前端代码分享——霓虹灯图标菜单特效(内含源码)
前端代码分享——霓虹灯图标菜单特效(内含源码)
|
计算机视觉 Python
【每周一坑】生成九宫格图片
非常简单的功能,但在开发中很常见,很多网页/应用里缩略图都是对图片进行缩放+切割得到的。
|
前端开发
整活系列(二)——整一个好看的毛玻璃登陆页面
昨天刷某站下饭的时候,看见了一个好看的登陆页面,于是昨天晚上用代码实现了一下,今天就拿出来分享给大家。
下一篇
无影云桌面