Question

我想知道Google音乐Play之类的应用如何在1张CardView缩略图中显示4张图像。我尝试获取4张图像并将其处理为单个图像。但是，当我有20行时，这非常慢。另一方面，Google的速度非常快。任何能为我指明正确方向的信息，我将不胜感激。

CardView缩略图如下：

+-----------+
|  1  |  2  |
-------------
|  3  |  4  |
+-----------+

Answer 1

您可以对列表项使用这种布局，并根据需要调整约束。

<android.support.v7.widget.CardView>
    <android.support.constraint.ConstraintLayout>
        <ImageView
            android:id="@+id/iv_1"
            app:layout_constraintStart_toStartOf="prent"
            app:layout_constraintTop_toTopOf="prent"/>

        <ImageView
            android:id="@+id/iv_2"
            app:layout_constraintEnd_toEndOf="prent"
            app:layout_constraintTop_toTopOf="prent"/>

        <ImageView
            android:id="@+id/iv_3"
            app:layout_constraintStart_toStartOf="prent"
            app:layout_constraintTop_toBottomOf="@id/iv_1"/>

        <ImageView
            android:id="@+id/iv_4"
            app:layout_constraintEnd_toEndOf="prent"
            app:layout_constraintTop_toBottomOf="@id/iv_2"/>
    </android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

Answer 2

使用cardview和linearlayout的简单示例

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="300dp"
app:cardUseCompatPadding="true">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:scaleType="center" />


        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:scaleType="center" />

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">


        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorGreen"
            android:scaleType="center" />


        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/status_bar_color"
            android:scaleType="center" />

    </LinearLayout>

</LinearLayout>

屏幕外：

这里使用linearlayout权重将图像width和height均分要了解有关线性布局权重的更多信息，请参见this

要生成缩略图图像，请参见 this或this

代码：

Bitmap resized = ThumbnailUtils.extractThumbnail(sourceBitmap, width, height);

Answer 3

您应该使用Glide Library下载图像。

下载所有图像，下载完所有图像后，制作合并的位图并将其显示到ImageView

activity_main.xml

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="@dimen/image_width"
    android:layout_height="@dimen/image_height"
    app:cardElevation="4dp">
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"/>
</android.support.v7.widget.CardView>

res/values/dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="image_height">300dp</dimen>
    <dimen name="image_width">200dp</dimen>
</resources>

MainActivity.kt

import android.graphics.Bitmap
import android.graphics.Canvas
import android.graphics.drawable.BitmapDrawable
import android.graphics.drawable.Drawable
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.ImageView
import com.bumptech.glide.Glide
import com.bumptech.glide.load.DataSource
import com.bumptech.glide.load.engine.GlideException
import com.bumptech.glide.request.RequestListener
import com.bumptech.glide.request.RequestOptions
import com.bumptech.glide.request.target.Target

class MainActivity : AppCompatActivity() {

    lateinit var imageView : ImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        imageView = findViewById(R.id.image_view)

        val batchBitmap = BatchBitmap()

        val imageUrls = listOf("https://image.tmdb.org/t/p/w92/2uNW4WbgBXL25BAbXGLnLqX71Sw.jpg",
                "https://image.tmdb.org/t/p/w185/mzGNXi8ZxH7Uxkcf0gNlGc5XAA6.jpg",
                "https://image.tmdb.org/t/p/w185/oH1VvlI8P2cpbK2GX4GMcQdK3Gk.jpg",
                "https://image.tmdb.org/t/p/w185/d4qVNJmaFGwctFjkS4RnZ6WPjwp.jpg")

        imageUrls.forEach {
            Glide.with(this)
                    .load(it)
                    .apply(RequestOptions().override(resources.getDimensionPixelSize(R.dimen.image_width)/2,
                            resources.getDimensionPixelSize(R.dimen.image_height)/2))
                    .addListener(object : RequestListener<Drawable> {
                        override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean): Boolean {
                            Log.e("ExampleApp", "failed to fetch image")
                            return false
                        }

                        override fun onResourceReady(resource: Drawable?, model: Any?, target: Target<Drawable?>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean {
                            resource?.let {
                                batchBitmap.addBitmap((resource as BitmapDrawable).bitmap)
                                batchBitmap.getMergedBitmap()?.let {
                                    imageView.setImageBitmap(it)
                                }
                            }

                            return true
                        }

                    })
                    .submit()
        }
    }
}


class BatchBitmap {

    private val bitmaps : MutableList<Bitmap> = mutableListOf()

    fun addBitmap(bitmap: Bitmap) {
        if(bitmaps.size == 4) {
            throw IllegalStateException("Only 4 bitmaps are allowed")
        }
        bitmaps.add(bitmap)
    }

    fun getMergedBitmap(): Bitmap? {
        return if(bitmaps.size == 4){
            val mergedBitmap = Bitmap.createBitmap(bitmaps[0].width.times(2), bitmaps[0].height.times(2), Bitmap.Config.RGB_565)
            val canvas = Canvas(mergedBitmap)

            for(index in bitmaps.indices) {
                val bitmap = bitmaps[index]
                canvas.drawBitmap(bitmaps[index], index.rem(2).times(bitmap.width).toFloat(), index.div(2).toFloat().times(bitmap.height), null)
            }
            return mergedBitmap
        }
        else  null
    }
}

输出

单个CardView中有多个图像

3 个答案: