Paragrafı biçimlendir

Bu sayfada, mesajınız için metnin stilini nasıl paragrafından emin olun. 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, yatay veya yatay hizalama metin, composable yüzey alanı içinde Text.

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

  • Soldan sağa alfabeler için Text kapsayıcısının sol kenarı. Örneğin: Latin, Kiril veya Hangul
  • 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)
    )
}

Kelimeler

Bir Text bileşeninin metin hizalamasını manuel olarak ayarlamak istiyorsanız tercih edilen dil metni yönüne bağlı olarak Text bileşeninin sağ kenarına çözüleceğinden, sırasıyla TextAlign.Left ve TextAlign.Right yerine TextAlign.Start ve TextAlign.End kullanmayı tercih edin. Örneğin, TextAlign.End Fransızca metin için sağ tarafa, Arapça metin için ise sol tarafa hizalanır. Ancak TextAlign.Right, hangi alfabenin kullanıldığına bakılmaksızı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, keyfi ek açıklama stilleriyle ek açıklama eklenebilir. Metninizin bir bölümü ParagraphStyle ile işaretlendikten sonra başında satır feed'leri varmış gibi kalan metinden ayırıp dokunun.

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

AnnotatedString, type-safe parametresini içeriyor derleyici kullanarak kolayca oluşturabilirsiniz: buildAnnotatedString. Aşağıdaki snippet, ParagraphStyle ayarlamak için buildAnnotatedString:

@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ı stildeki üç paragraf: Mavi, kırmızı ve kalın, düz siyah

Satır yüksekliğini ve dolguyu ayarlama

includeFontPadding, ve son satırının altındaki yazı tipi metriklerini görebilirsiniz. 2024.01.01 sürümünden itibaren includeFontPadding, varsayılan olarak false olarak ayarlanır. Bu sayede 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, daha fazla yapılandırma için yeni LineHeightStyle API kullanabilirsiniz nasıl hizalandığını kontrol edin ve boşlukları kaldırın.

lineHeight metin birimini "em" (göreli yazı tipi) kullanarak düzenleyebilirsiniz. (ölçeklendirilmiş pikseller) yerine "sp" (ölçeklendirilmiş pikseller) yerine daha yüksek hassasiyet sağlar. Daha fazla bilgi için uygun bir metin birimi seçmek için bkz. TextUnit.

Doğrudan üstündeki ve altındaki çizgilere dayalı bir ölçüm olarak lineHeight gösteren resim.
Şekil 1. Metni gruplanan lineHeight içinde ayarlamak için Hizalama ve Kırpma özelliklerini kullanın ve gerekirse fazla boşluğu 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 özelliğini ayarlamaya ek olarak artık metni ortalayabilir ve biçimlendirebilirsiniz LineHeightStyle deneysel API ile yapılandırmaları kullanarak: LineHeightStyle.Alignment ve LineHeightStyle.Trim (includeFontPadding değeri, şunun için false olarak ayarlanmalıdır: İş yerine kırpın). 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 şekilde dağıtmak için metin satırları arasındaki ölçülen alanı kullanır.

LineHeightStyle.Alignment, alandaki çizginin nasıl hizalanacağını tanımlar satır yüksekliği ile ifade edilir. Her satırda metni üste, alta, ortada veya orantılı olarak hizalayabilirsiniz. LineHeightStyle.Trim şunları yapmanıza olanak tanır: ilk satırın başına ve altındaki fazladan boşluğu metninizin herhangi bir lineHeight ve Hizalama'dan oluşturulan son satırı ayarlamalar yapabilirsiniz. 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 özelliğini gösteren bir resim LineHeightStyle.Trim.Both öğesini gösteren bir resim
LineHeightStyle.Trim.None LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop özelliğini gösteren resim LineHeightStyle.Trim.LastLineBottom özelliğini gösteren resim
LineHeightStyle.Trim.FirstLineTop LineHeightStyle.Trim.LastLineBottom

Daha fazla bilgi edinmek için Metni Oluştur'da Yazı Tipi Dolgusunu Düzeltme başlıklı blog yayınına bakın. includeFontPadding uygulamasının Görünüm'de nasıl çalıştığı hakkında daha fazla bilgi ve Compose ile yeni LineHeightStyle için yapılan değişiklikler API'ler.

