Auto-resize Text Field

Yazısı görünür kalmak için küçülen metin alanı: bir tutar, bir kart numarası, kısa bir not, bütünü okunan her şey.

import com.pantrixui.components.inputs.autoresizetextfield.PantrixAutoResizeTextField

• Değişmeyen kutu. Kutunun eni stilindeki en az genişlik ya da çağıranın verdiğidir; uzayan yazı onu genişletmez, sığacak kadar küçülür.
• En büyük boyut. textStyle yazının en büyük hâlinin stilidir: temanın bir yazı rolü, bir tutar için headline gibi. Verilmezse body'dir. Stiline göre kısa kalan kutu, o stilin bir satırını alacak kadar uzar.
• En küçük boyut. minFontSize yazının inebileceği en küçük boyuttur: sp olarak, ya da stilin boyutunun bir payı olan em olarak. Verilmezse temanın footnote boyutudur. O boyutta da sığmayan yazı her alandaki gibi kayar.
• Birkaç satır. lineLimits = TextFieldLineLimits.MultiLine(...) ile yazı satırlara bölünür ve kutu en az satır sayısından en çoğuna kadar onunla uzar. Oradan sonra kutunun boyu değişmez, yazı satır aralığıyla birlikte küçülür.
• Verilen yükseklik. Alana verilen yükseklik satır sayısından önce gelir: kutu onu doldurur ve yazı o yüksekliğe sığdırılır.
• Sığdırılan, gösterilen yazıdır. outputTransformation'ın yalnızca gösterirken eklediği binlik ayırıcılar ve klavyenin o an yazmakta olduğu da hesaba girer. Yer tutucu yazının stilindedir ve uzunsa o da küçülür.
• Küçülen, yazının boyutudur. Hiçbir şey olduğundan küçük çizilmez: imleç, seçim ve tutamaçları yazının o anki boyutundadır.
• Üç biçim. state alan biçimde metin durumdan okunur. value ve onValueChange alan biçim metni çağıranda tutar ve satırlarını singleLine, minLines, maxLines ile alır. field alan biçim bir formun alanına bağlanır.
• Metin alanından gelenler. label, placeholder, supportingText, error, ikonlar, showClearButton, maxLength, klavye ve dönüşümler metin alanındaki gibidir.
• Otomasyon. tagKey ile alan AutoResizeTextField_<tagKey>, temizleme düğmesi AutoResizeTextFieldClear_<tagKey> adını alır. Alan odağı aldığını ve temizlendiğini bildirir, metnini asla.

Örnekler

En yalın hâli

En az yazılan: bir TextFieldState ve bir etiket. Alana genişlik verilmedi: kutu stilindeki en az genişliktedir ve yazıyla birlikte genişlemez. Adres o kutuya sığmayacak kadar uzun, bu yüzden küçülmüş olarak çizilir.

Yazmaya devam et: yazı en küçük boyutuna, temanın footnote boyutuna kadar küçülür; orada küçülmeyi bırakır ve her alandaki gibi kayar. Sil: yazı yeniden büyür, ama stilinin boyutunu, burada body'yi, geçmez.

PantrixAutoResizeTextField(
    state = rememberTextFieldState("Atatürk Bulvarı No: 125, Daire 14, Çankaya"),
    label = "Adres",
    tagKey = "plain_address"
)

Büyük yazılan bir tutar

Bir havale tutarı, temanın en büyük stilinde: textStyle = PantrixTheme.typography.display. Birkaç rakam kutuyu doldurur; sonrakilerle rakamlar kutuya sığacak kadar küçülür, kutunun eni de boyu da aynı kalır. Kutu, bu stilin bir satırını alacak kadar uzundur.

Klavyesi ondalık klavyedir, tutar olmayanı bir giriş dönüşümü geri çevirir, binlik noktaları da bir çıkış dönüşümü yalnızca gösterirken koyar. Sığdırılan, çizilen yazıdır: noktalar da hesaba girer.

Metin kullanılacağı anda durumdan okunur: düğmeye basılınca amount.text. Okunan, yazılan metindir; gösterimde eklenen noktalar onun parçası değildir.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val amount = rememberTextFieldState()
PantrixAutoResizeTextField(
    state = amount,
    modifier = Modifier.fillMaxWidth(),
    label = "Tutar",
    placeholder = "0",
    supportingText = "Yazdıkça küçülür, sildikçe büyür",
    trailingIcon = { PantrixText(text = "TL") },
    showClearButton = true,
    textStyle = PantrixTheme.typography.display,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Decimal),
    inputTransformation = AnAmount,
    outputTransformation = GroupedInThousands,
    tagKey = "transfer_amount"
)
PantrixButton(
    text = "Gönder",
    onClick = {
        val entered = amount.text.toString()
        val message = if (entered.isEmpty()) "Bir tutar yazın" else "$entered TL gönderilecek"
        scope.launch { snackbars?.show(message = message, tagKey = "amount_read") }
    },
    tagKey = "send_amount"
)

