panyiho / ninegridview

一个九宫格自定义控件，实现类似微信和微博的九宫格图片显示

NineGridLayout

1. 简介

这是一个用于实现像微信朋友圈和微博的类似的九宫格图片展示控件，通过自定义viewgroup实现，是用方便，只需要很简单的就可嵌入到项目中去。

---

2. 使用方法 在项目的layout文件中添加如下xml即可加入到布局文件

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

因为大部分这类控件都是在listview里面用的，所以针对Listview的复用有针对性的优化，只需要在项目中调用NineGridlayout.setImagesData就可以实现图片的加载和显示。同时为了解耦合和，重写了一个CustomImageView嵌入了picasso图片加载库来加载图片。

---

3. 效果展示 由于我用markdown嵌入图片发现大小不能调整，所以如果想要看跟多详情，可以去我的CSDN博客，地址：自定义九宫格控件NineGridLayout ,实现微信朋友圈图片九宫格显示

![效果1][2]

---

4. 协议

/*

• Copyright (C) 2015 panyihong
• 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. */

ninegridview's Issues

测量有问题，不能添加 padding，修改 onMeasure 和onLayout如下

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
    int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
    totalWidth = sizeWidth - getPaddingLeft() - getPaddingRight();
    if (listData != null && listData.size() > 0) {
        int measureWidth, measureHeight;
        int childrenCount = listData.size();
        if (childrenCount == 1) {
            if (!isSmallScreen) {
                singleWidth = ((Photo) listData.get(0)).preview_width;
                singleHeight = ((Photo) listData.get(0)).preview_height;
            } else {
                singleWidth = defaultWidth;
                singleHeight = defaultHeight;
            }
        } else {
            singleWidth = (totalWidth - gap * (3 - 1)) / 3;
            singleHeight = singleWidth;
        }
        measureChildren(MeasureSpec.makeMeasureSpec(singleWidth, MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(singleHeight, MeasureSpec.EXACTLY));
        measureWidth = singleWidth * columns + gap * (columns - 1);
        measureHeight = singleHeight * rows + gap * (rows - 1);
        setMeasuredDimension(sizeWidth, measureHeight);
    }
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    layoutChildrenView();
}

private void layoutChildrenView() {
    int childrenCount = listData.size();
    for (int i = 0; i < childrenCount; i++) {
        int[] position = findPosition(i);
        int left = (singleWidth + gap) * position[1] + getPaddingLeft();
        int top = (singleHeight + gap) * position[0] + getPaddingTop();
        int right = left + singleWidth;
        int bottom = top + singleHeight;
        NineGridImageView childrenView = (NineGridImageView) getChildAt(i);
        if (childrenCount == 1) {
            //只有一张图片
            childrenView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        } else {
            childrenView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        }
        Photo photo = (Photo) listData.get(i);
        if (photo != null) {
            String imageUrl = isSmallScreen ? photo.small_url : photo.middle_url;
            childrenView.setImageUrl(imageUrl);
        }

        final int itemPosition = i;
        childrenView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (onItemClickListerner != null) {
                    onItemClickListerner.onItemClick(v, itemPosition);
                }
            }
        });
        childrenView.layout(left, top, right, bottom);
    }
}

升级版 请看这里 https://github.com/w4lle/NineGridView