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に配置するだけです

* 第一部はここまでです

主に前述の基礎をしっかりと固めることが目的です

後の開発が非常に便利で効率的になります!

目次に戻る