Image

Bir resim: bir fotoğraf, bir çizim, bir logo. PantrixIcon'dan farklı olarak, colorFilter değiştirmedikçe kendi renklerini korur. contentDescription resmi ekran okuyucuya anlatır. Süs olan bir resimde null bırakılır ve resim ekran okuyucudan gizlenir.

import com.pantrixui.components.elements.image.PantrixImage

• Üç kaynak. Bir Painter, bir ImageVector ya da bir ImageBitmap: her biri için bir PantrixImage vardır, öteki parametreleri aynıdır.
• Kendi renkleri. Resim çevresindeki içerik rengine boyanmaz. Renklerini yalnızca colorFilter değiştirir.
• Anlatan ya da süsleyen. contentDescription resmi ekran okuyucuya anlatır. Süs olan resim bunu contentDescription = null ile söyler ve okuyucudan gizlenir.
• Boyut. Boyutu modifier verir. Verilmezse resim kaynağının kendi boyutundadır.
• Sığdırma. contentScale resmin kendisine verilen alana nasıl sığacağını söyler. Varsayılanı Fit'tir: resmin tamamı, oranı korunarak görünür.
• Hizalama. alignment resmin alanın neresinde duracağını söyler; varsayılanı ortasıdır.
• Saydamlık. alpha resmi soluk çizer.
• Örnekleme. ImageBitmap alan biçimde filterQuality, bitmap kendi boyutundan büyük ya da küçük çizilirken nasıl örnekleneceğini söyler.
• Otomasyon. Resim yalnızca tagKey verildiğinde bir test etiketi taşır: tagKey = "logo" için Image_logo.

Örnekler

Bir resim

En yalın hâli: bir Painter ve bir boyut. Resim kendi renkleriyle çizilir ve verilen alana oranını koruyarak sığar.

Açıklama verilmedi: bu resim süstür, ekran okuyucudan gizlenir.

PantrixImage(
    painter = painterResource(Res.drawable.compose_multiplatform),
    modifier = Modifier.size(96.dp),
    contentDescription = "Compose Multiplatform logosu"
)

Kendi boyutunda

Boyut verilmeyen resim kaynağının kendi boyutundadır: bu çizim 450dp'lik bir karedir. Bulunduğu yer daha darsa oranını koruyarak oraya sığar.

Düğmeye bas: resim görünür; yeniden basınca gizlenir.

var showContent by remember { mutableStateOf(false) }
PantrixButton(
    text = if (showContent) "Resmi gizle" else "Resmi göster",
    onClick = { showContent = !showContent },
    tagKey = "toggle_image"
)
AnimatedVisibility(showContent) {
    Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
        PantrixImage(
            painter = painterResource(Res.drawable.compose_multiplatform),
            contentDescription = "Compose Multiplatform logosu",
            tagKey = "compose_logo"
        )
    }
}

Anlatan resim ve süs

contentDescription resmi ekran okuyucuya anlatır: soldaki resim "Compose Multiplatform logosu" diye okunur. Sağdakinin açıklaması null: süs olduğunu söyler ve ekran okuyucudan gizlenir. Bir şey anlatan resme açıklama verilir, yalnızca süsleyen resme null.

Resim yalnızca tagKey verildiğinde bir test etiketi taşır: soldakinin etiketi Image_logo'dur, sağdakinin etiketi yoktur.

Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xl)) {
    PantrixImage(
        painter = painterResource(Res.drawable.compose_multiplatform),
        modifier = Modifier.size(64.dp),
        contentDescription = "Compose Multiplatform logosu",
        tagKey = "logo"
    )
    PantrixImage(
        painter = painterResource(Res.drawable.compose_multiplatform),
        modifier = Modifier.size(64.dp),
        contentDescription = null
    )
}

Sığdırma

contentScale resmin kendisine verilen alana nasıl sığacağını söyler. Üç alan aynı boyda, 120'ye 72 dp; resim karedir.

Fit (varsayılan) resmin tamamını gösterir, yanlarda boşluk kalır. Crop alanı doldurur, taşan üstü ve altı kesilir. FillBounds alanı doldurmak için resmi gerer, oranı bozulur.

