如何实现类似Google Keep的智能缩放无裁剪图片拼贴视图

我太懂你想要Google Keep那种图片拼贴的质感了——智能适配布局、每张图片完整显示不裁剪，用了collageview库没达到预期确实挺闹心的。咱们来一步步解决这个问题：

先试试调整现有库的配置 #

你当前的代码里没设置图片的缩放类型，默认可能是CENTER_CROP（裁剪居中），这就是导致图片被裁剪的核心原因。先看看这个库有没有提供设置缩放类型的API：

如果库支持，直接添加.photoScaleType()配置：

CollageView collageView = (CollageView) findViewById(R.id.collageView);
collageView 
    .photoMargin(1) 
    .photoPadding(3) 
    .backgroundColor(Color.RED) 
    .photoFrameColor(Color.BLUE) 
    .useFirstAsHeader(false) 
    .defaultPhotosForLine(3) 
    .useCards(true)
    // 关键：设置图片完整显示的缩放类型
    .photoScaleType(ImageView.ScaleType.CENTER_INSIDE) 
    .loadPhotos(new int[] {R.drawable.one, R.drawable.three, R.drawable.two, R.drawable.zero});

如果库没有提供这个方法，你可以尝试修改库的源码：找到库中创建ImageView的代码块，手动添加imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);，强制图片完整适配容器。

若现有库无法满足，自定义实现Google Keep的核心逻辑 #

Google Keep的拼贴逻辑不是固定每行数量，而是根据图片宽高比动态调整每行的图片数量和尺寸，保证每行图片高度一致，宽度按比例缩放，从而实现无裁剪、布局紧凑的效果。这里给你一个自定义RecyclerView LayoutManager的思路：

1. 自定义CollageLayoutManager #

public class CollageLayoutManager extends RecyclerView.LayoutManager {
    // 设定每行的基准高度（可根据需求调整）
    private int mRowHeight = dpToPx(160);

    @Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(
                RecyclerView.LayoutParams.WRAP_CONTENT,
                RecyclerView.LayoutParams.WRAP_CONTENT);
    }

    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        if (getItemCount() == 0) {
            detachAndScrapAttachedViews(recycler);
            return;
        }

        detachAndScrapAttachedViews(recycler);

        int currentRowWidth = 0;
        int currentRowTop = 0;

        for (int i = 0; i < getItemCount(); i++) {
            View child = recycler.getViewForPosition(i);
            addView(child);

            // 替换成你实际获取图片宽高比的逻辑（比如从数据源中读取）
            float imageRatio = getImageRatio(i);
            // 根据基准高度计算图片宽度
            int childWidth = (int) (mRowHeight * imageRatio);

            // 如果当前行剩余空间不够，换行
            if (currentRowWidth + childWidth > getWidth()) {
                currentRowTop += mRowHeight;
                currentRowWidth = 0;
            }

            measureChildWithMargins(child, 0, 0);
            // 布局图片位置
            layoutDecorated(child, currentRowWidth, currentRowTop, 
                           currentRowWidth + childWidth, currentRowTop + mRowHeight);

            currentRowWidth += childWidth;
        }
    }

    // 示例：模拟不同图片的宽高比，实际项目中替换为真实图片比例
    private float getImageRatio(int position) {
        float[] ratios = {1.5f, 0.8f, 1.2f, 2.0f, 1.0f};
        return ratios[position % ratios.length];
    }

    private int dpToPx(int dp) {
        return (int) (dp * Resources.getSystem().getDisplayMetrics().density);
    }
}

2. 在RecyclerView中使用并配置ImageView #

// 初始化RecyclerView
RecyclerView collageRecyclerView = findViewById(R.id.collage_recycler);
collageRecyclerView.setLayoutManager(new CollageLayoutManager());
collageRecyclerView.setAdapter(new CollagePhotoAdapter(yourPhotoList));

Adapter中设置ImageView的缩放类型：

public class CollagePhotoAdapter extends RecyclerView.Adapter<CollagePhotoAdapter.ViewHolder> {
    private List<Integer> photoList;
    private Context context;

    public CollagePhotoAdapter(List<Integer> photoList) {
        this.photoList = photoList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        context = parent.getContext();
        ImageView imageView = new ImageView(context);
        // 关键：设置图片完整显示
        imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        imageView.setLayoutParams(new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT));
        return new ViewHolder(imageView);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Glide.with(context).load(photoList.get(position)).into(holder.imageView);
    }

    @Override
    public int getItemCount() {
        return photoList.size();
    }

    static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;

        ViewHolder(ImageView itemView) {
            super(itemView);
            imageView = itemView;
        }
    }
}

这种自定义方式完全可控，能完美复刻Google Keep的无裁剪智能拼贴效果，你可以根据需求调整基准行高、间距等参数。

内容的提问来源于stack exchange，提问作者Cheok Yan Cheng