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
Textkapsayıcının sol kenarı - Arapça veya İbranice gibi sağdan sola doğru yazılan alfabeler için
Textkapsayıcının sağ kenarı
@Composable
fun CenterText() {
Text(
"Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
)
}
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 kısmı ParagraphStyle ile işaretlendiğinde, bu kısım başlangıç ve son satır beslemeleri 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 tür açısından güvenli bir oluşturucu içerir: buildAnnotatedString. Aşağıdaki snippet'te, ParagraphStyle değerini ayarlamak için buildAnnotatedString kullanılı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")
}
}
)
}
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.
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, 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 fazla hassasiyet için lineHeight değerini "sp" (ölçeklendirilmiş piksel) yerine "em" (göreceli yazı tipi boyutu) metin birimini kullanarak ayarlamak isteyebilirsiniz. Uygun bir metin birimi seçme hakkında daha fazla bilgi için TextUnit başlıklı makaleyi inceleyin.
lineHeightve gerekirse fazladan alanı 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'ü 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 ş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ıklar 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
)
)
}
)
)
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 etkinse otomatik tire ekleme özelliğini de uygular. 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. (BalancedveyaSimpleolmayan 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
)
}
)
)
Balanced satır sonu stratejisiyle biçimlendirilmiş bir paragraf (üstte) ve satır sonu stratejisi olmadan biçimlendirilmiş bir paragrafCJK ile ilgili dikkat edilmesi gereken noktalar
LineBreak'yi, özellikle CJK dilleri için 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ı.NormalveyaStrictile 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 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
)
)
Strictness ve WordBreak ayarlarıyla biçimlendirilmiş metin (üstte) ile yalnızca LineBreak.Heading ile biçimlendirilmiş metin (altta) karşılaştırması.Satırlara bölünmüş metni tire ile ayırma
Hyphens API, 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, 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
)
)
}
)
)
Etkinleştirildiğinde kısa çizgi yalnızca aşağıdaki koşullarda kullanılır:
- Bir kelime bir satıra sığmaz.
Simplesatı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ğinden cihazınızda uygun yerel ayar ayarlanır.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Metin stili
- Düzen oluşturmayla ilgili temel bilgiler
- Oluşturma düzenlerindeki doğal ölçümler