[Android] 022. OutLineText(縁ありテキスト)

はじめは古典的にCanvasで頑張ったりしてみましたが
なにかスマートな実装は無いものかと探してみたら…
https://stackoverflow.com/questions/66958260/how-to-outline-text-in-jetpack-compose

さすがです!
Jetpack Compose1.4.0で試験的に導入されたようです
https://developer.android.com/jetpack/androidx/releases/compose-ui?hl=ja

colorをbrushに置換えることもできました

@OptIn(ExperimentalTextApi::class)
@Composable fun OutLineText(
    text: String,
    fontSize: TextUnit = TextStyle.Default.fontSize,
    fontFamily: FontFamily? = TextStyle.Default.fontFamily,
    borderWidth: Float = 2f,
    borderColor: Color = TextStyle.Default.color,
    textColor: Color? = null
) {
    // drawStyleを使用する場合はModifierは使用できません
    val strokeStyle = TextStyle.Default.copy(
        fontSize = fontSize,
        color = borderColor,
        fontFamily = fontFamily,
        drawStyle = Stroke(width = borderWidth, miter = 10f, join = StrokeJoin.Round)
    )

    Box {
        textColor?.let {
            // styleを引き継ぐことで文字のズレを防ぐ
            val fillStyle = strokeStyle.copy(color = it, drawStyle = Fill)
            Text(text = text, style = fillStyle)
        }
        Text(text = text, style = strokeStyle)
    }
}
// TestDrawTextThemeはプロジェクトのテンプレートのテーマ(ダークテーマ対応)
@Composable fun AppContent() {
    TestDrawTextTheme {
        Surface(modifier = Modifier.fillMaxSize()) {
           Column {
               OutLineText(text = "こんにちわ!")
               OutLineText(text = "こんばんわ...", 32.sp, textColor = Color.Red)
           }
        }
    }
}

Android Studio Dolphin 2021.3.1 Patch 1 built on September 30, 2022

スポンサーリンク
タイトルとURLをコピーしました