private val AnAmount = InputTransformation {
    val typed = asCharSequence().toString()
    val amount = typed.replace('.', ',')
    when {
        !AMOUNT.matches(amount) -> revertAllChanges()
        amount != typed -> replace(0, length, amount)
    }
}

private val AMOUNT = Regex("""\d{0,12}(,\d{0,2})?""")

private val GroupedInThousands = OutputTransformation {
    val whole = asCharSequence().indexOf(',').let { comma -> if (comma < 0) length else comma }
    // Sağdan sola: sonra eklenen her nokta, önce eklenenlerin solunda kalır ve yerlerini kaydırmaz.
    var at = whole - 3
    while (at > 0) {
        insert(at, ".")
        at -= 3
    }
}

En küçük boyut

Üç alan da title stilinde aynı adresi tutar. Adres hiçbirinin kutusuna sığmaz, bu yüzden her biri kendi en küçük boyutuna inmiştir. İlkinde minFontSize verilmedi: yazı temanın footnote boyutuna kadar küçülür. İkincide en küçük boyut 14 sp'dir. Üçüncüde em olarak verildi: 0.8.em, stilin kendi boyutunun onda sekizi.

En küçük boyutunda da sığmayan yazı küçülmeyi bırakır ve her alandaki gibi kayar. Stilin kendi boyutunda ya da üstünde bir minFontSize yazıyı hiç küçültmez.

val address = "Atatürk Bulvarı No: 125, Daire 14, Kızılay Mahallesi, Çankaya, Ankara"
PantrixAutoResizeTextField(
    state = rememberTextFieldState(address),
    label = "Verilmedi: footnote boyutu",
    textStyle = PantrixTheme.typography.title,
    tagKey = "smallest_default"
)
PantrixAutoResizeTextField(
    state = rememberTextFieldState(address),
    label = "En küçük 14 sp",
    textStyle = PantrixTheme.typography.title,
    minFontSize = 14.sp,
    tagKey = "smallest_sp"
)
PantrixAutoResizeTextField(
    state = rememberTextFieldState(address),
    label = "En küçük 0,8 em",
    textStyle = PantrixTheme.typography.title,
    minFontSize = 0.8.em,
    tagKey = "smallest_em"
)

Metnini String olarak tutan alan

On altı rakamlı bir kart numarası. Çağıran numarayı bir String olarak tutar: alan onu gösterir ve her değişikliği sorar, rakam olmayan bir değişiklik alınmadığı için de gösterilmez. Yardım metni o String'ten üretilir. Bu biçim satırlarını singleLine, minLines ve maxLines ile alır.

Yazı title stilindedir ve sığmadığı kutuda küçülür. En küçük boyutu etiket boyutudur (minFontSize = PantrixTheme.typography.label.fontSize): numara ondan küçük yazılmaz. Yer tutucu da yazının stilindedir.

var number by rememberSaveable { mutableStateOf("") }
val missing = 16 - number.length
PantrixAutoResizeTextField(
    value = number,
    onValueChange = { if (it.all(Char::isDigit)) number = it },
    modifier = Modifier.fillMaxWidth(),
    label = "Kart numarası",
    placeholder = "0000000000000000",
    supportingText = if (missing == 0) "Numara tamam" else "$missing rakam daha",
    maxLength = 16,
    showCharacterCount = false,
    textStyle = PantrixTheme.typography.title,
    minFontSize = PantrixTheme.typography.label.fontSize,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    contentType = ContentType.CreditCardNumber,
    tagKey = "card_number"
)

Forma bağlı bir IBAN

field alan biçim değerini, hatasını ve adını formdaki alanından alır: IBAN eksik bırakılıp çıkılırsa kuralın mesajı yardım metninin yerine geçer. form verilen alanda klavyenin eylem tuşu formu "IBAN'ı kaydet" düğmesi üzerinden gönderir. Forma bağlı bir alanın metni formdaki alanın değeridir: ayrıca alınması gerekmez.

