Android 自定义ViewGroup显示不同布局的图片

正文

今天我们来自定义一个ViewGroup，让它可以根据图片的数量显示不同的布局

我们在微信逛朋友圈的时候会看到有图片的朋友圈，当只有一张图片的时候，显示是铺满所在区域的，当有9张的时候，是九宫格的形式显示的，那么我们能不能根据图片的数量显示不同的布局呢，比如两张的时候我想让其均分，三张的时候我想一张大图在左，另外两张小图在右，还有其他数量也可以自己想象

你有没有想到用什么方法实现这个需求呢，你可能会想到用不同的布局文件，只要你不嫌麻烦，因为你的布局数量和图片数量是成正比的，所以布局是比较浪费资源的，那有什么好方法吗，当然有，就是我们今天要讲的自定义ViewGroup

正式开始

我们知道ViewGroup是控件的组合，它可以添加View到其内部，我们可以新建一个类并继承ViewGroup

public class VideoLayout extends ViewGroup {

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

    public VideoLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
    }
}

我们重写一个ViewGroup来满足今天的需求其实需要重写onMeasure和onLayout方法，还有一个onDraw方法不用管

我们创建好之后就可以开始编写代码了，下面是完整代码
PostContentLayout.java

package com.yk.mchat.app.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

public class PostContentLayout extends ViewGroup {

    public static final int PIC_ONE = 1;

    public static final int PIC_TWO = 2;

    public static final int PIC_THREE = 3;

    public static final int PIC_FOUR = 4;

    public static final int PIC_FIVE = 5;

    public static final int PIC_SIX = 6;

    public static final int PIC_SEVEN = 7;

    public static final int PIC_EIGHT = 8;

    public static final int PIC_NINE = 9;

    public PostContentLayout(Context context) {
        super(context);
    }

