Paragrafı biçimlendir

Bu sayfada, paragrafınızdaki metni nasıl biçimlendirebileceğ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 composable 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ısının sol kenarı
  • Arapça veya İbranice gibi sağdan sola yazılan alfabeler için Text kapsayıcısının sağ kenarı

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

Kelimeler

Bir Text composable'ının metin hizalamasını manuel olarak ayarlamak istiyorsanız sırasıyla TextAlign.Left ve TextAlign.Right yerine TextAlign.Start ve TextAlign.End kullanmayı tercih edin. Bunlar, tercih edilen dilin metin yönüne bağlı olarak Text composable'ının sağ kenarına hizalanır. Örneğin, TextAlign.End Fransızca metin için sağ tarafa, Arapça metin için sol tarafa hizalanır ancak TextAlign.Right, hangi alfabe kullanılırsa kullanılsın sağ tarafa hizalanır.

Bir paragrafa birden fazla stil ekleme

Bir paragrafa birden fazla stil eklemek için AnnotatedString içinde ParagraphStyle kullanabilirsiniz. Bu, rastgele ek açıklamaların stilleriyle açıklanabilir. Metninizin bir bölümü ParagraphStyle ile işaretlendikten sonra bu bölüm, başında ve sonunda satır sonu 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şturmayı kolaylaştırmak için tip güvenliği olan bir derleyiciye sahiptir: buildAnnotatedString. Aşağıdaki snippet, ParagraphStyle değerini 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")
            }
        }
    )
}

Üç farklı stilde üç paragraf: Mavi, kırmızı ve kalın, düz siyah

Satır yüksekliğini ve dolguyu ayarlama

includeFontPadding, bir metnin ilk satırının üstüne ve son satırının altına yazı tipi metriklerine göre ekstra dolgu ekleyen eski bir özelliktir. Compose BOM sürümü 2024.01.01 itibarıyla includeFontPadding varsayılan olarak false şeklinde ayarlanır. Bu sayede varsayılan metin düzeni, yaygın tasarım araçlarıyla daha uyumlu hale gelir.

lineHeight yapılandırma özelliği yeni değildir. Android Q'dan beri kullanılabilmektedir. lineHeight parametresini kullanarak Text için lineHeight yapılandırabilirsiniz. Bu parametre, satır yüksekliğini her metin satırına dağıtır. 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 özelliğini kullanabilirsiniz.

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

lineHeight'ı doğrudan üstündeki ve altındaki satırlara göre bir ölçüm olarak gösteren resim.
Şekil 1. Metni lineHeight içinde ayarlamak için Hizalama ve Kırpma'yı kullanın ve gerekirse fazlalıkları kırpın.

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
            )
        )
    )
)

lineHeight ayarını yapmanın yanı sıra artık LineHeightStyle API'yi kullanarak yapılandırmalarla metni daha fazla ortalayabilir ve stillendirebilirsiniz: LineHeightStyle.Alignment ve LineHeightStyle.Trim (Kırpma özelliğinin çalışması için includeFontPadding, false olarak ayarlanmalıdır). Hizalama ve Kırpma, metin satırları arasındaki ölçülen boşluğu kullanarak bu boşluğu, tek bir metin satırı ve bir metin bloğunun en üst satırı da dahil olmak üzere tüm satırlara daha uygun şekilde dağıtı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, ortaya veya orantılı olarak hizalayabilirsiniz. LineHeightStyle.Trim, metninizin ilk satırının üstünde ve son satırının altında, LineHeightStyle.Trim ve hizalama ayarlamalarından kaynaklanan fazladan boşluk bırakmanıza veya bu boşluğu kaldırmanıza olanak tanır.lineHeight Aşağıdaki örneklerde, hizalama ortalandığında (LineHeightStyle.Alignment.Center) çok satırlı metnin çeşitli LineHeightStyle.Trim yapılandırmalarıyla nasıl göründüğü gösterilmektedir.

LineHeightStyle.Trim.None'ı gösteren bir resim LineHeightStyle.Trim.Both'u gösteren bir resim
LineHeightStyle.Trim.None LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop'ı gösteren bir resim LineHeightStyle.Trim.LastLineBottom'ı gösteren bir resim
LineHeightStyle.Trim.FirstLineTop LineHeightStyle.Trim.LastLineBottom

Bu değişikliğin bağlamı, includeFontPadding özelliğinin View sisteminde nasıl çalıştığı, Compose ve yeni LineHeightStyle API'leri için yapılan değişiklikler hakkında daha fazla bilgi edinmek üzere Fixing Font Padding in Compose Text (Compose Metninde Yazı Tipi Dolgusunu Düzeltme) başlıklı blog yayınını inceleyin.

Satır sonu ekleme

LineBreak API'si, metnin birden fazla satıra bölünme ölçütlerini tanımlar. İstediğiniz satır sonu türünü Text composable'ınızın TextStyle bloğunda belirtebilirsiniz. Önceden ayarlanmış satır sonu türleri şunlardır:

  • Simple: Hızlı, temel satır sonu. Metin girişi alanları için önerilir.
  • Heading: Daha esnek satır sonu kurallarıyla satır sonu ekleme Başlıklar gibi kısa metinler için önerilir.
  • Paragraph: Daha iyi okunabilirlik için daha yavaş, daha yüksek kaliteli satır sonu. Paragraf gibi daha uzun metinler için önerilir.

