Auto Text

Görünür kalmak için küçülen metin: kendisine verilen yerde bütünüyle okunan bir tutar, bir başlık ya da bir ad.

import com.pantrixui.components.elements.autotext.PantrixAutoText

• Tek satır. Aksi söylenmedikçe metin tek satırdır (maxLines = 1) ve verilen genişliğe sığdırılır.
• Birden çok satır. maxLines büyütülünce metin önce satırlara bölünür, satırlar yetmeyince küçülür. Küçülen metnin satırları da birbirine o kadar yaklaşır: satır yüksekliği yazının boyutunu izler.
• Kutusuna sığan metin. maxLines = Int.MAX_VALUE satır sayısını yüksekliğe bırakır: metin verilen genişliğe ve yüksekliğe birlikte sığdırılır.
• En küçük boyut. Metin minFontSize'a inince küçülmeyi bırakır ve sığmayan kısmı overflow'un dediği gibi kesilir. Verilmezse temanın footnote boyutudur; sp ile ya da stilin boyutunun payı olarak em ile verilir.
• Sığacağı yer. Metne bir genişlik verilmelidir: fillMaxWidth(), bir weight ya da bir boyut; satır sayısı serbestse bir yükseklik de. Önüne istediği kadar genişlik konan metin hiç küçülmez.
• Biçimli metin. AnnotatedString alan ikinci bir PantrixAutoText vardır. Bir parçanın em ile verilen boyutu metinle birlikte küçülür; sp ile verilen olduğu gibi kalır.
• İlk karede. Boyut metin yerleştirilirken bulunur: metin ilk karede de sığmış hâliyle çizilir.
• Otomasyon. tagKey verilen metin AutoText_<tagKey> etiketini taşır. Anahtar verilmeyen metin etiketlenmez.

Örnekler

Yerine sığan metin

Aynı ad, giderek daralan üç yerde, title stiliyle. Yeri yettiği sürece metin stilinin boyutundadır. Yetmeyince tek satırda, bütünü görünecek en büyük boyuta iner. En küçük boyutunda, temanın footnote boyutunda da sığmazsa küçülmeyi bırakır ve sığmayan kısmı üç noktayla kesilir.

Yeri metne modifier verir: burada bir genişlik. Gri zemin o yeri gösterir.

val name = "Selim Karaosmanoğlu"
val room = PantrixTheme.colors.neutral.container
PantrixAutoText(
    text = name,
    modifier = Modifier.width(320.dp).background(room),
    style = PantrixTheme.typography.title,
    tagKey = "name_wide"
)
PantrixAutoText(
    text = name,
    modifier = Modifier.width(160.dp).background(room),
    style = PantrixTheme.typography.title,
    tagKey = "name_narrow"
)
PantrixAutoText(
    text = name,
    modifier = Modifier.width(72.dp).background(room),
    style = PantrixTheme.typography.title,
    tagKey = "name_narrowest"
)

Tek satırda küçülen bakiye

En büyük stilde bir bakiye. "Hane ekle" tutarı uzatır: tutar satıra sığdığı sürece stilinin boyutundadır, sığmayınca tek satırda kalacak kadar küçülür; "Hane sil" ile yeniden büyür. Altındaki soluk satır aynı metnin küçülmeyen hâlidir, bir PantrixText: sığmayınca kesilir.

Kuruş ve para birimi tutarın yarı boyutundadır. Boyutları em ile verildi: çevresindeki yazının payıdır, tutar küçülünce onunla birlikte küçülür ve her platformda yarısı kadar kalır.

var digits by rememberSaveable { mutableIntStateOf(4) }
val balance = buildAnnotatedString {
    append("1".padEnd(digits, '0').groupedInThousands())
    withStyle(SpanStyle(fontSize = 0.5.em)) { append(",00 TL") }
}
PantrixAutoText(
    text = balance,
    modifier = Modifier.fillMaxWidth(),
    style = PantrixTheme.typography.display,
    tagKey = "balance"
)
PantrixText(
    text = balance,
    style = PantrixTheme.typography.display,
    color = PantrixTheme.colors.textSecondary,
    maxLines = 1,
    tagKey = "balance_cut"
)
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixButton(
        text = "Hane ekle",
        onClick = { digits++ },
        enabled = digits < 24,
        tagKey = "add_digit"
    )
    PantrixButton(
        text = "Hane sil",
        onClick = { digits-- },
        variant = ButtonVariant.Outline,
        enabled = digits > 1,
        tagKey = "remove_digit"
    )
}

private fun String.groupedInThousands(): String = reversed().chunked(3).joinToString(".").reversed()

En çok iki satırda bir başlık

En çok iki satıra sığdırılan bir başlık: maxLines = 2. Metin önce iki satıra bölünür; iki satır yetmeyince küçülür ve satır aralığı da yazıyla birlikte daralır. minFontSize temanın body boyutudur: başlık ondan küçük yazılmaz, orada da sığmazsa üç noktayla kesilir.

