仿Android微信朋友圈九宫格图片NineGridlayout的使用

端午过去不久,假期还没享受完就急急忙忙来了工作,本来假期前想写这遍文章的,结果一直忙的没空,对于微信朋友圈和微博上传图片大家应该都很熟悉吧,微信几乎是现在广大男女老少的必备,我也是其中一个,,O(∩_∩)O,每天挤着地铁刷刷微博朋友圈看看头条,一小时就默然的过去了。接下来介绍下NineGridlayout、这个控件,相信用到的都不陌生,github 安卓社区上很多这样的Demo,但是在用到的地方还是得根据自己的需求进行修改就好了,切入正题

首先我们来看看效果图

jiu.png
  • 自定义view 继承 ViewGroup,在多张图片的时候根据屏幕进行适配,单张图片时需要自己指定图片的宽高。
    1.大家都知道自定义view的基本过程,这里就省略了,贴出主要的代码
/**  设置图片数据 Image是存放图片的实体<Url、宽和高>*/
private int gap = 5;  //图片之间的间隔
private int columns; //列
private int rows;      //行
private List listData;
private int totalWidth;
//构造方法
public NineGridlayout(Context context, AttributeSet attrs) {    super(context, attrs);    ScreenTools screenTools=ScreenTools.instance(getContext());
    totalWidth=screenTools.getScreenWidth()-screenTools.dip2px(80);
}
public void setImagesData(List<Image> lists) {
    if (lists == null || lists.isEmpty()) {
        return;
    }
   //初始化子布局
    generateChildrenLayout(lists.size());
    //这里做一个重用view的处理
    if (listData == null) {
        int i = 0;
        while (i < lists.size()) {
            CustomImageView iv = generateImageView();
            addView(iv, generateDefaultLayoutParams());
            i++;
        } 
   } else {
        int oldViewCount = listData.size();
        int newViewCount = lists.size();
        if (oldViewCount > newViewCount) { 
           removeViews(newViewCount - 1, oldViewCount - newViewCount);
        } else if (oldViewCount < newViewCount) {
            for (int i = 0; i < newViewCount - oldViewCount; i++) {
                CustomImageView iv = generateImageView();
                addView(iv, generateDefaultLayoutParams());
            }
        }
    }
    listData = lists;
    layoutChildrenView();
}

2.根据图片个数确定行列数量

private void generateChildrenLayout(int length) {
    if (length <= 3) {
        rows = 1;
        columns = length;
    } else if (length <= 6) {
        rows = 2;
        columns = 3;
        if (length == 4) {
            columns = 2;
        }
    } else {
        rows = 3;
        columns = 3;
    }
}

3.设置对应的索引

private int[] findPosition(int childNum) {
    int[] position = new int[2];
    for (int i = 0; i < rows; i++) {        for (int j = 0; j < columns; j++) {            if ((i * columns + j) == childNum) {                position[0] = i;//行                position[1] = j;//列                break;            }        }    }    return position;}

4.计算子view的位置

private void layoutChildrenView(){
    int childrenCount = listData.size();
    int singleWidth = (totalWidth - gap * (3 - 1)) / 3;
    int singleHeight = singleWidth;
   //根据子view数量确定高度
    ViewGroup.LayoutParams params = getLayoutParams();
    params.height = singleHeight * rows + gap * (rows - 1);
    setLayoutParams(params);
    for (int i = 0; i < childrenCount; i++) {
        CustomImageView childrenView = (CustomImageView) getChildAt(i);
        childrenView.setImageUrl(((Image) listData.get(i)).getUrl());
        int[] position = findPosition(i);
        int left = (singleWidth + gap) * position[1];
        int top = (singleHeight + gap) * position[0];
        int right = left + singleWidth;
        int bottom = top + singleHeight;
        childrenView.layout(left, top, right, bottom);
    }

5.在布局中使用

<com.lukey.ninegridlayout.NineGridlayout
    android:id="@+id/nine_gd_layout"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginTop="8dp"/>

6.在MainActivity 设置数据的时候 9条朋友圈对应就9张图片, images.length是图片数组的数 据源,demo上的图片来源于网络

for (int i = 0; i < images.length; i++) {    ArrayList<Image> itemList = new ArrayList<>();    for (int j = 0; j <= i; j++) {        itemList.add(new Image(images[j][0], Integer.parseInt(images[j][1]), Integer.parseInt(images[j][2])));    }    imagesList.add(itemList);}
  • 主要的代码自定义view就是这么多了,在调用的时候咱们还得用图片进行赋值自定义的图片,CustomImageView是自定义的图片view,大家也可以用fresco,或者ImageView,当然了这个没有定制性的规定只是实现出这个效果就O了。需要完整demo的朋友可以留言
  • 下面是几个反鸡汤语录,有兴趣的朋友可以看看,平时喜欢段子和优雅的心灵鸡汤,看看就好

有时候你不逼自己一把,你就不知道你还有把事情搞砸的本事。
掉落枯井的王老汉在热心村民们的帮助之下总算适应了井底生活。
真正努力过的人,就会明白天赋的重要。
上帝是公平的,给了一张丑脸,当然也会给你一个矮的身高来搭配。
还是要努力的,不然有时候不努力一把你就不知道什么叫绝望。
以前车马信件都很慢,书信很远,一生只够爱一个人,但……能纳很多妾……
为什么别人看你一眼就觉得你是学生?不是因为你长得小,而是因为你穿的土。
朋友遭遇挫折后,如果他茶饭不思,不要太担心,这说明他还在思考问题。如果他暴饮暴食,那就要小心了,这种破罐子破摔的人,跳楼都是小事,就怕他偷你零食。
沉默,沉默是今晚的康桥,赵州桥,郑板桥。
一路上有你,苦一点也愿意。苦多了免谈。

  • 努力真的有回报,如果暂时没有,只是努力不够。
  • Github源码
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容

  • 背景 一年多以前我在知乎上答了有关LeetCode的问题, 分享了一些自己做题目的经验。 张土汪:刷leetcod...
    土汪阅读 12,723评论 0 33
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,577评论 18 399
  • 一、 1、请用Java写一个冒泡排序方法 【参考答案】 public static void Bubble(int...
    独云阅读 1,346评论 0 6
  • 贪心算法 贪心算法总是作出在当前看来最好的选择。也就是说贪心算法并不从整体最优考虑,它所作出的选择只是在某种意义上...
    fredal阅读 9,202评论 3 52
  • 2017.8.14 21:11 早上闹钟响了,感觉眼皮很沉,不想起床,膝盖因为昨天的跪膝,今天早上感觉到有些疼痛,...
    鑫漫阅读 244评论 0 0