「COMPOSE を用いた ANDROID アプリ開発の基礎」の学習支援㉒ -ユニット８パスウェイ

2024年5月28日 20:46

皆さん、こんにちは！又はこんばんは！初めての方は初めまして！
Google Codelabsの「COMPOSE を用いた ANDROID アプリ開発の基礎」コースのお手伝いをする「りおん」です。
今回は、ユニット８「Composeとビュー」のパスウェイ２「Compose内のビュー」です。

この記事はCodelabsの補足を目的としているため、「COMPOSE を用いた ANDROID アプリ開発の基礎」コースで心配になった時、エラーが起きて詰まった時や、分からないことがあった時、軽く復習したい時に見てください！
また、目次を見て自分に必要なところだけ見るのをお勧めします！

この記事を作成するにあたり使用しているAndroid StudioのバージョンはGiraffeです。バージョンによってはUIが違うことがあるのでご了承ください。
また、2024年5月23日現在の「COMPOSE を用いた ANDROID アプリ開発の基礎」コースを参考にしています。

学習内容

今回のパスウェイでは、以下の２つの内容を学習しました。
１．ビューの相互運用機能を使用してビューコンポーネント（SpinnerとRatingBar）をComposeアプリに追加する方法
２．広告バーナーの作成方法

ビューの相互運用機能

動画内で紹介されたビューの相互運用機能の使用例を挙げますと、
１．Composeではまだ利用できないView機能を使用できる
今回使用したRatingBarがComposeでは利用できない例の1つです。
２．Viewのみをサポートするライブラリを使用できる
今回使用しているGoogle AdMob View SDKがこの具体例に当たります。
３．再利用できる
Viewアプリケーション用に作成したカスタムビューを再利用できます。
※カスタムビューとはButtonやTextViewのようにすでに用意されているビューではなく、独自に作成したビューです。（詳しくは⇒https://developer.android.com/develop/ui/views/layout/custom-views/custom-components?hl=ja）

Composeでビューを使用する方法

Composeでビューを使用するにはAndroidViewコンポーザブルを使用します。
AndroidViewコンポーザブルはfactory、update、modifierという３つのパラメータをとります。
modifier -> AndroidViewコンポーザブルを修飾する。
factory -> ビューを作成する
update -> ビューがインフレート（作成）された後で実行

広告バーナーの作成方法

今回使用するのはGoogle AdMob View SDKというものです。
AdMobとは「advertising on mobile」つまりはモバイル広告のことで、AdMobはGoogleの子会社です。
AdMobを使用することで、アプリユーザーに適した広告が自動で表示されるようになりその広告をクリックされた回数によってデベロッパーは収益を得ることが出来ます。

Google AdMob View SDKはビューのみをサポートしています( 2024年5月24日時点)。そのため、Composeを用いたアプリに適用する際には上記のAndroidViewコンポーザブルを使用する必要があります。
１．AdMobアカウントに登録又はログイン
２．アプリをAdMobに登録
３．依存関係を追加

//アプリレベルのbuild.gradle
implementation("com.google.android.gms:play-services-ads:23.1.0")

４．AndroidManifest.xmlファイルにAdMobアプリIDを追加

５．AndroidViewコンポーザブルを使用し、AdViewを使用
※AdRequest.Builder()を使用して広告を読み込んでいる。

AdMob SDKでは広告のフォーマットがバナー以外にもアプリ全画面に表示するインタースティシャル、動画の視聴などで報酬の得られる報酬など様々用意されていますので興味のある方は下のサイトをご覧ください。

注意点

Android Studioでスターターコードを開くとエラーがおきる

エラー文
The project is using an incompatible version (AGP 8.2.2) of the Android Gradle plugin. Latest supported version is AGP 8.1.1
このエラーはひとつ前の記事でも解説したもので、対処法としてモジュールレベルのbuild.gradleを以下のように変更してください。

さいごに

「COMPOSE を用いた ANDROID アプリ開発の基礎」コースの完走本当にお疲れさまでした！
初めて習う概念に単語にエラーに…と大変だったと思います。しかし、これでAndroidアプリを作成する力は身につきました。是非、コース完了を機に自分だけのアプリを作成して自慢してください！
この記事を見て一人でも多くのデベロッパーの力になれているなら幸いです。次はAndroid Studioのバージョンを最新のものにする記事を書く予定ですのでGiraffeのまま進めていただいた方がいらしたら見に来てください！

この記事が気に入ったらサポートをしてみませんか？