Skip to main content

Jetpack Composeで調べたこと その1


Jetpack Composeを本番アプリに本格導入始めました
そのなかで不明点をまとめる


value系
・dimension
dimen/valueの中にあるファイルを読み込む
fontSize = dimensionResource(id = R.dimen.etc_title_size).value.sp

・string-array
stringArrayResource(R.array.planets_array)
https://stackoverflow.com/questions/65889035/how-to-use-string-resources-in-android-jetpack-compose

 

Fragment
・Jetpack Composeの組み込み方
FragmentってJetpack Compose全面採用したらなくなるっぽいね
ただ移行中はいるから以下で読み込める
https://stackoverflow.com/questions/59368360/how-to-use-compose-inside-fragment

ComposeView(requireContext()).apply {
            setContent {
            }
}

 

TextInputField
今まで自動でやっていたのを全部手動で書く必要があるっぽいw
これは誤算だなぁ

・最大文字数
最大文字数は自分で条件を書く
表示上はTextViewを右下につける
Material3はsupportingTextが使える
https://stackoverflow.com/questions/67136058/textfield-maxlength-android-jetpack-compose

・エラー
エラーはisErrorで赤くなる
https://stackoverflow.com/questions/68573228/how-to-show-error-message-in-outlinedtextfield-in-jetpack-compose

・hint
https://stackoverflow.com/questions/58883218/textfield-with-hint-text-in-jetpack-compose

placeholder = { 
         Text("Placeholder") 
    }

 

その他UI
・Spinner
Button + DropdownMenu + DropdownMenuItemで組み込む
https://stackoverflow.com/questions/65632626/android-create-spinner-with-compose

・Ripple Effect
indication = rememberRipple
https://stackoverflow.com/questions/65382491/jetpack-compose-onclick-ripple-is-not-propagating-with-a-circular-motion

・Toolbar
左右にスペースが空いてる状態で互換性がない
elevationを2.dpに変更したらそれっぽくなった

・ConstraintLayout
コードで位置指定するならConstraintLayoutは引き続き使える
ちょっとコードに癖あるけど
https://foso.github.io/Jetpack-Compose-Playground/layout/constraintlayout/

 

エラー
・Content padding parameter it is not used
https://stackoverflow.com/questions/72084865/content-padding-parameter-it-is-not-used

content = { padding ->
    Column(
        modifier = Modifier
            .padding(padding)

・This material API is experimental and is likely to change or to be removed in the future
Material3を使うとエラーが出るのでgradleに以下を入れて解消する
https://stackoverflow.com/questions/71069737/this-material-api-is-experimental-and-is-likely-to-change-or-to-be-removed-in-th

freeCompilerArgs += [
        '-opt-in=androidx.compose.material3.ExperimentalMaterial3Api'
    ]

 

こうしてアプリの1画面にJetpack Composeを取り込めましたとさ
全画面リニューアルに向けてまだまだ続くよ

関連記事:

Pocket