Satır sonu ekle

LineBreak API, metnin birden fazla satıra bölündüğü ölçütleri tanımlar. İstediğiniz satır sonu türünü Text composable'ınızın TextStyle bloğu. Ö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 satır sonu kurallarıyla satır sonu. Shorts videosu için önerilir başlıkları gibi metinler kullanabilirsiniz.
  • 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, belirtilen değeri belirtmek için hem Simple hem de Paragraph kullanır uzun bir metin bloğunda satır sonu davranışı:

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

Bir metin yerine basit bir satır sonu stratejisini gösteren metin bloğu
  paragraftan optimize edilmiş bir kesme stratejisiyle engelle
 Basit satır bölme stratejisine sahip metin bloğunda satır uzunluklarında daha fazla çeşitlilik vardır.
Şekil 1. Basit bir satır bölme stratejisine sahip metin bloğu (üstte) ve paragrafa göre optimize edilmiş satır bölme stratejisine sahip metin bloğu (altta).

Yukarıdaki çıkışta, Paragraph satır sonu davranışının şu sonuçları verdiğine dikkat edin: Simple satır sonuna kıyasla görsel olarak daha dengeli bir sonuç elde edersiniz.

Satır sonlarını özelleştirme

Ayrıca, Strategy ile kendi LineBreak yapılandırmanızı da oluşturabilirsiniz. parametresinden sonra bir değer girin. Strategy aşağıdakilerden biri olabilir:

  • Balanced — Metnin satır uzunluklarını dengelemeye çalışır ve aynı zamanda şunları uygular: otomatik kısa çizgilemeyi kullanabilir. Kol saatleri gibi küçük ekranlar için önerilir. simgesini tıklayın.
  • HighQuality — Bir paragrafı daha okunabilir metinler için optimize eder. Örneğin: tireye sokma. (Balanced veya Simple olmayan her şey için varsayılan olmalıdır.)
  • Simple: Temel ve 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
            )
        }
    )
)

Dengeli satır sonu stratejisi içeren bir paragraf ve bir paragraf
  biçimlendirmeniz gerekir. Dengeli satır bölme stratejisine sahip paragraf, varsayılan stratejiye kıyasla daha tutarlı satır uzunluklarına sahiptir.
Şekil 2. Balanced satır bölme stratejisi ile biçimlendirilmiş bir paragraf (üstte) yer alır.

CJK ile ilgili dikkat edilmesi gereken noktalar

LineBreak'yi, özellikle CJK dilleri için tasarlanmış Strictness ve WordBreak API'leriyle de özelleştirebilirsiniz. CJK dışındaki dillerde bu API'lerin etkilerini 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 ile karşılık gelebilir veya Strict.
  • Loose: En az kısıtlayıcı olan 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, şu özellikleri kullanın:

  • Default — Yerel ayar için varsayılan kırma kuralları.
  • Phrase: Satır sonları kelime öbeklerine göre belirlenir.

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

Varsayılan metne kıyasla Katılık ve WordBreak ayarlarının kullanıldığı Japonca metin.
Şekil 3. Strictness ve WordBreak ayarlarıyla biçimlendirilmiş metin (üstte) ile yalnızca LineBreak.Heading ile biçimlendirilmiş metin (altta)

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

Hyphens API, uygulamanıza tire desteği eklemenize olanak tanır. Kısa çizgi, belirli bir yerin mevcut kelime satırlarına bölünür. Etkinleştirildiğinde, uygun satır ayırma noktalarında bir kelimenin heceleri arasına satır ayırma işareti eklenir.

Kısa çizgilendirme 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
                )
            )
        }
    )
)

Tire işareti etkinleştirilmemiş ve tire işareti etkinleştirilmiş bir paragraf.
  Tire işareti etkinleştirildiğinde kelimeler tire işaretiyle ayrılarak iki satıra bölünür.
Şekil 4. Tirelemenin etkin olmadığı bir paragraf ile bir paragrafın karşılaştırılması (üst) .

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 bölme stratejisi kullanıyorsanız bir kelimenin tirelenmesi yalnızca satır tek kelimeden kısaysa gerçekleşir.
  • Cihazınızda uygun tirelemeye bağlı olarak uygun yerel ayar sistemde bulunan sözlükleri kullanarak belirlenir.