Как загрузить изображение из Drawable в Jetpack?

Question

Я пробовал приведенный ниже код, но он ничего не отражает в пользовательском интерфейсе, я что-то здесь упускаю?

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            loadUi()
        }
    }

    @Composable
    fun loadUi() {
        CraneWrapper {
            MaterialTheme {
                Image(
                    (ResourcesCompat.getDrawable(
                        resources,
                        R.mipmap.ic_launcher,
                        null
                    ) as BitmapDrawable).bitmap
                )
            }
        }
    }
}

Answer 1

С 1.0.0-alpha01 вы можете использовать imageResource функция:

 Image(asset = imageResource(id = R.drawable.ic_xxxx))

Пример:

Card(modifier = Modifier
           .preferredSize(48.dp)
           .tag("circle"), 
     shape = CircleShape, 
     elevation = 2.dp){

        Image(imageResource(id = R.drawable.xxx),
        contentScale =  ContentScale.Crop,
        modifier = Modifier.fillMaxSize())
    }

Примечание: синхронно загружайте ресурс изображения. Примечание. Этот API временный и, скорее всего, будет удален для поддержки асинхронной загрузки ресурсов.

Answer 2

Начиная с версии 1.0.0-beta01:

      Image(
    painter = painterResource(R.drawable.
    contentDescription = "Content description for visually impaired"
)

Answer 3

Попробуйте этот, но если вы скопируете код, а затем вставите его, я не знаю, почему, но он не сработает, поэтому просто введите его как есть и замените идентификатор изображения

      Image(
painter = painterResource(id = R.drawable.tanjim),
contentDescription = null
)

Answer 4

Работает в 0.1.0-dev14

Загрузка изображения в Image может быть достигнута следующим образом:

Image(
      imageResource(id = R.drawable.scene_01),
      modifier = Modifier.preferredHeightIn(160.dp, 260.dp)
                    .fillMaxWidth(),
      contentScale = ContentScale.Crop
   )

Теперь я пытаюсь загрузить рисунок в Circle Image, который звучит сложно, но слишком просто в JetPack Compose. Таким образом можно добиться:

Image(
         asset = imageResource(id = R.drawable.scene_01),
         modifier = Modifier.drawBackground(
                    color = Color.Black,
                    style = Stroke(4f),
                    shape = CircleShape
          ).preferredSize(120.dp)
                    .gravity(Alignment.CenterHorizontally)
                    .clip(CircleShape),
          contentScale = ContentScale.FillHeight
      )

Выход:

Answer 5

В виде imageResourceбольше не доступен, решения с painterResource действительно верны, например

      Image(painter = painterResource(R.drawable.ic_heart), contentDescription = "content description")

Но вы все равно можете использовать Bitmap вместо drawable, если вам это нужно:

      Image(bitmap = bitmap.asImageBitmap())

.asImageBitmap() - это расширения Bitmap, которые предоставляет compose, и создает ImageBitmap из данного Bitmap.

Answer 6

version = 1.0.0-beta01, используйте painterResource, imageResource был удален.

пример

      Image(
    painterResource(R.drawable.ic_vector_or_png),
    contentDescription = null,
    modifier = Modifier.requiredSize(50.dp)
)

документ разработчика Android

Answer 7

С версией 1.0.0-beta01

Это как ниже

      Image(
painter = painterResource(R.drawable.header),
contentDescription = null
)

Answer 8

@Composable
fun loadUi() {
val image = +imageResource(R.drawable.header)
    CraneWrapper {
        MaterialTheme {
            Container(expanded = true,height = 180.dp) {
                //Use the Clip() function to round the corners of the image
                Clip(shape = RoundedCornerShape(8.dp)) {
                //call DrawImage() to add the graphic to the app
                    DrawImage(image)
                }
            }
        }
    }
}

Answer 9

Я обнаружил, что в AndroidImage.kt есть функция imageFromResource():

fun imageFromResource(res: Resources, resId: Int): Image {
    return AndroidImage(BitmapFactory.decodeResource(res, resId))
}

поэтому ваш код будет:

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        loadUi()
    }
}

@Composable
fun loadUi() {
    CraneWrapper {
        MaterialTheme {
            val image = imageFromResource(resources, R.mipmap.ic_launcher)
            SimpleImage(image)
        }
    }
}

}

Answer 10

Если у тебя естьDrawableнапример, вы можете использовать Accompanist Drawable Painter:

https://google.github.io/accompanist/drawablepainter/

      dependencies {
    implementation("com.google.accompanist:accompanist-drawablepainter:<version>") // TODO: Replace <version> with actual version
}

Пример:

      Image(
    painter = rememberDrawablePainter(drawable = yourDrawable),
    contentDescription = yourContentDescriptionIfAny,
)

Answer 11

Я нашел класс SimpleImage из библиотеки создания пакетов Jetpack для загрузки изображения, но это временное решение, и я пока не нашел ни одного варианта стилизации с этим.

// TODO(Andrey) Temporary. Should be replaced with our proper Image component when it available
@Composable
fun SimpleImage(
    image: Image
) {
    // TODO b132071873: WithDensity should be able to use the DSL syntax
    WithDensity(block = {
        Container(width = image.width.toDp(), height = image.height.toDp()) {
            Draw { canvas, _ ->
                canvas.drawImage(image, Offset.zero, Paint())
            }
        }
    })
}

Я использовал это таким образом

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            loadUi()
        }
    }

    @Composable
    fun loadUi() {
        CraneWrapper {
            MaterialTheme {
                val bitmap = (ResourcesCompat.getDrawable(
                        resources,
                        R.mipmap.ic_launcher,
                        null
                    ) as BitmapDrawable).bitmap
                SimpleImage(Image(bitmap))
            }
        }
    }
}

Тем не менее, я не уверен, что это правильный способ загрузки изображения из объектов.

Answer 12

Google обновил свой API. За0.1.0-dev03 загрузка изображений происходит синхронно и осуществляется таким образом

val icon = +imageResource(R.drawable.ic_xxx)

Чтобы нарисовать изображение

Container(modifier = Height(100.dp) wraps Expanded) {
   DrawImage(icon)
}

В настоящее время в приведенном выше коде требуется указать точную высоту или ширину. Кажется, что масштабирование изображения не поддерживается, если вы хотите, например, высоту 100 dp иwrap_content вместо того Expandedкоторый расширяется на всю ширину. Кто-нибудь знает, как решить эту проблему? Также возможно разместить изображение внутри контейнера, как по старинке.scaleType=fitCenter?