Bu sayfada, paragrafınız için metin stilini nasıl ayarlayacağınız açıklanmaktadır. Paragraf düzeyinde stil ayarlamak için textAlign ve lineHeight gibi parametreleri yapılandırabilir veya kendi ParagraphStyle parametresini tanımlayabilirsiniz.
Metin hizalamasını ayarlama
textAlign parametresi, Text composable yüzey alanı içinde 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ısının sol kenarı - Arapça veya İbranice gibi sağdan sola yazılan alfabeler için
Textkapsayıcısının sağ kenarı
@Composable
fun CenterText() {
Text(
"Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
)
}
Bir Text composable'ın metin hizalamasını manuel olarak ayarlamak isterseniz tercih edilen dil metin yönüne bağlı olarak Text composable'ın sağ kenarına çözümlendiği için TextAlign.Left ve TextAlign.Right yerine sırasıyla TextAlign.Start ve TextAlign.End kullanmayı tercih edin. Örneğin, TextAlign.End, Fransızca metin için sağ tarafa, Arapça metin için sol tarafa hizalanırken TextAlign.Right, hangi alfabede kullanılırsa kullanılsın sağ tarafa hizalanır.
Paragrafa birden çok stil ekleme
Bir paragrafa birden çok stil eklemek için AnnotatedString içinde ParagraphStyle kullanabilirsiniz. Bu stile isteğe bağlı ek açıklama stilleriyle ek açıklama eklenebilir.
Metninizin bir bölümü ParagraphStyle ile işaretlendiğinde, bu kısı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 edinmek için Metine birden çok stil ekleme bölümüne bakın.
AnnotatedString, oluşturmayı kolaylaştıran bir type-safe oluşturucu içerir: buildAnnotatedString. Aşağıdaki snippet, ParagraphStyle değerini ayarlamak için buildAnnotatedString değerini 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")
}
}
)
}
Satır yüksekliğini ve dolguyu ayarlama
includeFontPadding, metnin ilk satırının üst kısmındaki ve son satırının altındaki yazı tipi metriklerine göre fazladan dolgu ekleyen eski bir özelliktir.
BOM oluşturma 2024.01.01 sürümünden itibaren includeFontPadding varsayılan olarak false değerine ayarlıdır. Bu sayede, varsayılan metin düzeni yaygın tasarım araçlarıyla daha uyumlu hâle gelir.
lineHeight'i yapılandırma özelliği yeni bir özellik değil. Android Q'dan bu yana kullanımdaydı. Her metin satırındaki satır yüksekliğini dağıtan lineHeight parametresini kullanarak Text için lineHeight yapılandırabilirsiniz. Ardından, bu metnin alan içinde nasıl hizalanacağını daha ayrıntılı şekilde yapılandırmak ve boşlukları kaldırmak için yeni LineHeightStyle API kullanabilirsiniz.
Daha fazla hassasiyet için lineHeight ayarını, "sp" (ölçeklendirilmiş piksel) yerine "em" (göreli yazı tipi boyutu) kullanarak yapmak isteyebilirsiniz. Uygun bir metin birimi seçme hakkında daha fazla bilgi için TextUnit bölümüne bakın.
lineHeight içinde ayarlamak için Hizalama ve Kırpma seçeneklerini kullanın ve gerekirse fazladan boşluk ekleyin.
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 ayarlamasına ek olarak, artık LineHeightStyle deneysel API'sı ile yapılandırmaları kullanarak metni ortalayabilir ve biçimlendirebilirsiniz: LineHeightStyle.Alignment ve LineHeightStyle.Trim (Kırpma özelliğinin çalışması için includeFontPadding, false olarak ayarlanmalıdır). Hizalama ve Kırpma, metni tüm satırlara daha uygun bir şekilde dağıtmak için metin satırları arasındaki ölçülen boşluğu kullanır. Bu boşluk, tek bir metin satırı ve bir metin bloğunun üst satırı da dahildir.
LineHeightStyle.Alignment, satır yüksekliğinin sağladığı alanda ç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 ayarlamalarından oluşturulan, metninizin ilk satırının üst ve son satırının altındaki fazladan boşlukları bırakmanıza veya kaldırmanıza olanak tanır. Aşağıdaki örneklerde, hizalama ortalandığında (LineHeightStyle.Alignment.Center) çeşitli LineHeightStyle.Trim yapılandırmalarında çok satırlı metnin 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 öğesinin View sisteminde nasıl çalıştığı ve Compose ile yeni LineHeightStyle API'lerde yapılan değişiklikler hakkında daha fazla bilgi edinmek için Metni Oluşturulan Metinde Yazı Tipi Doldurmayı Düzeltme blog yayınına bakın.
Satır sonu ekle
LineBreak API, metnin birden çok satıra bölünmesini sağlayan ölçütleri tanımlar. Text composable'ınızın TextStyle bloğunda istediğiniz satır sonu türünü belirtebilirsiniz. Önceden ayarlanmış satır sonlama türleri şunlardır:
Simple: Hızlı ve basit satır sonlama. Metin giriş alanları için önerilir.Heading— Daha gevşek kırma kurallarıyla satır sonları. Başlıklar gibi kısa metinler için önerilir.Paragraph— Daha iyi okunabilirlik için daha yavaş, daha yüksek kaliteli satır sonları. Paragraflar gibi daha büyük boyutlu metin 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 öğelerini 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 çıkışta Paragraph satır kırma davranışının Simple satır kesme işlemine göre görsel olarak daha dengeli bir sonuç verdiğine dikkat edin.
Satır sonlarını özelleştir
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, ayrıca etkinleştirilirse otomatik tireleme uygular. Görüntülenen metin miktarını en üst düzeye çıkarmak için saatler gibi küçük ekranlarda önerilir.HighQuality— Bir paragrafı, etkinleştirildiğinde tireleme dahil olmak üzere daha okunabilir metinler için optimize eder. (BalancedveyaSimpledışındaki her şey için varsayılan olmalıdır.)Simple— Temel, hızlı strateji. Etkinleştirilirse kısa çizgi yalnızca bir satırın tamamına sığmayan kelimeler için yapılır. Yazarken konumu değiştirmekten kaçınmak için metin düzenlerken faydalıdır.
Aşağıdaki snippet, varsayılan ayarlara sahip bir paragraf ile Balanced satır bölme stratejisine sahip 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
)
}
)
)
Balanced satır bölme stratejisi (üstte) kullanarak biçimlendirilmiş paragraf, satır ayırma stratejisi olmadan biçimlendirilmiş bir paragrafa kıyasla.CJK ile ilgili dikkat edilmesi gereken noktalar
Ayrıca LineBreak uygulamasını, CJK dilleri için özel olarak tasarlanmış Strictness ve WordBreak API'leriyle özelleştirebilirsiniz.
Bu API'lerin etkilerini CJK dışındaki dillerde her zaman göremeyebilirsiniz. Genel olarak satır bozma kuralları yerel ayara göre tanımlanır.
Strictness, satır sonunun güvenlik düzeyini aşağıdaki özelliklerle açıklar:
Default— Yerel ayar için varsayılan ihlal kuralları.NormalveyaStrictbiçimine karşılık gelebilir.Loose: En az kısıtlayıcı kurallar. Kısa hatlar için uygundur.Normal: Satır sonu için en yaygın kurallardır.Strict: Satır sonla ilgili en katı kurallardır.
WordBreak, aşağıdaki özelliklerle kelime içine satır sonlarının nasıl eklenmesi gerektiğini tanımlar:
Default— Yerel ayar için varsayılan ihlal kuralları.Phrase— Satır kesme, ifadelere göre belirlenir.
Aşağıdaki snippet'te, Japonca bir metin için Strict güvenlik düzeyi ve Phrase kelime ayırma 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
)
)
Strictness ve WordBreak ayarlarıyla biçimlendirilmiş metin (üstte) ve yalnızca LineBreak.Heading (alt) ile biçimlendirilmiş metin aksine.Çizgilere bölünmüş metin için kısa çizgi
Hyphens API, uygulamanıza tire işareti desteği eklemenize olanak tanır.
Kısa çizgi, bir kelimenin metin satırlarına bölündüğünü belirtmek için kısa çizgiye benzer bir noktalama işareti eklenmesi anlamına gelir. Bu özellik etkinleştirildiğinde, uygun kısa çizgileme noktalarında kelimenin hecelerinin arasına kısa çizgi eklenir.
Varsayılan olarak, tireleme etkin değildir. Kısa çizgiyi 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
)
)
}
)
)
Etkinleştirildiğinde, kısa çizgi yalnızca aşağıdaki koşullarda gerçekleşir:
- Kelime bir çizgiye sığmıyor.
Simplesatır kırma stratejisi kullanırsanız bir kelimenin tirelenmesi yalnızca bir satırı tek kelimeden kısa olduğunda gerçekleşir. - Uygun tireler sistemde bulunan sözlükler kullanılarak belirlendiğinden cihazınızda uygun yerel ayar belirlenir.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Metnin stilini belirleme
- Düzen oluşturma ile ilgili temel bilgiler
- Oluşturma düzenlerindeki içsel ölçümler