Icon

Bir ikon: kenarı size olan bir karedir ve tek renkle çizilir. Bu renk tint'tir, o verilmezse ikonun durduğu yerin içerik rengidir, örneğin bir düğmenin etiket rengi. contentDescription ekran okuyucu için ikonun adıdır. Yanındaki bir etiket ne anlama geldiğini zaten söylüyorsa null verilir ve ikon ekran okuyucudan gizlenir.

import com.pantrixui.components.elements.icon.PantrixIcon

Üç kaynak. Bir vektör (imageVector), bir bitmap (bitmap) ya da herhangi bir painter: üçü de aynı boyutta ve tek renkle çizilir.
Boyut. size ikonun genişliği ve yüksekliğidir; verilmezse temanın IconStyle'ındaki boyut, her platformda 24dp. Kaynağın kendi boyutu ne olursa olsun ikon bu boyutta çizilir.
Renk. tint verilmeyen ikon durduğu yerin içerik rengini alır: bir düğmenin etiketinin rengini, devre dışı bir kontrolün soluk rengini. Hiçbir şeyin renk vermediği yerde temanın onSurface rengiyle çizilir.
Kütüphanenin ikonları. PantrixIcons bileşenlerin kendi ikonlarını ve bir uygulamanın ekranları için birkaçını taşır: 24 birimlik ızgarada, 2 birim kalınlığında, uçları ve köşeleri yuvarlak çizgiler.
Sağdan sola. Geriyi ve ileriyi gösteren altı ikon sağdan sola düzende aynalanır: ChevronBack, ChevronForward, FirstPage, LastPage, ArrowBack ve ArrowForward. Ötekiler her dilde aynı çizilir.
Otomasyon. tagKey verilen ikon Icon_<tagKey> etiketini taşır. Anahtar verilmeyen ikon etiketlenmez.

Örnekler

Süs olan ve adı olan ikon

En az yazılan hâli: bir vektör ve contentDescription. Açıklamanın varsayılanı yoktur, her ikonda yazılır.

İlk satırda ikonun yanında ne olduğunu söyleyen bir etiket var. İkon süstür: contentDescription = null verildi ve ekran okuyucudan gizlendi, okuyucu yalnızca "Kaydedildi" der. İkinci satırdaki ikon tek başına durur ve anlamı kendisi taşır: açıklaması "Uyarı"dır, okuyucu onu okur. Açıklama ikonun neye benzediğini değil, ne dediğini söyler.

Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixIcon(imageVector = PantrixIcons.Check, contentDescription = null)
    PantrixText(text = "Kaydedildi")
}
PantrixIcon(imageVector = PantrixIcons.Warning, contentDescription = "Uyarı", tagKey = "alert")

Boyutlar

size ikonun genişliği ve yüksekliğidir: 16, 20, 24, 32 ve 48 dp. Ortadaki ikona boyut verilmedi: temanın ikon stilindeki boyuttadır, her platformda 24dp.

İkon, kaynağının kendi boyutu ne olursa olsun bu boyutta çizilir. Çizgisi ızgarasına göredir, 24 birimde 2 birim: ikonla birlikte kalınlaşır ve incelir.

Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixIcon(imageVector = PantrixIcons.Star, contentDescription = null, size = 16.dp, tagKey = "size_16")
    PantrixIcon(imageVector = PantrixIcons.Star, contentDescription = null, size = 20.dp, tagKey = "size_20")
    PantrixIcon(imageVector = PantrixIcons.Star, contentDescription = null, tagKey = "size_default")
    PantrixIcon(imageVector = PantrixIcons.Star, contentDescription = null, size = 32.dp, tagKey = "size_32")
    PantrixIcon(imageVector = PantrixIcons.Star, contentDescription = null, size = 48.dp, tagKey = "size_48")
}

Renk ve durduğu yerin rengi

İlk satır: renk verilmeyen ikon sayfada temanın onSurface rengiyle çizilir; tint ona bir rolün rengini verir.

İkinci satırdaki ikonların hiçbirine tint verilmedi. Her biri durduğu yerin içerik rengini aldı: primary ile doldurulmuş bir yüzeyde o dolgunun üstünde okunan rengi, bir düğmenin içinde etiketin rengini, devre dışı bir düğmede onun soluk rengini.