Yirmi altı karakter callout stilinde dar bir kutuya sığmaz: yazı küçülür ve IBAN'ın bütünü görünür kalır.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val form = rememberFormState()
PantrixAutoResizeTextField(
    field = form.field("iban", initial = "", Rules.matches(IBAN, "TR ile başlayan 26 karakterli bir IBAN yazın")),
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "IBAN",
    placeholder = "TR000000000000000000000000",
    supportingText = "Uzun olsa da bütünü görünür",
    showClearButton = true,
    maxLength = 26,
    textStyle = PantrixTheme.typography.callout,
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Characters)
)
PantrixButton(
    text = "IBAN'ı kaydet",
    onClick = {
        scope.launch { form.submit { snackbars?.show(message = "IBAN kaydedildi", tagKey = "iban_saved") } }
    },
    form = form,
    tagKey = "save_iban"
)

private val IBAN = Regex("""TR\d{24}""")

Birkaç satırlık bir not

lineLimits = TextFieldLineLimits.MultiLine(minHeightInLines = 2, maxHeightInLines = 4) ile yazı satırlara bölünür: kutu iki satır boyundadır ve yazıyla birlikte dört satıra kadar büyür. Not dört satırı geçince kutu aynı kalır, yazı satır aralığıyla birlikte sığacak kadar küçülür. Enter yeni satır açar.

Metin kullanılacağı anda durumdan okunur: düğmeye basılınca note.text.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val note = rememberTextFieldState()
PantrixAutoResizeTextField(
    state = note,
    modifier = Modifier.fillMaxWidth(),
    label = "Kuryeye not",
    placeholder = "Zili çalmayın, kapıya bırakın",
    supportingText = "Dört satıra kadar büyür, sonra yazı küçülür",
    showClearButton = true,
    maxLength = 280,
    lineLimits = TextFieldLineLimits.MultiLine(minHeightInLines = 2, maxHeightInLines = 4),
    tagKey = "courier_note"
)
PantrixButton(
    text = "Notu kaydet",
    onClick = {
        val written = note.text.toString()
        val message = if (written.isBlank()) "Bir not yazın" else "Not kaydedildi: ${written.length} karakter"
        scope.launch { snackbars?.show(message = message, tagKey = "note_saved") }
    },
    tagKey = "save_note"
)

Yüksekliği verilen alan

Bir hediye kartına yazılan mesaj, yüksekliği verilen bir alanda: Modifier.height(180.dp). Yükseklik alanın bütününündür: kutu, etiketle yardım metninin bıraktığını doldurur ve mesaj kısayken de aynı boydadır. Yazı title stilinde başlar; kutuya sığmayınca bütünü görünecek en büyük boyuta iner, silindikçe yeniden büyür.

Satır sınırı verilmemiştir (TextFieldLineLimits.MultiLine()): yazının sığacağı yer alanın yüksekliğidir.

PantrixAutoResizeTextField(
    state = rememberTextFieldState(CARD_MESSAGE),
    modifier = Modifier.fillMaxWidth().height(180.dp),
    label = "Kart mesajı",
    supportingText = "Alanın yüksekliği sabit: yazı sığmak için küçülür",
    showClearButton = true,
    maxLength = 280,
    textStyle = PantrixTheme.typography.title,
    lineLimits = TextFieldLineLimits.MultiLine(),
    tagKey = "card_message"
)

private const val CARD_MESSAGE = "İyi ki doğdun! Yeni yaşın sana sağlık, mutluluk ve bolca neşe getirsin. " +
    "Birlikte geçireceğimiz daha nice güzel yıllara."

Yardım metni ve hata

supportingText kutunun altında durur. error = true kenarlığı, etiketi, yardım metnini ve imleci danger rolüne çevirir ve mesaj ekran okuyucuya hata olarak bildirilir. Alan hatada başlar: 75.000, günlük limitin üstünde. Bir rakam sil: hata kalkar.

Hatayı alan değil çağıran hesaplar; burada amount.text'i okuyarak. Okunan, yazılan rakamlardır: binlik noktaları yalnızca çizilir.

val amount = rememberTextFieldState("75000")
val typed = amount.text.toString().toLongOrNull() ?: 0L
val overLimit = typed > 50_000
PantrixAutoResizeTextField(
    state = amount,
    modifier = Modifier.fillMaxWidth(),
    label = "Çekilecek tutar",
    supportingText = if (overLimit) "Günlük limiti aşıyor: en çok 50.000 TL" else "Günlük limit 50.000 TL",
    error = overLimit,
    trailingIcon = { PantrixText(text = "TL") },
    showClearButton = true,
    maxLength = 9,
    showCharacterCount = false,
    textStyle = PantrixTheme.typography.headline,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    inputTransformation = DigitsOnly,
    outputTransformation = GroupedInThousands,
    tagKey = "withdrawal"
)