    public PostContentLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int childCount = getChildCount();
        if (childCount == 0) {
            return;
        }
        switch (childCount) {
            case PIC_ONE:
                onMeasureOne(widthMeasureSpec, heightMeasureSpec);
                break;
            case PIC_TWO:
                onMeasureTwo(widthMeasureSpec, heightMeasureSpec);
                break;
            case PIC_THREE:
                onMeasureThree(widthMeasureSpec, heightMeasureSpec);
                break;
            case PIC_FOUR:
                onMeasureFour(widthMeasureSpec, heightMeasureSpec);
                break;
            case PIC_FIVE:
                onMeasureFive(widthMeasureSpec, heightMeasureSpec);
                break;
            case PIC_SIX:
                onMeasureSix(widthMeasureSpec, heightMeasureSpec);
                break;
            case PIC_SEVEN:
                onMeasureSeven(widthMeasureSpec, heightMeasureSpec);
                break;
            case PIC_EIGHT:
                onMeasureEight(widthMeasureSpec, heightMeasureSpec);
                break;
            case PIC_NINE:
                onMeasureNice(widthMeasureSpec, heightMeasureSpec);
                break;
            default:
                break;
        }
    }

    private void onMeasureOne(int widthMeasureSpec, int heightMeasureSpec) {
        View child = getChildAt(0);
        child.measure(widthMeasureSpec, heightMeasureSpec);
    }

    private void onMeasureTwo(int widthMeasureSpec, int heightMeasureSpec) {
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            int childWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 2, MeasureSpec.EXACTLY);
            child.measure(childWidth, heightMeasureSpec);
        }
    }

    private void onMeasureThree(int widthMeasureSpec, int heightMeasureSpec) {
        int childCount = getChildCount();

        View mainChild = getChildAt(0);
        int mainChildWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 2, MeasureSpec.EXACTLY);
        mainChild.measure(mainChildWidth, heightMeasureSpec);

        for (int i = 1; i < childCount; i++) {
            View child = getChildAt(i);
            int childWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 2, MeasureSpec.EXACTLY);
            int childHeight = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec) / 2, MeasureSpec.EXACTLY);
            child.measure(childWidth, childHeight);
        }
    }

    private void onMeasureFour(int widthMeasureSpec, int heightMeasureSpec) {
        int childCount = getChildCount();

        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            int childWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 2, MeasureSpec.EXACTLY);
            int childHeight = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec) / 2, MeasureSpec.EXACTLY);
            child.measure(childWidth, childHeight);
        }
    }

    private void onMeasureFive(int widthMeasureSpec, int heightMeasureSpec) {
        int childCount = getChildCount();

        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            int childWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 2, MeasureSpec.EXACTLY);
            int childHeight = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec) / 2, MeasureSpec.EXACTLY);
            child.measure(childWidth, childHeight);
        }

        for (int i = 2; i < childCount; i++) {
            View child = getChildAt(i);
            int childWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 3, MeasureSpec.EXACTLY);
            int childHeight = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec) / 2, MeasureSpec.EXACTLY);
            child.measure(childWidth, childHeight);
        }
    }

    private void onMeasureSix(int widthMeasureSpec, int heightMeasureSpec) {
        int childCount = getChildCount();

        View mainChild = getChildAt(0);
        int mainChildWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 3 * 2, MeasureSpec.EXACTLY);
        int mainChildHeight = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec) / 3 * 2, MeasureSpec.EXACTLY);
        mainChild.measure(mainChildWidth, mainChildHeight);

        for (int i = 1; i < childCount; i++) {
            View child = getChildAt(i);
            int childWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 3, MeasureSpec.EXACTLY);
            int childHeight = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec) / 3, MeasureSpec.EXACTLY);
            child.measure(childWidth, childHeight);
        }
    }

    private void onMeasureSeven(int widthMeasureSpec, int heightMeasureSpec) {
        int childCount = getChildCount();

        View mainChild = getChildAt(0);
        int mainChildWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 2, MeasureSpec.EXACTLY);
        int mainChildHeight = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec) / 2, MeasureSpec.EXACTLY);
        mainChild.measure(mainChildWidth, mainChildHeight);

        for (int i = 1; i < childCount; i++) {
            View child = getChildAt(i);
            int childWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 2, MeasureSpec.EXACTLY);
            int childHeight = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec) / 4, MeasureSpec.EXACTLY);
            child.measure(childWidth, childHeight);
        }
    }

    private void onMeasureEight(int widthMeasureSpec, int heightMeasureSpec) {
        int childCount = getChildCount();

        View mainChild = getChildAt(0);
        int mainChildWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 4 * 3, MeasureSpec.EXACTLY);
        int mainChildHeight = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec) / 4 * 3, MeasureSpec.EXACTLY);
        mainChild.measure(mainChildWidth, mainChildHeight);

        for (int i = 1; i < childCount; i++) {
            View child = getChildAt(i);
            int childWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 4, MeasureSpec.EXACTLY);
            int childHeight = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec) / 4, MeasureSpec.EXACTLY);
            child.measure(childWidth, childHeight);
        }
    }

    private void onMeasureNice(int widthMeasureSpec, int heightMeasureSpec) {
        int childCount = getChildCount();

        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            int childWidth = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec) / 3, MeasureSpec.EXACTLY);
            int childHeight = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec) / 3, MeasureSpec.EXACTLY);
            child.measure(childWidth, childHeight);
        }
    }

    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
        int childCount = getChildCount();

        if (childCount == 0) {
            return;
        }
        switch (childCount) {
            case PIC_ONE:
                onLayoutOne();
                break;
            case PIC_TWO:
                onLayoutTwo();
                break;
            case PIC_THREE:
                onLayoutThree();
                break;
            case PIC_FOUR:
                onLayoutFour();
                break;
            case PIC_FIVE:
                onLayoutFive();
                break;
            case PIC_SIX:
                onLayoutSix();
                break;
            case PIC_SEVEN:
                onLayoutSeven();
                break;
            case PIC_EIGHT:
                onLayoutEight();
                break;
            case PIC_NINE:
                onLayoutNine();
                break;
            default:
                break;
        }
    }

    private void onLayoutOne() {
        View child = getChildAt(0);
        child.layout(0, 0, child.getMeasuredWidth(), child.getMeasuredHeight());
    }

    private void onLayoutTwo() {
        int childCount = getChildCount();

        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * i, 0, child.getMeasuredWidth() * (i + 1), child.getMeasuredHeight());
        }
    }

    private void onLayoutThree() {
        int childCount = getChildCount();

        View mainChild = getChildAt(0);
        mainChild.layout(0, 0, mainChild.getMeasuredWidth(), mainChild.getMeasuredHeight());

        for (int i = 1; i < childCount; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth(), child.getMeasuredHeight() * (i - 1), child.getMeasuredWidth() * 2, child.getMeasuredHeight() * i);
        }
    }

    private void onLayoutFour() {
        int childCount = getChildCount();

        for (int i = 0; i < 2; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * i, 0, child.getMeasuredWidth() * (i + 1), child.getMeasuredHeight());
        }

        for (int i = 2; i < childCount; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * (i - 2), child.getMeasuredHeight(), child.getMeasuredWidth() * (i - 1), child.getMeasuredHeight() * 2);
        }
    }

    private void onLayoutFive() {
        int childCount = getChildCount();

        for (int i = 0; i < 2; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * i, 0, child.getMeasuredWidth() * (i + 1), child.getMeasuredHeight());
        }

        for (int i = 2; i < childCount; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * (i - 2), child.getMeasuredHeight(), child.getMeasuredWidth() * (i - 1), child.getMeasuredHeight() * 2);
        }
    }

    private void onLayoutSix() {
        int childCount = getChildCount();

        View mainChild = getChildAt(0);
        mainChild.layout(0, 0, mainChild.getMeasuredWidth(), mainChild.getMeasuredHeight());

        for (int i = 1; i < 3; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * 2, child.getMeasuredHeight() * (i - 1), child.getMeasuredWidth() * 3, child.getMeasuredHeight() * i);
        }

        for (int i = 3; i < childCount; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * (i - 3), child.getMeasuredHeight() * 2, child.getMeasuredWidth() * (i - 2), child.getMeasuredHeight() * 3);
        }
    }

    private void onLayoutSeven() {
        int childCount = getChildCount();

        View mainChild = getChildAt(0);
        mainChild.layout(0, 0, mainChild.getMeasuredWidth(), mainChild.getMeasuredHeight());

        for (int i = 1; i < 3; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth(), child.getMeasuredHeight() * (i - 1), child.getMeasuredWidth() * 2, child.getMeasuredHeight() * i);
        }

        for (int i = 3; i < 5; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * (i - 3), child.getMeasuredHeight() * 2, child.getMeasuredWidth() * (i - 2), child.getMeasuredHeight() * 3);
        }

        for (int i = 5; i < childCount; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * (i - 5), child.getMeasuredHeight() * 3, child.getMeasuredWidth() * (i - 4), child.getMeasuredHeight() * 4);
        }
    }

    private void onLayoutEight() {
        int childCount = getChildCount();

        View mainChild = getChildAt(0);
        mainChild.layout(0, 0, mainChild.getMeasuredWidth(), mainChild.getMeasuredHeight());

        for (int i = 1; i < 4; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * 3, child.getMeasuredHeight() * (i - 1), child.getMeasuredWidth() * 4, child.getMeasuredHeight() * i);
        }

        for (int i = 4; i < childCount; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * (i - 4), child.getMeasuredHeight() * 3, child.getMeasuredWidth() * (i - 3), child.getMeasuredHeight() * 4);
        }
    }

    private void onLayoutNine() {
        int childCount = getChildCount();

        for (int i = 0; i < 3; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * i, 0, child.getMeasuredWidth() * (i + 1), child.getMeasuredHeight());
        }

        for (int i = 3; i < 6; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * (i - 3), child.getMeasuredHeight(), child.getMeasuredWidth() * (i - 2), child.getMeasuredHeight() * 2);
        }

        for (int i = 6; i < 9; i++) {
            View child = getChildAt(i);
            child.layout(child.getMeasuredWidth() * (i - 6), child.getMeasuredHeight() * 2, child.getMeasuredWidth() * (i - 5), child.getMeasuredHeight() * 3);
        }
    }
}

里面的方法都写得比较清楚，你可以复制下来，然后试着往这个ViewGroup中addView

今天就到这里。