Halaman ini menjelaskan cara menata gaya teks untuk
paragraf Anda. Untuk menetapkan gaya visual tingkat paragraf, Anda dapat mengonfigurasi parameter seperti textAlign
dan lineHeight
atau menentukan ParagraphStyle
Anda sendiri.
Setel perataan teks
Parameter textAlign
memungkinkan Anda menyetel
perataan horizontal
teks dalam area permukaan composable Text
.
Secara default, Text
akan memilih perataan teks alami, tergantung
nilai kontennya:
- Tepi kiri penampung
Text
untuk alfabet kiri ke kanan seperti Latin, Cyrillic (Sirilik), atau Hangul - Tepi kanan penampung
Text
untuk alfabet kanan ke kiri seperti bahasa Arab atau Ibrani
@Composable fun CenterText() { Text( "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp) ) }
Jika Anda ingin menetapkan perataan teks composable Text
secara manual, pilih
gunakan TextAlign.Start
dan TextAlign.End
, bukan TextAlign.Left
dan
TextAlign.Right
, karena penyelesaian ke tepi kanan composable Text
bergantung pada orientasi teks bahasa pilihan. Misalnya, TextAlign.End
meratakan ke sisi kanan untuk teks bahasa Prancis dan ke sisi kiri untuk teks bahasa Arab, tetapi TextAlign.Right
akan meratakan ke sisi kanan, alfabet mana pun yang digunakan.
Menambahkan beberapa gaya dalam satu paragraf
Untuk menambahkan beberapa gaya dalam paragraf, Anda dapat menggunakan ParagraphStyle
dalam
AnnotatedString
, yang dapat dianotasi dengan gaya anotasi arbitrer.
Setelah sebagian teks ditandai dengan ParagraphStyle
, bagian tersebut
akan dipisahkan dari teks lainnya seolah-olah memiliki feed baris di awal dan
akhir.
Untuk mengetahui informasi selengkapnya tentang cara menambahkan beberapa gaya dalam teks, baca artikel Menambahkan beberapa gaya dalam teks.
AnnotatedString
memiliki builder
yang aman
agar lebih mudah dibuat: buildAnnotatedString
. Cuplikan berikut menggunakan
buildAnnotatedString
untuk menetapkan ParagraphStyle
:
@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") } } ) }
Menyesuaikan tinggi baris dan padding
includeFontPadding
adalah properti lama yang menambahkan padding tambahan berdasarkan
metrik font di bagian atas baris pertama dan bagian bawah baris terakhir teks.
Mulai dari Compose BOM versi 2024.01.01
, includeFontPadding
ditetapkan ke false
secara default, yang menghadirkan tata letak teks default lebih sesuai dengan alat desain umum.
Kemampuan untuk mengonfigurasi lineHeight
bukanlah hal yang baru, melainkan telah tersedia
sejak Android Q. Anda dapat mengonfigurasi lineHeight
untuk Text
menggunakan parameter
lineHeight
, yang mendistribusikan tinggi baris di setiap baris
teks. Anda kemudian dapat menggunakan LineHeightStyle API
baru untuk mengonfigurasi
lebih lanjut perataan teks ini dalam ruang, dan menghapus spasi kosong.
Anda mungkin ingin menyesuaikan lineHeight
menggunakan unit teks “em” (ukuran font
relatif) bukan “sp” (piksel yang diskalakan) untuk presisi yang lebih baik. Untuk informasi selengkapnya tentang
memilih unit teks yang sesuai, lihat 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 ) ) ) )
Selain menyesuaikan lineHeight
, Anda kini dapat memusatkan dan menata gaya lebih lanjut
menggunakan konfigurasi dengan API eksperimental LineHeightStyle
: LineHeightStyle.Alignment
dan LineHeightStyle.Trim
(includeFontPadding
harus ditetapkan ke false
agar
Trim dapat berfungsi). Alignment dan Trim menggunakan spasi terukur di antara baris teks
untuk mendistribusikannya dengan lebih tepat ke semua baris–termasuk satu baris
teks dan baris atas blok teks.
LineHeightStyle.Alignment
menentukan cara perataan garis pada ruang
yang diberikan oleh tinggi baris. Dalam setiap baris, Anda dapat meratakan teks ke
bagian atas, bawah, tengah, atau secara proporsional. LineHeightStyle.Trim
kemudian memungkinkan Anda
meninggalkan atau menghapus ruang tambahan di bagian atas baris pertama dan bawah
baris terakhir teks Anda, yang dihasilkan dari penyesuaian lineHeight
dan
Alignment. Contoh berikut menunjukkan tampilan teks multibaris dengan
berbagai konfigurasi LineHeightStyle.Trim
saat perataan dipusatkan
(LineHeightStyle.Alignment.Center
).
LineHeightStyle.Trim.None |
LineHeightStyle.Trim.Both |
LineHeightStyle.Trim.FirstLineTop |
LineHeightStyle.Trim.LastLineBottom |
Lihat postingan blog Memperbaiki Padding Font di Teks Compose untuk mempelajari
lebih lanjut konteks perubahan ini, cara kerja includeFontPadding
dalam sistem
View, serta perubahan yang dibuat untuk Compose dan LineHeightStyle
API baru.
Sisipkan jeda baris
LineBreak
API menentukan kriteria pemisahan teks
dalam beberapa baris. Anda dapat menentukan jenis pemisahan baris yang diinginkan dalam blok TextStyle
dari composable Text
. Jenis jeda baris preset
mencakup hal berikut:
Simple
— Jeda baris dasar yang cepat. Direkomendasikan untuk kolom input teks.Heading
— Melanggar baris dengan aturan yang lebih longgar. Direkomendasikan untuk teks singkat, seperti judul.Paragraph
— Jeda baris yang lebih lambat dan berkualitas lebih tinggi untuk meningkatkan keterbacaan. Direkomendasikan untuk jumlah teks yang lebih besar, seperti paragraf.
Cuplikan berikut menggunakan Simple
dan Paragraph
untuk menentukan
perilaku pemisah baris pada blok teks yang panjang:
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 ) ) } ) )
Pada output di atas, perhatikan bahwa perilaku pemutusan baris Paragraph
menghasilkan
hasil yang lebih seimbang secara visual daripada jeda baris Simple
.
Sesuaikan jeda baris
Anda juga dapat membuat konfigurasi LineBreak
sendiri dengan parameter
Strategy
. Strategy
dapat berupa salah satu dari hal berikut:
Balanced
— Mencoba menyeimbangkan panjang baris teks, serta menerapkan tanda hubung otomatis jika diaktifkan. Disarankan untuk layar kecil, seperti jam tangan, untuk memaksimalkan jumlah teks yang ditampilkan.HighQuality
— Mengoptimalkan paragraf agar teks lebih mudah dibaca, termasuk tanda hubung jika diaktifkan. (Harus menjadi default untuk semua yang bukanBalanced
atauSimple
).Simple
— strategi dasar dan cepat. Jika diaktifkan, tanda hubung hanya dilakukan untuk kata-kata yang tidak bisa dimuat di seluruh baris. Berguna untuk mengedit teks agar tidak mengubah posisi saat mengetik.
Cuplikan berikut menunjukkan perbedaan antara paragraf dengan setelan default
dan paragraf yang dioptimalkan untuk layar kecil dengan strategi pemecahan
baris Balanced
:
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 ) } ) )
Pertimbangan CJK
Anda juga dapat menyesuaikan LineBreak
dengan API Strictness
dan
WordBreak
yang dirancang khusus untuk bahasa CJK.
Anda mungkin tidak selalu melihat efek API ini dalam bahasa non-CJK. Secara keseluruhan, aturan pemutusan baris ditentukan berdasarkan lokalitas.
Strictness
menjelaskan pengetatan pemisahan baris dengan properti
berikut:
Default
— Aturan yang melanggar default untuk lokalitas. Dapat berkaitan denganNormal
atauStrict
.Loose
— Aturan yang paling longgar. Cocok untuk garis pendek.Normal
— Aturan paling umum untuk jeda baris.Strict
— Aturan paling ketat untuk memutus baris.
WordBreak
menentukan cara menyisipkan baris baru dalam kata dengan
properti berikut:
Default
— Aturan yang melanggar default untuk lokalitas.Phrase
— Jeda baris didasarkan pada frasa.
Cuplikan berikut menggunakan pengetatan Strict
dan setelan jeda kata Phrase
untuk teks bahasa Jepang:
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 ) )
Pisahkan teks antar baris dengan tanda hubung
Hyphens
API memungkinkan Anda menambahkan dukungan tanda hubung ke aplikasi.
Tanda hubung mengacu pada penyisipan tanda baca seperti tanda hubung untuk menunjukkan bahwa
sebuah kata dibagi di seluruh baris teks. Jika diaktifkan, tanda hubung akan ditambahkan di antara
silabel sebuah kata pada titik tanda hubung yang sesuai.
Secara default, tanda hubung tidak diaktifkan. Untuk mengaktifkan tanda hubung, tambahkan
Hyphens.Auto
sebagai parameter dalam blok TextStyle
:
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 ) ) } ) )
Jika diaktifkan, tanda hubung hanya terjadi dalam kondisi berikut:
- Sebuah kata tidak muat di dalam garis. Jika Anda menggunakan strategi pemutusan baris
Simple
, tanda hubung untuk suatu kata hanya akan muncul jika baris lebih pendek dari satu kata. - Lokalitas yang sesuai ditetapkan di perangkat Anda, sebagaimana tanda hubung yang sesuai ditentukan menggunakan kamus yang ada di sistem.
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Menata gaya teks
- Dasar-dasar tata letak Compose
- Pengukuran intrinsik di tata letak Compose