private val DigitsOnly = InputTransformation {
    if (!asCharSequence().all(Char::isDigit)) revertAllChanges()
}

private val GroupedInThousands = OutputTransformation {
    val whole = asCharSequence().indexOf(',').let { comma -> if (comma < 0) length else comma }
    // Sağdan sola: sonra eklenen her nokta, önce eklenenlerin solunda kalır ve yerlerini kaydırmaz.
    var at = whole - 3
    while (at > 0) {
        insert(at, ".")
        at -= 3
    }
}

Salt okunur ve devre dışı

readOnly = true alan değiştirilemez, ama odaklanır ve metni seçilip kopyalanır. Bakiye headline stilindedir ve binlik noktalarıyla gösterilir; sığmadığı kutuda, yazılabilen bir alandaki gibi küçülür.

enabled = false alan temanın devre dışı renkleriyle çizilir ve odak almaz. Yazısı yine kutusuna sığdırılır.

PantrixAutoResizeTextField(
    state = rememberTextFieldState("125000000000000,00"),
    modifier = Modifier.fillMaxWidth(),
    readOnly = true,
    label = "Bakiye",
    supportingText = "Salt okunur: headline stilinde, sığmak için küçüldü",
    trailingIcon = { PantrixText(text = "TL") },
    textStyle = PantrixTheme.typography.headline,
    outputTransformation = GroupedInThousands,
    tagKey = "balance"
)
PantrixAutoResizeTextField(
    state = rememberTextFieldState("4543 60** **** 0719"),
    modifier = Modifier.fillMaxWidth(),
    enabled = false,
    label = "Kayıtlı kart",
    supportingText = "Devre dışı: bu ödemede değiştirilemez",
    textStyle = PantrixTheme.typography.title,
    tagKey = "saved_card"
)

private val GroupedInThousands = OutputTransformation {
    val whole = asCharSequence().indexOf(',').let { comma -> if (comma < 0) length else comma }
    // Sağdan sola: sonra eklenen her nokta, önce eklenenlerin solunda kalır ve yerlerini kaydırmaz.
    var at = whole - 3
    while (at > 0) {
        insert(at, ".")
        at -= 3
    }
}

Kendi renkleri ve stili

Bu alanın kendi stil ve renk sınıfı yoktur: PantrixTextField'ın TextFieldColors'ını ve TextFieldStyle'ını alır. Metin alanlarını yeniden biçimleyen bir ürün bunu da biçimlemiş olur.

İlk alanda yazı, odaktaki kenarlık ve imleç uygulamanın kendi morudur. İkincinin kutusu tam yuvarlaktır: TextFieldStyle(shape = ShapeRole.Full). textStyle ile style ayrı şeylerdir: ilki yazının, ikincisi kutunun stilidir.

val own = ownColors()
PantrixAutoResizeTextField(
    state = rememberTextFieldState("2026 Bahar Kampanyası"),
    modifier = Modifier.fillMaxWidth(),
    label = "Kampanya adı",
    textStyle = PantrixTheme.typography.title,
    colors = TextFieldColors(focusedBorder = own.color, text = own.color, cursor = own.color),
    tagKey = "own_colors"
)
PantrixAutoResizeTextField(
    state = rememberTextFieldState("PX-2026-0914"),
    modifier = Modifier.fillMaxWidth(),
    label = "Takip numarası",
    textStyle = PantrixTheme.typography.title,
    style = TextFieldStyle(shape = ShapeRole.Full),
    tagKey = "pill"
)

API

state

Yazısı görünür kalmak için küçülen metin alanı: bir tutar, bir kart numarası, kısa bir not, bütünü okunan her şey.

value

Yazısı sığmak için küçülen ve metnini çağıranın bir String olarak tuttuğu metin alanı: alan value'yu gösterir ve kullanıcının her değişikliğini onValueChange'e sorar.

field

Yazısı sığmak için küçülen, bir formun alanına bağlı metin alanı: metni, hatası ve adı field'dan gelir.

TextFieldStyle

PantrixTextField'ın kutusu: şekli, en az yüksekliği ve genişliği, metninin çevresindeki boşluk, ikonları ve kenarlığı.

TextFieldColors

Temanın renklerini almayan bir alan için PantrixTextField'ın boyandığı renkler: verilen renk kullanılır, verilmeyen temadaki rolünde kalır. Bir ürün yalnızca değiştirdiği renkleri verir, başkasını vermez: