android 图片跨布局,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

今天就到这里。