Paragrafı biçimlendir

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

Metin hizalamasını ayarlama

textAlign parametresi, Text composable yüzey alanı içindeki metnin yatay hizalamasını ayarlamanıza olanak tanır.

Varsayılan olarak Text, doğal metin hizalamasını içerik değerine bağlı olarak 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 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)
    )
}
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 metinler için sağ tarafa, Arapça metinler için sol tarafa, ancak TextAlign.Right hangi alfabenin kullanıldığına bakılmaksızın sağ tarafa hizalanır.

Paragrafa birden çok stil ekleme

Bir paragrafa birden çok stil eklemek için, rastgele 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.

Bir metne birden çok stil ekleme hakkında daha fazla bilgi için Metne birden çok stil ekleme konusuna bakın.

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, metnin ilk satırının ilk satırının ve son satırının alt kısmındaki yazı tipi metriklerine göre ekstra dolgu ekleyen eski bir özelliktir. 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ı yeni bir özellik olmasa da Android Q'dan bu yana kullanılmaktadır. Metnin her satırındaki satır yüksekliğini dağıtan lineHeight parametresini kullanarak Text için lineHeight politikasını yapılandırabilirsiniz. Ardından, bu metnin alan içinde nasıl hizalanacağını daha fazla yapılandırmak ve boşlukları kaldırmak için yeni LineHeightStyle API simgesini kullanabilirsiniz.

Daha yüksek hassasiyet için lineHeight değerini "sp" (ölçeklendirilmiş piksel) yerine "em" (göreli yazı tipi boyutu) kullanarak düzenleyebilirsiniz. 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 özelliğini ayarlamanın yanı sıra artık LineHeightStyle deneysel API'yi kullanarak yapılandırmaları kullanarak metni daha ortalayabilir ve biçimlendirebilirsiniz: LineHeightStyle.Alignment ve LineHeightStyle.Trim (Kırpma işleminin çalışması için includeFontPadding false olarak ayarlanmalıdır). Hizalama ve Kırpma işlemi, metni tek bir satır ve bir metin blokunun üst satırı da dahil olmak üzere tüm satırlara daha uygun şekilde dağıtmak için metin satırları arasındaki ölçülen alanı kullanır.

LineHeightStyle.Alignment, satır yüksekliğinin sağladığı boşlukta çizginin nasıl hizalanacağını tanımlar. Her satırda metni üste, alta, ortaya veya orantılı olarak hizalayabilirsiniz. LineHeightStyle.Trim daha sonra tüm lineHeight ve Hizalama düzenlemelerinden oluşturulan ve metninizin ilk satırının en üstündeki ve son satırının altındaki fazladan boşluğu kaldırmanıza veya kaldırmanıza olanak tanır. Aşağıdaki örnekler, hizalama ortalandığında (LineHeightStyle.Alignment.Center) çok satırlı metnin çeşitli LineHeightStyle.Trim yapılandırmalarıyla nasıl göründüğünü göstermektedir.

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

Bu değişikliğin bağlamı, includeFontPadding uygulamasının Görünüm sisteminde nasıl çalıştığı ve Compose ile yeni LineHeightStyle API'lerinde yapılan değişiklikler hakkında daha fazla bilgi edinmek için Metni Yazma Metninde Yazı Tipi Dolgusunu Düzeltme blog yayınına bakın.

Satır sonu ekle

LineBreak API, metnin birden fazla satıra bölüneceği ölçütleri tanımlar. Text composable'ınızın TextStyle bloğunda istediğiniz satır sonu türünü belirtebilirsiniz. Önceden belirlenmiş satır sonu türleri şunları içerir:

• Simple: Hızlı, temel satır sonu. Metin giriş alanları için önerilir.
• Heading — Daha gevşek ihlal 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 yüksek kaliteli satır sonu. Paragraflar gibi daha büyük metin miktarları için önerilir.

Aşağıdaki snippet, uzun bir metin blokunda satır sonu davranışı 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 çıkışta Paragraph satır sonu davranışının, Simple satır sonuna kıyasla görsel açıdan daha dengeli bir sonuç ürettiğine dikkat edin.

Satır sonlarını özelleştir

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

• Balanced — Metnin satır uzunluklarını dengelemeye çalışır ve etkinleştirilirse otomatik tireleme uygulanır. Görüntülenen metin miktarını en üst düzeye çıkarmak için kol saatleri gibi küçük ekranlarda önerilir.
• HighQuality — Etkinleştirilmesi durumunda tire işareti de dahil olmak üzere bir paragrafı daha okunabilir metinler için optimize eder. (Balanced veya Simple dışındaki her şey için varsayılan olmalıdır.)
• Simple: Temel ve hızlı strateji. Etkinleştirilirse, yalnızca bir satırın tamamına tek başına sığmayan kelimeler için kısa çizgi kullanılır. Metin düzenlerken, yazarken konumun değişmesini önlemek için kullanışlıdır.

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

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. CJK dışındaki dillerde bu API'lerin etkilerini 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 güvenlik düzeyini açıklar:

• Default — Yerel ayar için varsayılan kırma kuralları. Normal veya Strict kelimesine karşılık gelebilir.
• Loose: En az kısıtlayıcı olan kurallar. Kısa hatlar için uygundur.
• Normal: Satır sonuyla ilgili en yaygın kurallardır.
• Strict: Satır sonuyla ilgili en katı kurallar.

WordBreak, aşağıdaki özelliklerle kelimelerin içine satır sonlarının nasıl eklenmesi gerektiğini tanımlar:

• Default — Yerel ayar için varsayılan kırma kuralları.
• Phrase — Satır sonu, kelime öbeklerine dayalıdır.

Aşağıdaki snippet'te Japonca bir metin için Strict güvenlik düzeyi ve Phrase kelime kırma 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

Metni satırlara bölerek kısa çizgi oluşturma

Hyphens API, uygulamanıza kısa çizgi ekleme 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, bir kelimenin heceleri arasına uygun kısa çizgileme noktalarında kısa çizgi eklenir.

Kısa çizgilendirme varsayılan olarak etkin değildir. Kısaltmayı etkinleştirmek için Hyphens.Auto öğesini bir TextStyle bloğuna parametre olarak 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

Tireleme özelliği etkinleştirildiğinde yalnızca aşağıdaki koşullarda gerçekleşir:

• Bir kelime satıra sığmıyor. Simple satır sonu stratejisi kullanıyorsanız kelimeler yalnızca satır tek kelimeden kısa olduğunda kısa çizgiyle gösterilir.
• Uygun tireleme sistemde bulunan sözlükler kullanılarak belirlendiği için cihazınızda uygun yerel ayar ayarlanır.

Sizin için önerilenler

• Not: JavaScript kapalıyken bağlantı metni gösterilir
• Metni biçimlendirme
• Oluşturma düzeniyle ilgili temel bilgiler
• Oluşturma düzenlerinde doğal ölçümler