仿微信个人相册的一到四张图片的展示效果

先来看看效果把

QQ截图.png

• 怕大家误以为是上传用到的相册，所以赶紧放示例图说明下哈哈。这个控件相当简单，用自定义ViewGroup很轻松实现，即使不会自定义控件的朋友，也能通过几个View的隐藏设置大小来硬实现。这里我们就简单的使用自定义ViewGroup来实现把

---

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.wisdom.childshow.R;

import java.util.List;

/**
 * Created by xyu on 2017/12/19.
 * Describe:仿微信一到四张图片显示
 */

public class FourImagesViewGroup extends ViewGroup {
    /**
     * 图片之间的间隙距离
     */
    private int imagePadding;
    public FourImagesViewGroup(Context context) {
        this(context, null);
    }

     public FourImagesViewGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
        if (attrs != null) {
            TypedArray typedArr = context.obtainStyledAttributes(attrs,
                    R.styleable.FourImagesViewGroup);
            imagePadding = typedArr.getDimensionPixelSize(
                    R.styleable.FourImagesViewGroup_imagePadding, 0);
            typedArr.recycle();
        }
    }

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

    private void layoutChildrens() {
        int contentWidth = getWidth() - getPaddingLeft() - getPaddingRight();
        int contentHeight = getHeight() - getPaddingTop() - getPaddingBottom();
        int childCount = getChildCount();
        View firstChild = getChildAt(0);
        View secondChild = getChildAt(1);
        View thirdChild = getChildAt(2);
        View fouthChild = getChildAt(3);
        switch (childCount) {
            case 1:
                //一张图片时直接占用整个父控件
                firstChild.layout(getLeft(), getTop(), getRight(), getBottom());
                break;
            case 2:
                //两张图片，各占用一半宽度，并计算之间的间隙
                firstChild.layout(getLeft(), getTop(), getRight() - contentWidth / 2 - imagePadding / 2, getBottom());
                secondChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop(), getRight(), getBottom());
                break;
            case 3:
                //三张图片，第一章用一半宽度，第二和第三张使用另外一半宽度，并平分高度，并计算之间的间隙
                firstChild.layout(getLeft(), getTop(), getRight() - contentWidth / 2 - imagePadding / 2, getBottom());
                secondChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop(), getRight(), getBottom() - contentHeight / 2 - imagePadding / 2);
                thirdChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop() + contentHeight / 2 + imagePadding / 2, getRight(), getBottom());
                break;
            case 4:
                //四张图片，每张图片都平分高和宽，并计算之间的间隙
                firstChild.layout(getLeft(), getTop(), getRight() - contentWidth / 2 - imagePadding / 2, getBottom() - contentHeight / 2 - imagePadding / 2);
                secondChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop(), getRight(), getBottom() - contentHeight / 2 - imagePadding / 2);
                thirdChild.layout(getLeft(), getTop() + contentHeight / 2 + imagePadding / 2, getRight() - contentWidth / 2 - imagePadding / 2, getBottom());
                fouthChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop() + contentHeight / 2 + imagePadding / 2, getRight(), getBottom());
                break;
            default:
                break;
        }
    }

*attrs

 <declare-styleable name="FourImagesViewGroup">
        <attr name="imagePadding" format="dimension"/>
    </declare-styleable>

好了，核心代码就这些，imagepadding我们将其提取成可配置属性，它代表了图片之间的间隙距离。可以发现这样的效果使用自定义ViewGroup是非常简单的。我们这个ViewGroup不仅是图片，其他View也可以。这里我倒没考虑其它View了，控件名都已经命名为FourImagesViewGroup了<__<，附上该效果的完整代码

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.wisdom.childshow.R;

import java.util.List;

/**
 * Created by xyu on 2017/12/19.
 * Describe:仿微信一到四张图片显示
 */

public class FourImagesViewGroup extends ViewGroup {
    private ImageLoader mImageLoader;

    /**
     * 图片之间的间隙距离
     */
    private int imagePadding;

    public FourImagesViewGroup(Context context) {
        this(context, null);
    }

    public FourImagesViewGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
        if (attrs != null) {
            TypedArray typedArr = context.obtainStyledAttributes(attrs,
                    R.styleable.FourImagesViewGroup);
            imagePadding = typedArr.getDimensionPixelSize(
                    R.styleable.FourImagesViewGroup_imagePadding, 0);
            typedArr.recycle();
        }
    }

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

    private void layoutChildrens() {
        int contentWidth = getWidth() - getPaddingLeft() - getPaddingRight();
        int contentHeight = getHeight() - getPaddingTop() - getPaddingBottom();
        int childCount = getChildCount();
        View firstChild = getChildAt(0);
        View secondChild = getChildAt(1);
        View thirdChild = getChildAt(2);
        View fouthChild = getChildAt(3);
        switch (childCount) {
            case 1:
                //一张图片时直接占用整个父控件
                firstChild.layout(getLeft(), getTop(), getRight(), getBottom());
                break;
            case 2:
                //两张图片，各占用一半宽度，并计算之间的间隙
                firstChild.layout(getLeft(), getTop(), getRight() - contentWidth / 2 - imagePadding / 2, getBottom());
                secondChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop(), getRight(), getBottom());
                break;
            case 3:
                //三张图片，第一章用一半宽度，第二和第三张使用另外一半宽度，并平分高度，并计算之间的间隙
                firstChild.layout(getLeft(), getTop(), getRight() - contentWidth / 2 - imagePadding / 2, getBottom());
                secondChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop(), getRight(), getBottom() - contentHeight / 2 - imagePadding / 2);
                thirdChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop() + contentHeight / 2 + imagePadding / 2, getRight(), getBottom());
                break;
            case 4:
                //四张图片，每张图片都平分高和宽，并计算之间的间隙
                firstChild.layout(getLeft(), getTop(), getRight() - contentWidth / 2 - imagePadding / 2, getBottom() - contentHeight / 2 - imagePadding / 2);
                secondChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop(), getRight(), getBottom() - contentHeight / 2 - imagePadding / 2);
                thirdChild.layout(getLeft(), getTop() + contentHeight / 2 + imagePadding / 2, getRight() - contentWidth / 2 - imagePadding / 2, getBottom());
                fouthChild.layout(getLeft() + contentWidth / 2 + imagePadding / 2, getTop() + contentHeight / 2 + imagePadding / 2, getRight(), getBottom());
                break;
            default:
                break;
        }
    }


   

    public void setImages(List<Object> imageUrls) {
        if (mImageLoader == null) throw new RuntimeException("请先设置图片加载器");

        if (imageUrls == null) return;
        int newCount = imageUrls.size() > 4 ? 4 : imageUrls.size();
        int childCount = getChildCount();

        //复用一下
        if (childCount > newCount) {
            removeViews(newCount, childCount - newCount);
        } else if (childCount < newCount) {
            for (int i = childCount; i < newCount; i++) {
                ImageView imageView = new ImageView(getContext());
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                addView(imageView);
            }
        }

        for (int i = 0; i < newCount; i++) {
            mImageLoader.loadImage((ImageView) getChildAt(i), imageUrls.get(i));
        }
    }
    /**
     * 图片加载的方式由使用者决定
     * @param imageLoader
     */
    public void setImageLoader(ImageLoader imageLoader) {
        this.mImageLoader = imageLoader;
    }

    /**
     * 图片加载接口
     */
    public interface ImageLoader {
        void loadImage(ImageView iv, Object res);
    }
}

从事开发这么久，一直都没有写过或者分享过什么，这篇文章也是给自己练练笔，以后也会努力分享些干货十足的知识和一些java虚拟机学习心得。