Paragrafı biçimlendir

Bu sayfada, paragrafınız için metne nasıl stil uygulayabileceğiniz açıklanmaktadır. Paragraf düzeyinde stil ayarlamak için textAlign ve lineHeight gibi parametreleri yapılandırabilir veya kendi ParagraphStyle parametrenizi tanımlayabilirsiniz.

Metin hizalamasını ayarlama

textAlign parametresi, Text birleştirilebilir yüzey alanındaki metnin yatay hizalamasını ayarlamanıza olanak tanır.

Varsayılan olarak Text, içerik değerine bağlı olarak doğal metin hizalamasını seçer:

• Latin, Kiril veya Hangul gibi soldan sağa alfabeler için Text kapsayıcının sol kenarı
• Arapça veya İbranice gibi sağdan sola doğru yazılan alfabeler için Text kapsayıcının sağ kenarı

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}
TextSnippets.kt

Bir Text composable'ın metin hizalamasını manuel olarak ayarlamak isterseniz TextAlign.Left ve TextAlign.Right yerine sırasıyla TextAlign.Start ve TextAlign.End kullanmayı tercih edin. Çünkü bunlar, tercih edilen dil metin yönüne bağlı olarak Text öğesinin sağ kenarına doğru ilerler. Örneğin, TextAlign.End Fransızca metin için sağ tarafa, Arapça metin için ise sol tarafa hizalanır. Ancak TextAlign.Right, kullanılan alfabe ne olursa olsun sağ tarafa hizalanır.

Bir paragrafa birden fazla stil ekleme

Bir paragrafa birden çok stil eklemek için, isteğe bağlı ek açıklama stilleriyle açıklama eklenebilen AnnotatedString içinde ParagraphStyle kullanabilirsiniz. Metninizin bir kısmı ParagraphStyle ile işaretlendikten sonra bu bölüm, başında ve sonunda satır feed'leri varmış gibi kalan metinden ayrılır.

Metne birden fazla stil ekleme hakkında daha fazla bilgi için Metne birden fazla stil ekleme başlıklı makaleyi inceleyin.

AnnotatedString, oluşturma işlemini kolaylaştıran bir type-safe oluşturma aracı içeriyor: buildAnnotatedString. Aşağıdaki snippet, ParagraphStyle öğesini ayarlamak için buildAnnotatedString kullanır:

@Composable
fun ParagraphStyle() {
    Text(
        buildAnnotatedString {
            withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
                withStyle(style = SpanStyle(color = Color.Blue)) {
                    append("Hello\n")
                }
                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold, color = Color.Red
                    )
                ) {
                    append("World\n")
                }
                append("Compose")
            }
        }
    )
}
TextSnippets.kt

Satır yüksekliğini ve dolguyu ayarlama

includeFontPadding, bir metnin ilk satırının üst kısmındaki ve son satırının alt kısmındaki yazı tipi metriklerini temel alan ek dolgu ekleyen eski bir mülktür. Oluşturma BOM sürümü 2024.01.01 sürümünden itibaren includeFontPadding varsayılan olarak false değerine ayarlanır. Böylece varsayılan metin düzeni, yaygın tasarım araçlarıyla daha uyumlu hale gelir.

lineHeight yapılandırması Android Q'den beri mevcuttur. Satır yüksekliğini her metin satırına dağıtan lineHeight parametresini kullanarak Text için lineHeight öğesini yapılandırabilirsiniz. Ardından, bu metnin alanda nasıl hizalanacağını daha ayrıntılı şekilde yapılandırmak ve boşlukları kaldırmak için yeni LineHeightStyle API öğesini kullanabilirsiniz.

Daha yüksek hassasiyet için lineHeight değerini "sp" (ölçeklendirilmiş piksel) yerine "em" (göreceli yazı tipi boyutu) metin birimini kullanarak ayarlayabilirsiniz. Uygun bir metin birimi seçme hakkında daha fazla bilgi için bkz. TextUnit.