val colors = PantrixTheme.colors
val spacing = PantrixTheme.spacing
Row(horizontalArrangement = Arrangement.spacedBy(spacing.lg)) {
    PantrixIcon(imageVector = PantrixIcons.Info, contentDescription = null)
    PantrixIcon(imageVector = PantrixIcons.Info, contentDescription = null, tint = colors.info.color)
    PantrixIcon(imageVector = PantrixIcons.Success, contentDescription = null, tint = colors.success.color)
    PantrixIcon(imageVector = PantrixIcons.Warning, contentDescription = null, tint = colors.warning.color)
    PantrixIcon(imageVector = PantrixIcons.Error, contentDescription = null, tint = colors.danger.color)
}
FlowRow(
    horizontalArrangement = Arrangement.spacedBy(spacing.md),
    verticalArrangement = Arrangement.spacedBy(spacing.sm),
    itemVerticalAlignment = Alignment.CenterVertically
) {
    PantrixSurface(color = colors.primary.color) {
        PantrixIcon(
            imageVector = PantrixIcons.Inbox,
            contentDescription = null,
            modifier = Modifier.padding(spacing.sm),
            tagKey = "on_a_fill"
        )
    }
    PantrixButton(
        text = "Yenile",
        onClick = {},
        leadingIcon = { PantrixIcon(imageVector = PantrixIcons.Refresh, contentDescription = null) },
        tagKey = "refresh"
    )
    PantrixButton(
        text = "Yenile",
        onClick = {},
        enabled = false,
        leadingIcon = { PantrixIcon(imageVector = PantrixIcons.Refresh, contentDescription = null) },
        tagKey = "refresh_disabled"
    )
}

Üç kaynak: vektör, bitmap, painter

Üç kaynak, aynı boyutta ve aynı renkte: bir vektör, bir bitmap ve bir painter. Bitmap burada kodla çizildi; bir uygulamada bir kaynaktan ya da bir görsel yükleyiciden gelir.

Üçüncü ikonun kaynağı Compose Multiplatform'un çok renkli logosudur. PantrixIcon onu tek renge boyar ve kendi boyutuna getirir. Yanındaki, aynı kaynağın PantrixImage ile çizilmiş hâlidir: resim kendi renklerini korur.

val bitmap = remember { targetBitmap() }
val logo = painterResource(Res.drawable.compose_multiplatform)
Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixIcon(imageVector = PantrixIcons.Star, contentDescription = null, size = 32.dp, tagKey = "vector")
    PantrixIcon(bitmap = bitmap, contentDescription = null, size = 32.dp, tagKey = "bitmap")
    PantrixIcon(painter = logo, contentDescription = null, size = 32.dp, tagKey = "painter")
    PantrixImage(painter = logo, modifier = Modifier.size(32.dp), contentDescription = null)
}

private fun targetBitmap(): ImageBitmap {
    val bitmap = ImageBitmap(width = 96, height = 96)
    val canvas = Canvas(bitmap)
    val ring = Paint().apply {
        style = PaintingStyle.Stroke
        strokeWidth = 8f
    }
    canvas.drawCircle(center = Offset(48f, 48f), radius = 36f, paint = ring)
    canvas.drawCircle(center = Offset(48f, 48f), radius = 12f, paint = Paint())
    return bitmap
}

Sağdan sola aynalanan ikonlar

Geriyi ve ileriyi gösteren ikonlar okuma yönünü izler: sağdan sola bir düzende aynalanırlar. Arama merceği ve oynatma üçgeni aynalanmaz: her dilde aynı çizilirler.

İki satırda da aynı altı ikon aynı sırayla yazıldı. İkinci satır sağdan sola düzendedir: ikonlar sağdan sola dizilir ve oklar ters yöne bakar; arama ve oynatma ikonları ise olduğu gibi çizilir.

DirectionalIcons()
CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
    DirectionalIcons()
}

@Composable
private fun DirectionalIcons() {
    Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg)) {
        PantrixIcon(imageVector = PantrixIcons.ArrowBack, contentDescription = "Geri")
        PantrixIcon(imageVector = PantrixIcons.ChevronBack, contentDescription = "Önceki")
        PantrixIcon(imageVector = PantrixIcons.ChevronForward, contentDescription = "Sonraki")
        PantrixIcon(imageVector = PantrixIcons.ArrowForward, contentDescription = "İleri")
        PantrixIcon(imageVector = PantrixIcons.Search, contentDescription = "Ara")
        PantrixIcon(imageVector = PantrixIcons.Play, contentDescription = "Oynat")
    }
}

Bütün ikonlar

PantrixIcons'taki bütün ikonlar, adlarıyla. Ad kodda yazıldığı gibidir: PantrixIcons.Check. Altında "aynalanır" yazanlar sağdan sola düzende ters çevrilir; bu bilgi ikonun kendisinden, autoMirror alanından okunur.

Adları altlarında yazdığı için ikonlar süstür ve ekran okuyucudan gizlidir.

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg)
) {
    ALL_ICONS.forEach { icon ->
        Column(
            modifier = Modifier.width(104.dp),
            verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xs),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            PantrixIcon(imageVector = icon, contentDescription = null, tagKey = icon.name)
            PantrixText(
                text = icon.name,
                style = PantrixTheme.typography.caption,
                textAlign = TextAlign.Center,
                maxLines = 1
            )
            if (icon.autoMirror) {
                PantrixText(
                    text = "aynalanır",
                    style = PantrixTheme.typography.caption,
                    color = PantrixTheme.colors.textSecondary
                )
            }
        }
    }
}

