Composable Text
memiliki beberapa parameter opsional untuk mengatur gaya kontennya.
Di bawah ini, kami telah mencantumkan parameter yang mencakup kasus penggunaan paling umum dengan teks.
Untuk semua parameter Text
, lihat dokumentasi Compose Text
kode sumber Anda.
Setiap kali Anda menetapkan salah satu parameter ini, Anda menerapkan gaya ke seluruh nilai teks. Jika Anda perlu menerapkan beberapa gaya dalam baris yang sama atau paragraf, lihat bagian tentang beberapa paragraf gaya standar.
Gaya teks umum
Bagian berikut menjelaskan cara umum untuk menata gaya teks Anda.
Ubah warna teks
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
Mengubah ukuran teks
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
Memiringkan teks
Gunakan parameter fontStyle
untuk memiringkan teks (atau menyetel
FontStyle
lain).
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
Menebalkan teks
Gunakan parameter fontWeight
untuk menebalkan teks (atau menyetel FontWeight
lain).
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
Tambahkan bayangan
Parameter style
memungkinkan Anda menetapkan objek dengan jenis TextStyle
dan mengkonfigurasi beberapa
parameter, misalnya bayangan.
Shadow
menerima warna
untuk bayangan, offset, atau lokasinya dalam kaitannya dengan Text
dan
radius blur, yaitu seberapa blur tampilannya.
@Composable fun TextShadow() { val offset = Offset(5.0f, 10.0f) Text( text = "Hello world!", style = TextStyle( fontSize = 24.sp, shadow = Shadow( color = Color.Blue, offset = offset, blurRadius = 3f ) ) ) }
Menambahkan beberapa gaya dalam teks
Untuk menetapkan gaya yang berbeda dalam Text
yang sama
gunakan AnnotatedString
,
string yang bisa dianotasi dengan gaya anotasi arbitrer.
AnnotatedString
adalah class data yang berisi:
- Nilai
Text
List
dariSpanStyleRange
, setara dengan gaya inline dengan rentang posisi dalam nilai teksList
dariParagraphStyleRange
, yang menentukan perataan teks, arah teks, tinggi baris, dan gaya indentasi teks
TextStyle
untuk digunakan
dalam composable Text
, sedangkan SpanStyle
dan ParagraphStyle
untuk digunakan dalam AnnotatedString
. Untuk informasi selengkapnya tentang beberapa gaya dalam
membuat paragraf, lihat Menambahkan beberapa gaya dalam paragraf.
AnnotatedString
memiliki jenis aman
pembuat
untuk mempermudah pembuatan: buildAnnotatedString
.
@Composable fun MultipleStylesInText() { Text( buildAnnotatedString { withStyle(style = SpanStyle(color = Color.Blue)) { append("H") } append("ello ") withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) { append("W") } append("orld") } ) }
Mengaktifkan gaya visual lanjutan dengan Brush
Untuk mengaktifkan gaya visual teks yang lebih canggih, Anda dapat menggunakan Brush
API dengan
TextStyle
dan SpanStyle
. Di tempat mana pun
di mana Anda biasanya
gunakan TextStyle
atau SpanStyle
, Anda juga sekarang dapat menggunakan Brush
.
Menggunakan kuas untuk gaya visual teks
Konfigurasi teks Anda menggunakan kuas bawaan dalam TextStyle
. Sebagai contoh, Anda
dapat mengonfigurasi kuas linearGradient
ke teks Anda sebagai berikut:
val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/) Text( text = text, style = TextStyle( brush = Brush.linearGradient( colors = gradientColors ) ) )
![Menggunakan fungsi `linearGradient` Brush API dengan daftar warna yang ditentukan.](https://developer.android.com/static/develop/ui/compose/images/text-designmain.png?authuser=9&hl=id)
linearGradient
Brush API dengan daftar warna yang ditentukan.Anda tidak terbatas pada skema warna atau gaya pewarnaan khusus ini. Meskipun
kami telah memberikan contoh sederhana untuk
menyoroti, menggunakan salah satu
kuas atau bahkan hanya SolidColor
untuk menyempurnakan teks.
Integrasi
Karena Anda dapat menggunakan Brush
bersama dengan TextStyle
dan SpanStyle
,
integrasi dengan TextField
dan buildAnnotatedString
berjalan lancar.
Untuk informasi selengkapnya tentang cara menggunakan API kuas dalam TextField
, lihat
Input gaya dengan Brush API.
Gaya visual tambahan menggunakan SpanStyle
Menerapkan kuas ke rentang teks
Jika Anda hanya ingin mengoleskan kuas ke bagian teks, gunakan
buildAnnotatedString
dan SpanStyle
API, beserta kuas Anda
dan gradien pilihan.
Text( text = buildAnnotatedString { append("Do not allow people to dim your shine\n") withStyle( SpanStyle( brush = Brush.linearGradient( colors = rainbowColors ) ) ) { append("because they are blinded.") } append("\nTell them to put some sunglasses on.") } )
![Menggunakan kuas default dengan linearGradient sebagai gaya untuk Teks.](https://developer.android.com/static/develop/ui/compose/images/text-style.png?authuser=9&hl=id)
linearGradient
sebagai gaya untuk Text
.Opasitas dalam rentang teks
Untuk menyesuaikan opasitas rentang teks tertentu, gunakan fungsi SpanStyle
parameter alpha
opsional. Gunakan kuas yang sama untuk
kedua bagian teks, dan mengubah parameter alfa dalam span yang sesuai.
Dalam contoh kode, span teks pertama ditampilkan pada opasitas setengah
(alpha =.5f
) sedangkan yang kedua ditampilkan pada opasitas penuh (alpha = 1f
).
val brush = Brush.linearGradient(colors = rainbowColors) buildAnnotatedString { withStyle( SpanStyle( brush = brush, alpha = .5f ) ) { append("Text in ") } withStyle( SpanStyle( brush = brush, alpha = 1f ) ) { append("Compose ❤️") } }
![Menggunakan parameter alfa buildAnnotationdString dan SpanStyle, bersama linearGradient untuk menambahkan opasitas ke rentang teks.](https://developer.android.com/static/develop/ui/compose/images/text-opacity.png?authuser=9&hl=id)
buildAnnotatedString
dan SpanStyle
, beserta linearGradient
untuk menambahkan opasitas ke rentang teks.Referensi lainnya
Untuk contoh penyesuaian tambahan, lihat Menghapus Teks pada Compose
Mewarnai di postingan blog. Jika Anda tertarik untuk
mempelajari lebih lanjut tentang
bagaimana Brush
terintegrasi dengan Animations API kami, lihat Menganimasikan pewarnaan teks kuas
di Compose.
Terapkan efek marquee ke teks
Anda dapat menerapkan pengubah basicMarquee
ke composable mana pun untuk
menghasilkan efek scroll animasi. Efek marquee terjadi
jika konten
terlalu lebar untuk menampung batasan yang tersedia. Secara default, basicMarquee
memiliki
konfigurasi tertentu (seperti kecepatan dan penundaan awal), tetapi Anda juga dapat
ubah parameter ini untuk
menyesuaikan efeknya.
Cuplikan berikut menerapkan efek marquee dasar pada composable Text
:
@OptIn(ExperimentalFoundationApi::class) @Composable fun BasicMarqueeSample() { // Marquee only animates when the content doesn't fit in the max width. Column(Modifier.width(400.dp)) { Text( "Learn about why it's great to use Jetpack Compose", modifier = Modifier.basicMarquee(), fontSize = 50.sp ) } }
Gambar 6. Pengubah basicMarquee
yang diterapkan ke teks.
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- Paragraf gaya
- Desain Material 2 di Compose
- Pengubah Grafis