Küçülse de bir başlıktır: role = TextRole.Heading(level = 2) ekran okuyucuya öyle bildirilir. Sütun en fazla 420dp genişliğindedir, başlık onu doldurur.

Column(modifier = Modifier.widthIn(max = 420.dp)) {
    PantrixAutoText(
        text = "Kredi kartı ekstreniz kesildi: son ödeme tarihi ayın yirmi sekizi",
        modifier = Modifier.fillMaxWidth(),
        style = PantrixTheme.typography.headline,
        minFontSize = PantrixTheme.typography.body.fontSize,
        maxLines = 2,
        role = TextRole.Heading(level = 2),
        tagKey = "statement_title"
    )
}

Kutusuna sığan paragraf

Yüksekliği belli bir kutuya sığdırılan bir paragraf. maxLines = Int.MAX_VALUE satır sayısını kutunun yüksekliğine bırakır: metin, stilinin boyutunu aşmadan, 96dp'lik kutunun genişliğine ve yüksekliğine birlikte sığacak en büyük boyutta yazılır. Pencereyi daralt: kutu daraldıkça yazı küçülür.

Kutunun zemini ve iç boşluğu metnin kendi modifier'ındadır; metin, boşluktan kalan yere sığdırılır.

PantrixAutoText(
    text = "Bir tasarım sistemi, aynı kararı her ekranda yeniden vermemek için vardır: bir kez verilir, her " +
        "yerde aynı görünür.",
    modifier = Modifier
        .fillMaxWidth()
        .height(96.dp)
        .background(PantrixTheme.colors.neutral.container)
        .padding(PantrixTheme.spacing.sm),
    style = PantrixTheme.typography.title,
    textAlign = TextAlign.Center,
    maxLines = Int.MAX_VALUE,
    tagKey = "quote"
)

En küçük boyut

Aynı metin, aynı 200dp'lik yerde üç kez; yalnızca minFontSize farklı. Metin o boyuta inince küçülmeyi bırakır: en küçük boyut ne kadar küçükse metin o kadar küçülebilir ve o kadar çoğu görünür.

İlkinin en küçük boyutu 16.sp'dir. İkincisine verilmedi: temanın footnote boyutudur. Üçüncüsününki 0.4.em: em stilin kendi boyutunun payıdır, burada title boyutunun onda dördü.

val airport = "Sabiha Gökçen Uluslararası Havalimanı"
val room = Modifier.width(200.dp).background(PantrixTheme.colors.neutral.container)
PantrixAutoText(
    text = airport,
    modifier = room,
    style = PantrixTheme.typography.title,
    minFontSize = 16.sp,
    tagKey = "min_16sp"
)
PantrixAutoText(text = airport, modifier = room, style = PantrixTheme.typography.title, tagKey = "min_default")
PantrixAutoText(
    text = airport,
    modifier = room,
    style = PantrixTheme.typography.title,
    minFontSize = 0.4.em,
    tagKey = "min_em"
)

Yan yana kutularda, bir dolgunun üstünde

Yan yana iki kutuda birer sayı, headline stiliyle. Kutular genişliği weight ile paylaşır ve her sayı kendi kutusuna sığdırılır: kısa olan stilinin boyutunda kalır, uzun olan küçülür.

Renk verilmedi. PantrixText gibi, metin durduğu yerin içerik rengini alır: primary ile doldurulmuş kutuda o dolgunun üstünde okunan renkle yazılır.

val colors = PantrixTheme.colors
val spacing = PantrixTheme.spacing
Row(
    modifier = Modifier.widthIn(max = 360.dp),
    horizontalArrangement = Arrangement.spacedBy(spacing.md)
) {
    PantrixSurface(modifier = Modifier.weight(1f), color = colors.primary.color) {
        Column(modifier = Modifier.padding(spacing.md)) {
            PantrixText(text = "Bu ayki ciro", style = PantrixTheme.typography.footnote)
            PantrixAutoText(
                text = "1.284.500,75 TL",
                modifier = Modifier.fillMaxWidth(),
                style = PantrixTheme.typography.headline,
                tagKey = "revenue"
            )
        }
    }
    PantrixSurface(modifier = Modifier.weight(1f), border = colors.divider) {
        Column(modifier = Modifier.padding(spacing.md)) {
            PantrixText(text = "Sipariş", style = PantrixTheme.typography.footnote)
            PantrixAutoText(
                text = "32",
                modifier = Modifier.fillMaxWidth(),
                style = PantrixTheme.typography.headline,
                tagKey = "orders"
            )
        }
    }
}

API

text

Görünür kalmak için küçülen metin: kendisine verilen yerde bütünüyle okunan bir tutar, bir başlık ya da bir ad.

text

Parçaları ve bağlantılarıyla bir AnnotatedString alan PantrixAutoText. inlineContent, bu metnin adını verdiği yer tutucular içindir. Bir parçanın em ile verilen boyutu metnin boyutunu izler, sp ile verilen olduğu gibi kalır.