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

先来看看效果把

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虚拟机学习心得。

最后编辑于：2018.01.31 16:02:46

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 196,165评论 5赞 462
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 82,503评论 2赞 373
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 143,295评论 0赞 325
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,589评论 1赞 267
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,439评论 5赞 358
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,342评论 1赞 273
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,749评论 3赞 387
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,397评论 0赞 255
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,700评论 1赞 295
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,740评论 2赞 313
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,523评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,364评论 3赞 314
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,755评论 3赞 300
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,024评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,297评论 1赞 251
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,721评论 2赞 342
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,918评论 2赞 336

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

推荐阅读更多精彩内容