Jetpack Compose ことはじめ

リリースしているアプリで今後も継続していくものについては いい加減 Jetpack Compose に移行しようと思っている。

Androidアプリ開発にまとまった時間がとれないので、 細切れ時間でも開発できる環境をつくろうと思って 試行錯誤しているうちに半年くらい経過してしまった。

一番簡単なキャンバス

Jetpack Compose を使った Android アプリの雛形は Android Studio で生成するとして、 生成された雛形の MainActivity.kt を修正していきます。

setContent の部分で SketchTheme と出てきますが、これは 今回の AndroidStudio で雛形アプリ作成時に Sketch というアプリ名を指定したためです。 適宜読み替えてください。

// MainActivity.kt

class MainActivity : ComponentActivity() {
    private companion object {
        val bgColor  = Color(238, 232, 213)
        val modifier = Modifier.padding().fillMaxSize().background(bgColor).clipToBounds()
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        setContent {
            SketchTheme {
                MyCanvas(modifier)
            }
        }
    }
}

@Composable
fun MyCanvas(m: Modifier){
    val stroke = Stroke(1f)
    val brush = SolidColor(Color(88, 110, 117))

    val path = Path()
    path.moveTo(100f, 100f)
    path.lineTo(200f, 100f)
    path.lineTo(200f, 200f)
    path.lineTo(100f, 200f)
    path.close()

    Canvas(modifier = m){
        drawPath(
            path = path,
            brush = brush,
            style = stroke)
    }
}

MyCanvas という Composable が定義されていて、そこに Path で四角形を 描画しただけです。

このポストにあるような環境で 開発しているので、次のようにして apk をビルドしてインストールします。

$ ./gradlew assembleDebug
$ adb install app/build/outputs/apk/debug/app-debug.apk

起動するとこうなりました。

先(Stroke)が細い。 とりあえず Stroke(1f) として太さを 1f として安易に指定してあるのがまずい。

いつも使っているペンは 0.35mm 程度なので、ストロークがその太さになるように修正する。

計算方法ですが、 densityDpi を使います。 この値は実行するデバイスごとに異なる値になるのですが、 意味するところは（実行しているデバイスにおける） 1インチあたりのピクセル数 とのこと。

1インチを 25.4mm として計算すれば Stroke に渡すべき太さの値は次のようになる:

val densityDpi = LocalContext.current.resources.displayMetrics.densityDpi
val strokeWidth = 0.35f * densityDpi.toFloat() / 25.4f
val stroke = Stroke(strokeWidth)

つまり、 densityDpi値 : 25.4mm = 求めるピクセル数 : 0.35mm なので 「内項の積＝外項の積」によりこれでよいはず。

実行してみる:

さっきより太くなった。たぶん、これで 0.35mm なのであろう。

もっと簡単に解決する方法がありそう。そのうち claude さんとかにきいてみる。

かきかけです。