Öteki değerler de verilebilir: Inside yalnızca alandan büyük bir resmi küçültür, None resmi hiç ölçeklemez.

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
) {
    listOf(
        "Fit" to ContentScale.Fit,
        "Crop" to ContentScale.Crop,
        "FillBounds" to ContentScale.FillBounds
    ).forEach { (name, scale) ->
        Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xs)) {
            PantrixImage(
                painter = painterResource(Res.drawable.compose_multiplatform),
                modifier = Modifier
                    .size(width = 120.dp, height = 72.dp)
                    .background(PantrixTheme.colors.neutral.container),
                contentScale = scale,
                contentDescription = null
            )
            PantrixText(
                text = name,
                style = PantrixTheme.typography.footnote,
                color = PantrixTheme.colors.textSecondary
            )
        }
    }
}

Hizalama

alignment resmin alanın neresinde duracağını söyler; varsayılanı ortasıdır. Burada resim alana Fit ile sığıyor ve yanlarda yer kalıyor: CenterStart resmi satırın başladığı yana, CenterEnd bittiği yana yaslar.

Crop ile kırpılan bir resimde alignment hangi parçanın görüneceğini seçer.

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
) {
    listOf(
        "CenterStart" to Alignment.CenterStart,
        "Center" to Alignment.Center,
        "CenterEnd" to Alignment.CenterEnd
    ).forEach { (name, alignment) ->
        Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xs)) {
            PantrixImage(
                painter = painterResource(Res.drawable.compose_multiplatform),
                modifier = Modifier
                    .size(width = 120.dp, height = 72.dp)
                    .background(PantrixTheme.colors.neutral.container),
                alignment = alignment,
                contentDescription = null
            )
            PantrixText(
                text = name,
                style = PantrixTheme.typography.footnote,
                color = PantrixTheme.colors.textSecondary
            )
        }
    }
}

Renk süzgeci ve saydamlık

Resim kendi renklerini korur; onları colorFilter değiştirir. Sırayla: resmin kendisi, ColorFilter.tint ile tek bir renge boyanmış hâli, doygunluğu sıfıra indiren bir renk matrisiyle gri tonlu hâli ve alpha = 0.4f ile soluk hâli.

val painter = painterResource(Res.drawable.compose_multiplatform)
val grayscale = remember { ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) }) }
FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
) {
    PantrixImage(painter = painter, modifier = Modifier.size(64.dp), contentDescription = null)
    PantrixImage(
        painter = painter,
        modifier = Modifier.size(64.dp),
        colorFilter = ColorFilter.tint(PantrixTheme.colors.textSecondary),
        contentDescription = null
    )
    PantrixImage(painter = painter, modifier = Modifier.size(64.dp), colorFilter = grayscale, contentDescription = null)
    PantrixImage(painter = painter, modifier = Modifier.size(64.dp), alpha = 0.4f, contentDescription = null)
}

Bir vektörden: ikonla farkı

İkinci biçim bir ImageVector alır ve vektörün kendi renklerini çizer: ilk resim çok renkli bir çizim.

PantrixIcons.Star siyah çizilmiş bir ikondur. PantrixImage onu olduğu gibi, siyah çizer; koyu temada zeminden zor ayrılır. Yanındaki PantrixIcon aynı vektörü bulunduğu yerin içerik rengine boyar. Tek renkli bir işaret PantrixIcon ile, kendi renkleri olan bir çizim PantrixImage ile çizilir; bir resmi boyamak gerekirse colorFilter verilir, sondaki gibi.

Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xl),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixImage(
        imageVector = vectorResource(Res.drawable.compose_multiplatform),
        modifier = Modifier.size(48.dp),
        contentDescription = "Compose Multiplatform logosu"
    )
    PantrixImage(
        imageVector = PantrixIcons.Star,
        modifier = Modifier.size(48.dp),
        contentDescription = "Yıldız, resim olarak",
        tagKey = "star_image"
    )
    PantrixIcon(
        imageVector = PantrixIcons.Star,
        contentDescription = "Yıldız, ikon olarak",
        size = 48.dp,
        tagKey = "star_icon"
    )
    PantrixImage(
        imageVector = PantrixIcons.Star,
        modifier = Modifier.size(48.dp),
        contentDescription = "Yıldız, boyanmış resim olarak",
        colorFilter = ColorFilter.tint(ownColors().color)
    )
}

Bir bitmap'ten ve örnekleme

