Android - 将多张图片合并成一个ImageView

Question

我需要帮助开发（或库），可以让我将多个图像合并成一个图像视图。

我的应用程序将用户之间的交互分组在一起，而不是单独显示它们，因此我想合并所有他们的头像，这样一个适配器单元格就可以可视化“群组”。

Facebook.com聊天上的一个很好的例子如下所示：

我的问题是，如何在Android / Java中提供此功能？可能会有1到4个图像。请告诉我您能给出的任何建议 :)

- Jonty800

Answer 1

您可以使用MultiImageView。

在app.gradle中添加依赖项：

compile 'com.github.stfalcon:multiimageview:0.1'

将MultiImageView添加到布局XML文件中

<com.stfalcon.multiimageview.MultiImageView
    android:id="@+id/iv"
    android:layout_width="100dp"
    android:layout_height="100dp"/>

在Java类中通过ID查找视图：

final MultiImageView multiImageView = (MultiImageView) findViewById(R.id.iv);

要将图像添加到MultiImageView中，请使用addImage(Bitmap bitmap)方法。例如：

multiImageView.addImage(BitmapFactory.decodeResource(getResources(), R.drawable.avatar1));

要设置MultiImageView的形状，请使用setShape(MultiImageView.Shape shape)方法。

multiImageView.setShape(MultiImageView.Shape.RECTANGLE);//Rectangle with round corners
multiImageView.setShape(MultiImageView.Shape.CIRCLE);//Circle
multiImageView.setShape(MultiImageView.Shape.NONE);//Without shape

更多信息请查看github链接：

我认为这就是你需要的东西

- Anton Bevza

---

我在使用那个库时遇到了白线问题（图像之间的白线）。有人找到解决方法了吗？ - Aanal Shah

Answer 2

我知道这是一个老问题，但也许它会帮助其他人。

private Bitmap mergeThemAll(List<Bitmap> orderImagesList) {
    Bitmap result = null;
    if (orderImagesList != null && orderImagesList.size() > 0) {
        // if two images > increase the width only 
        if (orderImagesList.size() == 2)
            result = Bitmap.createBitmap(orderImagesList.get(0).getWidth() * 2, orderImagesList.get(0).getHeight(), Bitmap.Config.ARGB_8888);
        // increase the width and height 
        else if (orderImagesList.size() > 2)
            result = Bitmap.createBitmap(orderImagesList.get(0).getWidth() * 2, orderImagesList.get(0).getHeight() * 2, Bitmap.Config.ARGB_8888);
        else // don't increase anything 
            result = Bitmap.createBitmap(orderImagesList.get(0).getWidth(), orderImagesList.get(0).getHeight(), Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        for (int i = 0; i < orderImagesList.size(); i++) {
            canvas.drawBitmap(orderImagesList.get(i), orderImagesList.get(i).getWidth() * (i % 2), orderImagesList.get(i).getHeight() * (i / 2), paint);
        }
    } else {
        Log.e("MergeError", "Couldn't merge bitmaps");
    }
    return result;
}

- Mohamed Nageh

Answer 3

除了Anton Bevza的回答之外，我还想补充一些内容。

他们的库存在一些缺点，在分支中已经得到了修复。

在app.gradle中添加依赖项：

implementation 'com.github.martipello:MultiImageView:1.0.8.2'

将MultiImageView添加到布局XML文件中。

<com.sealstudios.multiimageview.MultiImageView
        android:id="@+id/iv"
        android:layout_width="100dp"
        android:layout_height="100dp" 
        app:shape="circle" />

要设置MultiImageView的形状，请在布局xml文件中使用属性

app:shape="circle" //Circle
app:shape="rectangle" //Rectangle with round corners
app:shape="none" //Without shape

同时你也可以通过方法改变形状：

multiImageView.setShape(MultiImageView.Shape.RECTANGLE);//Rectangle with round corners
multiImageView.setShape(MultiImageView.Shape.CIRCLE);//Circle
multiImageView.setShape(MultiImageView.Shape.NONE);//Without shape

在Java类中通过ID查找视图：

 final MultiImageView multiImageView = findViewById(R.id.iv);

要向MultiImageView添加图像，请使用addImage（Bitmap bitmap）方法。例如：

multiImageView.addImage(BitmapFactory.decodeResource(getResources(), R.drawable.avatar));
//or
Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), ImageUri);
multiImageView.addImage(bitmap);

- Tamada

Answer 4

您应该将位图重叠到另一个位图上。第一种方法是这样的：

合并位图

您可以通过矩阵、顺序和大小来创建复杂的用户界面。

- encastellano