Halaman ini menjelaskan bagaimana Anda dapat menata gaya teks untuk
yang sesuai. Untuk menetapkan gaya visual tingkat paragraf, Anda dapat mengonfigurasi parameter seperti
textAlign dan lineHeight atau tentukan ParagraphStyle Anda sendiri.
Setel perataan teks
Parameter textAlign memungkinkan Anda menetapkan dimensi
penyelarasan
teks dalam area platform composable Text.
Secara default, Text akan memilih perataan teks alami, tergantung
nilai kontennya:
- Tepi kiri penampung
Textuntuk alfabet kiri ke kanan seperti Latin, Cyrillic (Sirilik), atau Hangul - Tepi kanan penampung
Textuntuk 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
menggunakan TextAlign.Start dan TextAlign.End, bukan TextAlign.Left dan
TextAlign.Right masing-masing, saat ditetapkan ke tepi kanan Text
composable yang 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 di
AnnotatedString, yang dapat dianotasi dengan gaya anotasi arbitrer.
Setelah sebagian teks Anda ditandai dengan ParagraphStyle, bagian tersebut akan
dipisahkan dari teks sisanya seolah-olah memiliki {i>line feed<i} di awal dan
berakhir.
Untuk informasi selengkapnya tentang cara menambahkan beberapa gaya dalam teks, lihat Menambahkan beberapa gaya dalam teks.
AnnotatedString memiliki jenis aman
pembuat
untuk mempermudah pembuatan: 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 BOM Compose versi 2024.01.01, includeFontPadding ditetapkan
ke false secara default, yang menghadirkan tata letak teks default lebih sesuai dengan
peralatan desain yang 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 mengetahui informasi selengkapnya tentang
memilih unit teks yang sesuai, lihat TextUnit.
lineHeight yang ditetapkan, dan memangkas ruang ekstra jika perlu.
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 lebih memusatkan dan menata gaya teks
menggunakan konfigurasi dengan API eksperimental LineHeightStyle: LineHeightStyle.Alignment
dan LineHeightStyle.Trim (includeFontPadding harus ditetapkan ke false untuk
Pangkas agar 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
selengkapnya tentang konteks perubahan ini, cara kerja includeFontPadding dalam Tampilan
sistem, dan perubahan yang dibuat untuk Compose serta LineHeightStyle baru
Google Cloud Platform.
Sisipkan baris baru
LineBreak API menentukan kriteria yang digunakan untuk membagi teks
beberapa baris. Anda dapat menentukan jenis putus-putus yang Anda inginkan dalam
Blok TextStyle dari composable Text Anda. Jenis pemisah baris preset
meliputi hal berikut:
Simple— Cepat dan terjeda baris dasar. Direkomendasikan untuk kolom input teks.Heading— Melanggar baris dengan aturan pelanggaran yang lebih longgar. Direkomendasikan untuk singkat teks, seperti judul.Paragraph— Pemisahan baris yang lebih lambat dan berkualitas lebih tinggi agar lebih mudah dibaca. Direkomendasikan untuk jumlah teks yang lebih besar, seperti paragraf.
Cuplikan berikut menggunakan Simple dan Paragraph untuk menentukan
perilaku pemecahan 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 jeda baris Paragraph menghasilkan
hasil yang lebih seimbang secara visual daripada
penghentian baris Simple.
Sesuaikan jeda baris
Anda juga dapat membuat konfigurasi LineBreak sendiri dengan Strategy
. Strategy dapat berupa salah satu dari hal berikut:
Balanced— Upaya untuk menyeimbangkan panjang baris teks, juga menerapkan penggunaan tanda hubung otomatis jika diaktifkan. Direkomendasikan untuk layar kecil, seperti smartwatch, untuk memaksimalkan jumlah teks yang ditampilkan.HighQuality— Mengoptimalkan paragraf agar teks lebih mudah dibaca, termasuk penggunaan tanda hubung jika diaktifkan. (Harus menjadi {i>default<i} untuk semua yang tidakBalancedatauSimple.)Simple— strategi dasar dan cepat. Jika diaktifkan, tanda hubung dilakukan hanya untuk kata-kata yang tidak muat di seluruh baris dengan sendirinya. 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 pemisah baris Balanced
strategi:
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
(atas) versus paragraf yang diformat tanpa strategi pemisah baris.Pertimbangan CJK
Anda juga dapat menyesuaikan LineBreak dengan Strictness dan
WordBreak API, yang dirancang khusus untuk bahasa CJK.
Anda mungkin tidak selalu melihat efek API ini dalam bahasa non-CJK. Secara keseluruhan,
aturan pemecahan baris ditentukan
berdasarkan lokalitas.
Strictness menjelaskan pengetatan pemutusan baris dengan hal berikut
properti:
Default— Aturan pelanggaran default untuk lokalitas. Mungkin sesuai denganNormalatauStrict.Loose— Aturan yang paling tidak ketat. Cocok untuk garis pendek.Normal— Aturan paling umum untuk batas baris.Strict— Aturan paling ketat untuk pemisah baris.
WordBreak menentukan cara pemisah baris disisipkan dalam kata dengan
properti berikut:
Default— Aturan pelanggaran default untuk lokalitas.Phrase— Pemisahan baris didasarkan pada frasa.
Cuplikan berikut menggunakan pengetatan Strict dan pemecahan kata Phrase
setelan 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
)
)
Strictness dan WordBreak (atas)
versus teks yang hanya diformat dengan LineBreak.Heading (bawah).Tanda hubung teks yang terpisah menjadi garis
Hyphens API memungkinkan Anda menambahkan dukungan penggunaan tanda hubung ke aplikasi.
Tanda hubung mengacu pada penyisipan tanda baca seperti tanda hubung untuk menunjukkan bahwa
kata dibagi menjadi beberapa baris teks. Jika diaktifkan, tanda hubung ditambahkan di antara
suku kata dari suatu kata dengan
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 masuk ke dalam garis. Jika menggunakan strategi jeda baris
Simple, penggunaan tanda hubung kata hanya terjadi jika sebuah baris lebih pendek dari garis kata. - Lokal yang sesuai telah ditetapkan pada perangkat Anda, sebagaimana penggunaan tanda hubung yang sesuai ditentukan dengan menggunakan kamus yang ada di dalam sistem.
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Mengatur gaya teks
- Dasar-dasar tata letak Compose
- Pengukuran intrinsik di tata letak Compose