Üçüncü biçim bir ImageBitmap alır ve kendine ait bir parametresi vardır: filterQuality, bitmap kendi boyutundan büyük ya da küçük çizilirken nasıl örnekleneceğini söyler.

Buradaki bitmap sekize sekiz piksellik bir dama tahtası ve 96dp'ye büyütülüyor. Soldakine FilterQuality.None verildi: pikseller keskin kalır. Sağdaki varsayılanda: pikseller kenarlarında birbirine karışır.

val checkerboard = remember { imageCheckerboard() }
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xl)) {
    PantrixImage(
        bitmap = checkerboard,
        modifier = Modifier.size(96.dp),
        contentDescription = "Dama tahtası, keskin pikseller",
        filterQuality = FilterQuality.None,
        tagKey = "checkerboard_sharp"
    )
    PantrixImage(
        bitmap = checkerboard,
        modifier = Modifier.size(96.dp),
        contentDescription = "Dama tahtası, yumuşatılmış pikseller",
        tagKey = "checkerboard_smooth"
    )
}

private fun imageCheckerboard(): ImageBitmap {
    val bitmap = ImageBitmap(width = 8, height = 8)
    val canvas = Canvas(bitmap)
    val paint = Paint()
    for (row in 0 until 8) {
        for (column in 0 until 8) {
            val dark = (row + column) % 2 == 0
            paint.color = if (dark) PantrixPalette.Violet.shade600 else PantrixPalette.Violet.shade100
            canvas.drawRect(
                left = column.toFloat(),
                top = row.toFloat(),
                right = column + 1f,
                bottom = row + 1f,
                paint = paint
            )
        }
    }
    return bitmap
}

Şekil ve zemin

Resmin şekil, zemin ya da iç boşluk parametresi yoktur: üçünü de modifier verir. Burada clip alanı keser, background kesilen alanı boyar, padding resmi kenarlardan içeri alır.

Soldaki bir daire (shapes.full), sağdaki yuvarlak köşeli bir kare (shapes.lg).

Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xl)) {
    PantrixImage(
        painter = painterResource(Res.drawable.compose_multiplatform),
        modifier = Modifier
            .size(72.dp)
            .clip(PantrixTheme.shapes.full)
            .background(PantrixTheme.colors.neutral.container)
            .padding(PantrixTheme.spacing.md),
        contentDescription = "Compose Multiplatform logosu"
    )
    PantrixImage(
        painter = painterResource(Res.drawable.compose_multiplatform),
        modifier = Modifier
            .size(72.dp)
            .clip(PantrixTheme.shapes.lg)
            .background(PantrixTheme.colors.neutral.container)
            .padding(PantrixTheme.spacing.md),
        contentDescription = "Compose Multiplatform logosu"
    )
}

Bir içeriğin arkasında, süs olarak

Bir başlığın arkasındaki soluk logo gibi: resim yüzeyi fillMaxSize() ile kaplar, ContentScale.Crop taşan kısmını keser, alpha onu yazının arkasında soluk bırakır.

Açıklaması null'dır: süstür, ekran okuyucu yalnızca yazıyı okur.

PantrixSurface(
    modifier = Modifier.widthIn(max = 360.dp).fillMaxWidth().height(120.dp),
    color = PantrixTheme.colors.primary.container,
    shape = PantrixTheme.shapes.lg
) {
    PantrixImage(
        painter = painterResource(Res.drawable.compose_multiplatform),
        modifier = Modifier.fillMaxSize(),
        contentScale = ContentScale.Crop,
        alpha = 0.25f,
        contentDescription = null
    )
    PantrixText(
        text = "Compose Multiplatform",
        modifier = Modifier.align(Alignment.Center),
        style = PantrixTheme.typography.title
    )
}

API

painter

Bir resim: bir fotoğraf, bir çizim, bir logo. PantrixIcon'dan farklı olarak, colorFilter değiştirmedikçe kendi renklerini korur. contentDescription resmi ekran okuyucuya anlatır. Süs olan bir resimde null bırakılır ve resim ekran okuyucudan gizlenir.

imageVector

Bir vektörden PantrixImage.

bitmap

Bir bitmap'ten PantrixImage. filterQuality, bitmap daha büyük ya da daha küçük çizilirken nasıl örnekleneceğini söyler.