Text(
    text = text,
    style = LocalTextStyle.current.merge(
        TextStyle(
            lineHeight = 2.5.em,
            platformStyle = PlatformTextStyle(
                includeFontPadding = false
            ),
            lineHeightStyle = LineHeightStyle(
                alignment = LineHeightStyle.Alignment.Center,
                trim = LineHeightStyle.Trim.None
            )
        )
    )
)
TextSnippets.kt

lineHeight'ü ayarlamaya ek olarak artık LineHeightStyle deneysel API ile yapılandırmaları kullanarak metni daha da ortalayabilir ve biçimlendirebilirsiniz: LineHeightStyle.Alignment ve LineHeightStyle.Trim (Trim'in çalışması için includeFontPadding, false olarak ayarlanmalıdır). Hizalama ve Kırpma, tek bir metin satırı ve metin bloğunun üst satırı dahil olmak üzere tüm satırlara daha uygun bir şekilde dağıtmak için metin satırları arasındaki ölçülen alanı kullanır.

LineHeightStyle.Alignment, satırın satır yüksekliği tarafından sağlanan alanda nasıl hizalanacağını tanımlar. Her satırda metni üste, alta, ortada veya orantılı olarak hizalayabilirsiniz. LineHeightStyle.Trim, lineHeight ve Hizalama ayarlarından kaynaklanan, metninizin ilk satırının üst kısmına ve son satırının alt kısmına eklenen fazladan boşluğu bırakmanıza veya kaldırmanıza olanak tanır. Aşağıdaki örneklerde, hizalama ortada (LineHeightStyle.Alignment.Center) olduğunda çok satırlık metnin çeşitli LineHeightStyle.Trim yapılandırmalarıyla nasıl göründüğü gösterilmektedir.

LineHeightStyle.Trim.None	LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop	LineHeightStyle.Trim.LastLineBottom

Bu değişikliğin bağlamı, includeFontPadding'nin Görüntüleme sisteminde nasıl çalıştığı ve Oluştur ile yeni LineHeightStyle API'ler için yapılan değişiklikler hakkında daha fazla bilgi edinmek için Metin Oluşturma'da Yazı Yanı Boşluğu Düzeltme blog yayınını inceleyin.

Satır sonu ekleme

LineBreak API, metnin birden fazla satıra bölündüğü ölçütleri tanımlar. Text bileşeninizin TextStyle bloğunda istediğiniz satır bölme türünü belirtebilirsiniz. Önceden ayarlanmış satır bölme türleri şunlardır:

• Simple: Hızlı, temel satır sonu. Metin giriş alanları için önerilir.
• Heading: Daha gevşek satır sonu kurallarıyla satır sonu. Başlık gibi kısa metinler için önerilir.
• Paragraph: Okunabilirliği artırmak için daha yavaş ve daha kaliteli satır bölme. Paragraflar gibi daha büyük metin miktarları için önerilir.

Aşağıdaki snippet, uzun bir metin bloğunda satır bölme davranışını belirtmek için hem Simple hem de Paragraph kullanır:

TextSample(
    samples = mapOf(
        "Simple" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Simple
                )
            )
        },
        "Paragraph" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph
                )
            )
        }
    )
)
TextSnippets.kt

Yukarıdaki çıktıda, Paragraph satır bölme davranışının Simple satır bölme davranışına kıyasla görsel olarak daha dengeli bir sonuç oluşturduğunu görebilirsiniz.

Satır sonlarını özelleştirme

Strategy parametresini kullanarak kendi LineBreak yapılandırmanızı da oluşturabilirsiniz. Strategy aşağıdakilerden biri olabilir:

