人人必备的九宫格自定义View（全教程）

见解分享

2024-01-28 06:13:32

前言

九宫格布局是一种常见的图片布局方式，它可以将多张图片排列成网格状，从而在有限的空间内展示更多图片。这种布局方式经常用于社交媒体、电商网站和新闻资讯等场景。

在本文中，我们将学习如何使用ViewGroup自定义一个九宫格View，实现类似于微信朋友圈的图片布局。您将学习到如何使用Java和XML来构建自定义View，以及如何处理图片的加载和布局。

准备工作

在开始之前，您需要确保已经安装了Android Studio并配置好了开发环境。您还需要熟悉Java和XML的基础知识。

创建自定义View

首先，我们需要创建一个自定义View。为此，您可以在Android Studio中创建一个新的项目，然后在app/src/main/java目录下创建一个新的Java类，并命名为NineImageLayout.java。

接下来，您需要在NineImageLayout.java中定义自定义View的类。您可以使用以下代码作为模板：

public class NineImageLayout extends ViewGroup {

    private List<ImageView> imageViews;

    public NineImageLayout(Context context) {
        super(context);
        init(context);
    }

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

    public NineImageLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        imageViews = new ArrayList<>();
        for (int i = 0; i < 9; i++) {
            ImageView imageView = new ImageView(context);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageViews.add(imageView);
            addView(imageView);
        }
    }

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

        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);

        int childWidth = width / 3;
        int childHeight = height / 3;

        for (ImageView imageView : imageViews) {
            imageView.measure(MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY),
                    MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY));
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childWidth = r / 3;
        int childHeight = b / 3;

        for (int i = 0; i < 9; i++) {
            ImageView imageView = imageViews.get(i);
            int left = (i % 3) * childWidth;
            int top = (i / 3) * childHeight;
            int right = left + childWidth;
            int bottom = top + childHeight;
            imageView.layout(left, top, right, bottom);
        }
    }

    public void setImages(List<String> imageUrls) {
        if (imageUrls == null || imageUrls.size() == 0) {
            return;
        }

        for (int i = 0; i < Math.min(imageUrls.size(), 9); i++) {
            String imageUrl = imageUrls.get(i);
            Glide.with(getContext()).load(imageUrl).into(imageViews.get(i));
        }
    }
}

使用自定义View

现在，您已经创建了自定义View，接下来就可以在布局文件中使用它了。您可以将以下代码添加到您的布局文件中：

<com.example.nineimagelayout.NineImageLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

加载图片

最后，您需要在代码中加载图片并设置给自定义View。您可以使用以下代码作为模板：

List<String> imageUrls = new ArrayList<>();
imageUrls.add("https://example.com/image1.jpg");
imageUrls.add("https://example.com/image2.jpg");
imageUrls.add("https://example.com/image3.jpg");

NineImageLayout nineImageLayout = (NineImageLayout) findViewById(R.id.nine_image_layout);
nineImageLayout.setImages(imageUrls);