android Compose UI Image 如何显示 drawable

Compose UI 的 Image 是不具体直接显示 Drawable 的能力, 需要通过某种转换才能得到

解决方案

以下代码展示了如何将 drawble 转换成 Image 能接受的类型 ImageBitmap

@Composable
fun AdaptiveIconImage(drawable: Drawable, modifier: Modifier) {
    val bitmap = Bitmap.createBitmap(
        drawable.intrinsicWidth,
        drawable.intrinsicHeight,
        Bitmap.Config.ARGB_8888
    )
    val canvas = Canvas(bitmap)
    drawable.setBounds(0, 0, canvas.width, canvas.height)
    drawable.draw(canvas)
    val imageBitmap = remember { bitmap.asImageBitmap() }
    Image(
        bitmap = imageBitmap,
        modifier = modifier,
        contentDescription = "Adaptive Icon Image"
    )
}

应用场景

这个例子展示了 Drawable 在 Compose UI Image 显示的应用场景

完整代码

package com.atoto.steeringwheel.ui

import android.app.Activity
import android.content.Intent
import android.content.pm.ApplicationInfo
import android.content.pm.PackageManager
import android.graphics.Bitmap
import android.graphics.Canvas
import android.graphics.drawable.Drawable
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.flow.flow
import java.io.Serializable

class FunctionListActivity: ComponentActivity() {

    companion object {
        fun start(activity: Activity, title:String, requestCode:Int) {
            activity.startActivityForResult(Intent(activity, FunctionListActivity::class.java).putExtra("title", title), requestCode)
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Scaffold(modifier = Modifier.fillMaxSize(),
                topBar = {
                    TopAppBar(title = { Text(text = intent.getStringExtra("title")?:"") },
                        navigationIcon = {
                            IconButton(onClick = { finish() }) {
                                Icon(Icons.Default.ArrowBack, contentDescription = "Back")
                            }
                        })
                }) { innerPadding ->
                FunctionList(modifier = Modifier.padding(innerPadding))
            }
        }
    }

    @Composable
    private fun FunctionList(modifier: Modifier) {
        val listData = remember {
            mutableStateListOf<FunctionItem>()
        }
        val loading = remember {
            mutableStateOf(true)
        }
        Box(modifier = modifier.fillMaxSize()) {
            LazyColumn(contentPadding = PaddingValues(horizontal = 5.dp), verticalArrangement = androidx.compose.foundation.layout.Arrangement.spacedBy(5.dp)) {
                items(listData) { item ->
                    Row(Modifier.fillParentMaxWidth().clickable {
                        val intent = Intent().apply {
                            putExtra("data", item)
                        }
                        setResult(RESULT_OK, intent)
                        finish()
                    }, verticalAlignment = Alignment.CenterVertically) {
                        AdaptiveIconImage(item.icon, modifier = Modifier.size(50.dp))
                        Text(text = item.title, modifier = Modifier.padding(start = 10.dp))
                    }
                }
            }
            if (loading.value) {
                Text(text = "加载中", color = Color.Black, modifier = Modifier.align(Alignment.Center))
            }
        }
        if (listData.isEmpty()) {
            LaunchedEffect(key1 = "FunctionList") {
                flow<List<FunctionItem>> {
                    val resultList = arrayListOf<FunctionItem>()
                    val packageManager = packageManager
                    val packages = packageManager.getInstalledApplications(PackageManager.GET_META_DATA)
                    val nonSystemApps = packages.filter { appInfo ->
                        (appInfo.flags and ApplicationInfo.FLAG_SYSTEM) != 1
                    }
                    for (packageInfo in nonSystemApps) {
                        val appName = packageManager.getApplicationLabel(packageInfo).toString()
                        val appIcon = packageManager.getApplicationIcon(packageInfo)
                        val packageName = packageInfo.packageName
                        resultList.add(FunctionItem(icon = appIcon, title = appName, packageName = packageName))
                    }
                    emit(resultList)
                }.collect {
                    loading.value = false
                    listData.addAll(it)
                }
            }
        }
    }


    @Composable
    fun AdaptiveIconImage(drawable: Drawable, modifier: Modifier) {
        val bitmap = Bitmap.createBitmap(
            drawable.intrinsicWidth,
            drawable.intrinsicHeight,
            Bitmap.Config.ARGB_8888
        )
        val canvas = Canvas(bitmap)
        drawable.setBounds(0, 0, canvas.width, canvas.height)
        drawable.draw(canvas)
        val imageBitmap = remember { bitmap.asImageBitmap() }
        Image(
            bitmap = imageBitmap,
            modifier = modifier,
            contentDescription = "Adaptive Icon Image"
        )
    }
}

data class FunctionItem(val title: String,
                        @Transient val icon:Drawable,
                        val packageName:String):Serializable