Android 用Jektpack Compose 來開発app【01】 - 初期構築篇

• 前回Jetpack composeに関する記事を投稿してから
  2〜3年が経ちました
  
  その間、断続的に少し触れていましたが
  体系的に研究することはありませんでした
  
  ちょうど最近
  プロジェクト全体をComposeで開発する機会がありました
  そのため、いろいろと試行錯誤した結果
  いくつかの心得があります
  
  この過程をメモとして皆さんと共有することにしました
  

• まず、今回使用するライブラリを決定します
  今回は公式の最新の推奨ライブラリを使用して挑戦します
  
  

• その中のいくつかのライブラリは、最新バージョンのASで新しいプロジェクトを作成する際にも適用されます
  例えばmaterial3、kts+tomlの設定、jetpack composeなどです
  また、以前にtoml移行時に遭遇する問題について共有したことがあります
  興味がある方は参考にしてください
  
  

• 実際の計画は以下の通りです：

• 以前はxmlを使用して、colors.xmlに色コードを追加し
  color resource IDをstyles.xmlに配置してダークモードのテーマ設定を行っていました
  
  現在はcomposeを使用して.ktでアプリのテーマを設定できます
  各プロジェクトのニーズに応じて自由に設定できます
  私は個人的にUX/UXデザイン稿に基づいてColorScheme、shape、typography、statusBarColor、navigationBarColorなどを設定するのが好きです
  一ページずつ個別に設計するのではなく
  これにより、重複した開発時間を大幅に節約できます
  

ここではニーズに応じて導入します
実際にtomlを使用する場合は次のように記述します：implementation(libs.androidx.material3)
これをbuild.gradle.kts(:app)に配置します

• tips: 上記の複数のライブラリはandroidx-compose-bomを導入する際に対応するライブラリのバージョンを自動的にマッピングするため、version.refを入力する必要はありません
  

こちらはMaterial 3テーマに関する ドキュメント

ここではステータスバー、ナビゲーションバー、テーマなどの設定を行います
colorschemeは前述の実装を適用します ActivityやScreenで使用する場合：

• ここでは汎用のツールバーを作成します
  通常、UI/UXデザイナーがデザインを提供する場合
  多くの場合、ツールバーは似たような効果を持つことが多いです
  私はデザインに基づいて汎用のツールバーを先に作成します
  このステップが必要かどうかは皆さん次第です
  以下のように：
  ここでは実際にMainAppBarConfigを使用します
  主にMainAppBarConfigに必要なスタイルやクリック反応を追加し
  それをScaffold内のtopBarに配置するだけです

• 第一部はここまでです
  主に前述の基礎をしっかりと固めることが目的です
  後の開発が非常に便利で効率的になります!
  
  目次に戻る