• Balanced — Metnin satır uzunluklarını dengelemeye çalışır ve etkinleştirilirse otomatik tireleme uygulanır. Gösterilen metin miktarını en üst düzeye çıkarmak için kol saatleri gibi küçük ekranlarda önerilir.
• HighQuality: Bir paragrafı, etkinleştirilmişse tireleme dahil olmak üzere daha okunaklı metinler için optimize eder. (Balanced veya Simple olmayan her şey için varsayılan olmalıdır.)
• Simple: Temel, hızlı strateji. Bu seçenek etkinleştirilirse tireleme yalnızca tek başına bir satıra sığmayan kelimeler için yapılır. Yazarken konum değiştirmemek için metin düzenlemede kullanışlıdır.

Aşağıdaki snippet'te, varsayılan ayarlara sahip bir paragraf ile Balanced satır bölme stratejisiyle küçük ekranlar için optimize edilmiş bir paragraf arasındaki fark gösterilmektedir:

TextSample(
    samples = mapOf(
        "Balanced" to {
            val smallScreenAdaptedParagraph =
                LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced)
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = smallScreenAdaptedParagraph
                )
            )
        },
        "Default" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default
            )
        }
    )
)
TextSnippets.kt

CJK ile ilgili dikkat edilmesi gereken noktalar

Ayrıca LineBreak uygulamasını CJK dilleri için özel olarak tasarlanmış Strictness ve WordBreak API'leriyle de özelleştirebilirsiniz. Bu API'lerin etkilerini CJK dışındaki dillerde her zaman göremeyebilirsiniz. Satır bölme kuralları genel olarak yerel ayara göre tanımlanır.

Strictness, satır bölme işleminin katılığını aşağıdaki özelliklerle açıklar:

• Default: Yerel ayar için varsayılan satır bölme kuralları. Normal veya Strict ile eşleşebilir.
• Loose: En az kısıtlayıcı kurallar. Kısa satırlar için uygundur.
• Normal: Satır sonlandırmayla ilgili en yaygın kurallar.
• Strict: Satır sonlandırmayla ilgili en katı kurallar.

WordBreak, aşağıdaki özelliklerle kelimelere satır aralarının nasıl ekleneceğini tanımlar:

• Default: Yerel ayar için varsayılan satır bölme kuralları.
• Phrase — Satır sonu, kelime öbeklerine dayalıdır.

Aşağıdaki snippet'te, Japonca bir metin için Strict katılık ve Phrase kelime bölme ayarı kullanılmaktadır:

val customTitleLineBreak = LineBreak(
    strategy = LineBreak.Strategy.HighQuality,
    strictness = LineBreak.Strictness.Strict,
    wordBreak = LineBreak.WordBreak.Phrase
)
Text(
    text = "あなたに寄り添う最先端のテクノロジー。",
    modifier = Modifier.width(250.dp),
    fontSize = 14.sp,
    style = TextStyle.Default.copy(
        lineBreak = customTitleLineBreak
    )
)
TextSnippets.kt

Satırlara bölünmüş metni tire ile ayırma

Hyphens API, uygulamanıza kısa çizgiyle ayırma desteği eklemenize olanak tanır. Kısa çizgi, bir kelimenin satırlar halinde ayrıldığını belirtmek için kısa çizgi benzeri bir noktalama işareti eklenmesini ifade eder. Etkinleştirildiğinde, uygun satır ayırma noktalarında bir kelimenin heceleri arasına satır ayırma işareti eklenir.

Tireleme varsayılan olarak etkin değildir. Kelime ayırmayı etkinleştirmek için TextStyle bloğuna parametre olarak Hyphens.Auto ekleyin:

TextSample(
    samples = mapOf(
        "Hyphens - None" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.None
                )
            )
        },
        "Hyphens - Auto" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.Auto
                )
            )
        }
    )
)
TextSnippets.kt

Etkinleştirildiğinde kısa çizgi yalnızca aşağıdaki koşullarda kullanılır:

• Bir kelime bir satıra sığmaz. Simple satır bölme stratejisi kullanıyorsanız bir kelimenin tirelenmesi yalnızca satır tek kelimeden kısaysa gerçekleşir.
• Uygun kısa çizgi, sistemdeki sözlükler kullanılarak belirlendiği için cihazınızda uygun yerel ayar ayarlanır.