Overview
Jetpack ComposeのTextのスタイルを変更する方法を学習してみた。
日本語に翻訳された公式のページもあったので、分かりやすかったです。
summary
文字のスタイルを変えるには、Textの中にパラメーターを書いて、色やフォントのサイズを指定します。
フォントサイズを変更するには、fontSize = 数値.spと書きます。
色を指定するには、16進数なら、color = Color(0x16進数の色)、RGBだと、Color(0, 0, 255)といった感じで書きます。
@Composable
fun Greeting(name: String) {
Column {
// フォントサイズを指定する。
Text(text = "Hello $name!", fontSize = 25.sp)
// 16進数で色を指定する
Text(text = "Hello $name!", color = Color(0xFF00FF00))
// RGBで色を指定する
Text(text = "Hello $name!", color = Color(0, 0, 255))
}
}
全体のコード
package com.example.basiccodelab
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp
import com.example.basiccodelab.ui.theme.BasicCodelabTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
BasicCodelabTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Greeting(name = "Android")
}
}
}
}
}
@Composable
fun Greeting(name: String) {
Column {
// フォントサイズを指定する。
Text(text = "Hello $name!", fontSize = 25.sp)
// 16進数で色を指定する
Text(text = "Hello $name!", color = Color(0xFF00FF00))
// RGBで色を指定する
Text(text = "Hello $name!", color = Color(0, 0, 255))
}
}
thoughts
今回は、モケラボさんという人の動画を参考に学習してみました。Androidは日本語の情報が少ないので、ありがたかったですね。
今回は、短い記事になりましたが小さなアウトプットには丁度良い内容だと思います。
参考になった動画
Discussion