private val ALL_ICONS = listOf(
    PantrixIcons.Check,
    PantrixIcons.Close,
    PantrixIcons.ChevronDown,
    PantrixIcons.ChevronForward,
    PantrixIcons.ChevronBack,
    PantrixIcons.FirstPage,
    PantrixIcons.LastPage,
    PantrixIcons.ArrowBack,
    PantrixIcons.ArrowForward,
    PantrixIcons.Calendar,
    PantrixIcons.Refresh,
    PantrixIcons.ZoomOut,
    PantrixIcons.ZoomIn,
    PantrixIcons.MoreHorizontal,
    PantrixIcons.Minus,
    PantrixIcons.Menu,
    PantrixIcons.Plus,
    PantrixIcons.Info,
    PantrixIcons.Success,
    PantrixIcons.Warning,
    PantrixIcons.Error,
    PantrixIcons.Inbox,
    PantrixIcons.Star,
    PantrixIcons.Folder,
    PantrixIcons.Person,
    PantrixIcons.Search,
    PantrixIcons.Download,
    PantrixIcons.Upload,
    PantrixIcons.File,
    PantrixIcons.Copy,
    PantrixIcons.Eye,
    PantrixIcons.EyeOff,
    PantrixIcons.Pause,
    PantrixIcons.Play
)

Stille varsayılan boyut

İkonun boyutu bir parametre değil, stilidir: IconStyle boyut verilmeyen ikonun boyutunu taşır. ProvidePantrixStyles onu ağacın bir bölümü için değiştirir; PantrixTheme'in styles parametresi uygulamanın tamamı için. Burada ilk ikon boyutunu stilden alır, ikincisine size verildi: parametre stilin üstündedir.

val styles = remember { pantrixStyles(IconStyle.override(all = IconStyle(size = 32.dp))) }
ProvidePantrixStyles(styles = styles) {
    Row(
        horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
        verticalAlignment = Alignment.CenterVertically
    ) {
        PantrixIcon(imageVector = PantrixIcons.Star, contentDescription = null)
        PantrixIcon(imageVector = PantrixIcons.Star, contentDescription = null, size = 16.dp)
    }
}

API

imageVector

Parametre	Tür	Varsayılan	Ne olduğu
`imageVector`	`ImageVector`		ikonun resmi: `PantrixIcons`'tan biri ya da uygulamanın bir vektörü.
`contentDescription`	`String?`
`modifier`	`Modifier`	`Modifier`	ikonun modifier'ı.
`size`	`Dp`	`PantrixTheme.style(key = IconStyle).size`
`tint`	`Color`	`Color.Unspecified`
`tagKey`	`String?`	`null`	ikonun otomasyon anahtarı: ikon `Icon_<tagKey>`'dır. Anahtar yoksa etiketi olmaz.

bitmap

Bir bitmap'ten PantrixIcon: vektör alan biçim gibi size boyutunda ve tek renkle çizilir.

Parametre	Tür	Varsayılan	Ne olduğu
`bitmap`	`ImageBitmap`		ikonun resmi, bir bitmap: bütünüyle boyandığı için saydam bir zemin üstünde tek renkli bir şekil olmalı.
`contentDescription`	`String?`		ekran okuyucunun ikona verdiği ad, ya da yanındaki bir etiket ne anlama geldiğini zaten söylüyorsa null; o zaman ikon ekran okuyuculardan gizlenir.
`modifier`	`Modifier`	`Modifier`	ikonun modifier'ı.
`size`	`Dp`	`PantrixTheme.style(key = IconStyle).size`
`tint`	`Color`	`Color.Unspecified`	ikonun rengi, yoksa durduğu yerin içerik rengi.
`tagKey`	`String?`	`null`	ikonun otomasyon anahtarı: ikon `Icon_<tagKey>`'dır. Anahtar yoksa etiketi olmaz.

painter

Herhangi bir painter'dan PantrixIcon: painter'ın kendi boyutu ne olursa olsun size boyutunda ve tek renkle çizilir.

Parametre	Tür	Varsayılan	Ne olduğu
`painter`	`Painter`		ikonun resmi, herhangi bir painter'dan: bütünüyle boyanır.
`contentDescription`	`String?`		ekran okuyucunun ikona verdiği ad, ya da yanındaki bir etiket ne anlama geldiğini zaten söylüyorsa null; o zaman ikon ekran okuyuculardan gizlenir.
`modifier`	`Modifier`	`Modifier`	ikonun modifier'ı.
`size`	`Dp`	`PantrixTheme.style(key = IconStyle).size`
`tint`	`Color`	`Color.Unspecified`	ikonun rengi, yoksa durduğu yerin içerik rengi.
`tagKey`	`String?`	`null`	ikonun otomasyon anahtarı: ikon `Icon_<tagKey>`'dır. Anahtar yoksa etiketi olmaz.

Erişilebilirlik

Ekran okuyucu. contentDescription her ikonda verilen bir karardır: bir söz verilirse okuyucu onu okur; yanındaki etiket ne olduğunu zaten söylüyorsa null verilir ve ikon okuyucudan gizlenir.