Aşağıdaki snippet, uzun bir metin bloğunda satır sonu 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
                )
            )
        }
    )
)

Basit bir satır sonu stratejisi gösteren metin bloğu ile paragrafa göre optimize edilmiş satır sonu stratejisi gösteren metin bloğu. Basit satır sonu stratejisi kullanılan metin bloğunda satır uzunlukları daha değişkendir.
Şekil 1. Basit satır sonu stratejisi kullanılan bir metin bloğu (üstte) ile paragrafa göre optimize edilmiş satır sonu kullanılan bir metin bloğu (altta).

Yukarıdaki çıktıda, Paragraph satır sonu davranışının Simple satır sonuna kıyasla görsel denge açısından daha dengeli bir sonuç ürettiğini görebilirsiniz.

Satır sonlarını özelleştirme

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

  • Balanced: Metnin satır uzunluklarını dengelemeye çalışır ve etkinleştirilmişse otomatik tirelemeyi de uygular. Görüntülenen metin miktarını en üst düzeye çıkarmak için saat gibi küçük ekranlarda kullanılması önerilir.
  • HighQuality: Etkinleştirilmişse tireleme de dahil olmak üzere bir paragrafı daha okunaklı metin için optimize eder. (Balanced veya Simple olmayan her şey için varsayılan olmalıdır.)
  • Simple: Temel ve hızlı bir stratejidir. Etkinleştirilirse tireleme yalnızca tek bir satıra sığmayan kelimeler için yapılır. Yazarken konumun değişmesini önlemek için metin düzenlemede kullanışlıdır.

Aşağıdaki snippet'te, varsayılan ayarlara sahip bir paragraf ile Balanced satır sonu stratejisi kullanılarak 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
            )
        }
    )
)

Dengeli satır sonu stratejisi olan bir paragraf ve strateji olmadan biçimlendirilmiş bir paragraf. Dengeli satır sonu stratejisine sahip paragraf, varsayılan stratejiye kıyasla daha tutarlı satır uzunluklarına sahiptir.
Şekil 2. BalancedSatır sonu stratejisiyle biçimlendirilmiş bir paragraf (üstte) ve satır sonu stratejisi olmadan biçimlendirilmiş bir paragraf.

CJK ile ilgili dikkat edilmesi gereken noktalar

LineBreak'i, CJK dilleri için özel olarak tasarlanmış Strictness ve WordBreak API'leriyle de özelleştirebilirsiniz. Bu API'lerin etkilerini Çince, Japonca ve Korece dışındaki dillerde her zaman göremeyebilirsiniz. Genel olarak satır sonu kuralları, yerel ayara göre tanımlanır.

Strictness, aşağıdaki özelliklerle satır sonunun katılık düzeyini tanımlar:

  • Default: Yerel ayar için varsayılan satır sonu 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 sonu için en yaygın kurallar.
  • Strict: Satır sonu için en katı kurallar.

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

  • Default: Yerel ayar için varsayılan satır sonu kuralları.
  • Phrase: Satır sonları, ifadelere göre belirlenir.

Aşağıdaki snippet'te, Japonca bir metin için Strict katılık ve Phrase kelime bölme ayarı kullanılmıştı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
    )
)

Katılık ve WordBreak ayarları uygulanmış Japonca metin ile varsayılan metnin karşılaştırması.
Şekil 3. Strictness ve WordBreak ayarlarıyla biçimlendirilmiş metin (üstte) ve yalnızca LineBreak.Heading ile biçimlendirilmiş metin (altta).

Satırlara bölünmüş metinleri kısa çizgiyle ayırma

Hyphens API'si, uygulamanıza tireleme desteği eklemenize olanak tanır. Tireleme, bir kelimenin metin satırları arasında bölündüğünü belirtmek için tire benzeri bir noktalama işareti eklemeyi ifade eder. Etkinleştirildiğinde, bir kelimenin heceleri arasına uygun tireleme noktalarında tire eklenir.

Heceleme varsayılan olarak etkin değildir. Hecelemeyi 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
                )
            )
        }
    )
)

Heceleme etkinleştirilmemiş bir paragraf ve heceleme etkinleştirilmiş bir paragraf.
  Heceleme etkinleştirildiğinde kelimeler hecelenir ve iki satıra bölünür.
Şekil 4. Heceleme etkinleştirilmemiş bir paragraf (üstte) ve heceleme etkinleştirilmiş bir paragraf (altta).

Etkinleştirildiğinde, heceleme yalnızca aşağıdaki koşullarda gerçekleşir:

  • Bir kelime satıra sığmıyor. Simple satır sonu stratejisi kullanırsanız kelimeler yalnızca satır tek kelimeden daha kısaysa tireyle ayrılır.
  • Sistemde bulunan sözlükler kullanılarak uygun tireleme belirlendiğinden cihazınızda uygun yerel ayar belirlenir.