Bu sayfada, mesajınız için metnin stilini nasıl
paragrafından emin olun. Paragraf düzeyinde stil ayarlamak için aşağıdaki gibi parametreleri yapılandırabilirsiniz:
textAlign
ve lineHeight
veya kendi ParagraphStyle
öğenizi tanımlayın.
Metin hizalamasını ayarlama
textAlign
parametresi, yatay veya yatay
hizalama
metin, composable yüzey alanı içinde Text
.
Varsayılan olarak Text
, doğal metin hizalamasını
içerik değeri:
- Soldan sağa alfabeler için
Text
kapsayıcısının sol kenarı. Örneğin: Latin, Kiril veya Hangul - Sağdan sola alfabeler için
Text
kapsayıcısının sağ kenarıdır, örneğin Arapça veya İbranice
@Composable fun CenterText() { Text( "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp) ) }
Text
composable'ın metin hizalamasını manuel olarak ayarlamak isterseniz
TextAlign.Left
yerine TextAlign.Start
ve TextAlign.End
kullanılıyor
Text
sağ kenarına doğru ilerlerken sırasıyla TextAlign.Right
tercih edilen dil metin yönüne bağlı olarak composable'dan derlenebilir. Örneğin,
TextAlign.End
, Fransızca metin için sağ tarafa, sol tarafa hizalanır
Arapça metin için, ancak TextAlign.Right
ne olursa olsun sağ tarafa hizalanıyor
alfabe kullanılır.
Paragrafa birden çok stil ekleme
Bir paragrafa birden çok stil eklemek için ParagraphStyle
öğesini
AnnotatedString
. İsteğe bağlı 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.
Bir metne birden çok stil ekleme hakkında daha fazla bilgi için bkz. Metne birden çok stil ekleyin.
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") } } ) }
Satır yüksekliğini ve dolguyu ayarlama
includeFontPadding
,
ve son satırının altındaki yazı tipi metriklerini görebilirsiniz.
Oluşturma BOM sürümü 2024.01.01
sürümünden itibaren includeFontPadding
ayarlandı
Varsayılan metin düzeni false
ile daha uyumlu olur.
yaygın tasarım araçları bulunuyor.
lineHeight
yapılandırması yeni bir özellik değil, daha önce kullanıma sunuldu
Android Q'dan beri Text
için lineHeight
hizmetini şu ayarı kullanarak yapılandırabilirsiniz:
lineHeight
parametresi kullanır ve bu parametre,
metin. 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.](https://developer.android.com/static/develop/ui/compose/images/text-lineheightv3.png?authuser=9&hl=tr)
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 işlemi için resmin satırları arasındaki ölçülen alanı
Böylece, metni tek bir satır da dahil olmak üzere tüm satırlara daha uygun şekilde dağıtabilirsiniz
ve bir metin bloğunun en üst satırı görünür.
LineHeightStyle.Alignment
, alandaki çizginin nasıl hizalanacağını tanımlar
satır yüksekliği ile ifade edilir. Her satırda, metni tablodaki
üst, alt, orta veya orantılı olarak gösterir. 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, çok satırlı metnin
ortalandığında ortaya çıkan çeşitli LineHeightStyle.Trim
yapılandırmaları
(LineHeightStyle.Alignment.Center
).
![]() |
![]() |
LineHeightStyle.Trim.None |
LineHeightStyle.Trim.Both |
![]() |
![]() |
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 hangi ölçütlere göre bölüneceğini tanımlar
çok satırlı olabilir. İ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 ihlal 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 metin bloğunun
satır uzunlukları daha değişkendir.](https://developer.android.com/static/develop/ui/compose/images/text/simple-paragraph.png?authuser=9&hl=tr)
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ştir
Ayrıca, Strategy
ile kendi LineBreak
yapılandırmanızı da oluşturabilirsiniz.
parametresinden sonra bir değer girin. Strategy
şunlardan herhangi 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ı aşağıdaki gibi daha okunabilir metinler için optimize eder: tireye sokma. (Diğer tüm öğeler için varsayılan değer olmalıdır:Balanced
veyaSimple
.)Simple
: Temel ve hızlı strateji. Etkinleştirilirse, tireye ayırma işlemi yalnızca tek başına bir satıra sığmayan kelimeler. Metin düzenlerken kullanışlıdır Böylece, yazarken konumun değişmemesini sağlayabilirsiniz.
Aşağıdaki snippet'te, varsayılan ayarlara sahip bir paragraf arasındaki fark gösterilmektedir
ve Balanced
satır sonu içeren, küçük ekranlar için optimize edilmiş bir paragraf
strateji:
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 sonu kullanılan paragraf
stratejisi, varsayılandan daha tutarlı satır uzunluklarına sahip.](https://developer.android.com/static/develop/ui/compose/images/text/balanced-default.png?authuser=9&hl=tr)
Balanced
satır sonu stratejisi ile biçimlendirilmiş bir paragraf
(üstte) yer alır.CJK ile ilgili dikkat edilmesi gereken noktalar
Ayrıca LineBreak
öğesini Strictness
ve
WordBreak
API'ler, CJK dilleri için özel olarak tasarlanmıştır.
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 değerlerde satır sonunun güvenlik düzeyini açıklar
özellikler:
Default
— Yerel ayar için varsayılan kırma kuralları.Normal
ile karşılık gelebilir veyaStrict
.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
,
şu özellikleri kullanın:
Default
— Yerel ayar için varsayılan kırma kuralları.Phrase
— Satır sonu, kelime öbeklerine dayalıdır.
Aşağıdaki snippet'te Strict
güvenlik düzeyi ve Phrase
kelime engelleme kullanılıyor
Japonca metin için ayar:
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.](https://developer.android.com/static/develop/ui/compose/images/text/cjk-line-break.png?authuser=9&hl=tr)
Strictness
ve WordBreak
ayarlarıyla biçimlendirilmiş (üst)
ve yalnızca LineBreak.Heading
(alt) ile biçimlendirilmiş metin arasındaki farkları karşılaştırın.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, aralarına tire işareti eklenir
bir kelimenin hecelerini uygun kısa çizgilerle ayırın.
Kısa çizgilendirme varsayılan olarak etkin değildir. Kısaltmayı etkinleştirmek için
TextStyle
bloğunda parametre olarak Hyphens.Auto
:
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 ) ) } ) )
![Tirelemenin etkin olmadığı bir paragraf ve tirelendirmenin etkin olduğu bir paragraf.
Tireleme etkinleştirildiğinde, bir kelime kısa çizgiyle çevrilir ve iki satıra bölünür.](https://developer.android.com/static/develop/ui/compose/images/text/hyphens.png?authuser=9&hl=tr)
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 bir kelime kısa çizgiden oluşursa satır tek bir kelimeden kısa olduğunda görülür kelime. - Cihazınızda uygun tirelemeye uygun yerel ayar sistemde bulunan sözlükleri kullanarak belirlenir.
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