見出し画像

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

りおん

皆さん、こんにちは！又はこんばんは！初めての方は初めまして！
Google Codelabsの「COMPOSE を用いた ANDROID アプリ開発の基礎」コースのお手伝いをする「りおん」です。

「COMPOSE を用いた ANDROID アプリ開発の基礎」コースの補足について書きます。今回は、ユニット1「初めての Android アプリ」の中のパスウェイ3「基本的なレイアウトを作成する」です。

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

この記事はAndroid Studioのバージョンが「Android Studio Giraffe」であることを前提として書いています。他のバージョンだと違う場合もあるので注意してください！！！


初めに

今回はアプリのUIの部分について学びましたね。UIとは私たちがアプリを使用する際に画面に表示されるもののことです。
余談ですが、Composeを用いない次書き方だとKotlinという言語ではなく、XMLという言語でUIを作成しないといけませんでした。なにより、UIの更新が面倒でした。つまり、Composeのおかげでもっと簡単にアプリを作れるようになったということです。動画に出る人は全く変わってないな

動画に日本語字幕を付ける

今回の動画も英語なので、日本語字幕を付けてください。手順は以下の通りです。
１．「設定」をクリックし、字幕「英語-CC」を押す
２．もう一回「設定」をクリックし、字幕「自動翻訳」を押す
３．出てきたリストをスクロールし、日本語を選択する
画像付きの解説は以下のURLを参照してください

テキスト コンポーザブルを使用してシンプルなアプリを作成する

テンプレートは？

コースでは、どのテンプレートでアプリを作り始めるかを書いていませんが、その場合は[Empty Activity]で大丈夫です。

テンプレート選択画面

アプリを実行するとエラーが起きる

  1. Dependency 'androidx.activity:activity:1.8.2' requires libraries and applications that
    depend on it to compile against version 34 or later of the
    Android APIs.

  2. Dependency 'androidx.activity:activity-ktx:1.8.2' requires libraries and applications that
    depend on it to compile against version 34 or later of the
    Android APIs.

  3. Dependency 'androidx.activity:activity-compose:1.8.2' requires libraries and applications that
    depend on it to compile against version 34 or later of the
    Android APIs.

エラー画面

上記3個のエラーです。これは、以下の手順で改善できます。
１．画面左にある[Android]リストの中から[Gradle Script]をクリック
２．[Gradle Script]の中の[build.gradle.kts(Module:app)]をクリックし開く
３．[build.gradle.kts(Module:app)]内のcompileSdk = 33をcompileSdk = 34に書き換える
４．右上の[Sync Now]をクリック
画像付きで見たい方は以下のリンクを参照してください


アノテーションとは

このコースでは、アノテーションのことを専門用語も使って詳しく説明されていますが、初学者は何のことやらさっぱりだと思います。
なので、アノテーションは「ここから先がUIのことを書いているコードだよ」みたいな宣言だと思ってもらえれば十分です。
コースを終えるころには、このコースで書かれていた説明が理解できるレベルまで力がつくので終わったらまた見に行ってください。

実行の失敗

以前紹介した通り、実行に時間がかかりすぎて失敗することがあります。
この時は[Device Manager]上でエミュレータの状態が▷になっていることを確認して[Wipe data]を押してください。また、クリックしても□のまま動かない場合はアプリを落としもう一回立ち上げると▷になりやすくなります。
画像付きの解説は下の記事に書いたのでそちらを確認してください。

デバイスマネージャーの画面

起こりやすいミス

コースに書いているコードを写していると「,」を入れていないことでエラー文が消えないということは頻発します。下の写真を見ればわかりますが、簡単には間違いが分かりません。
「コース通りに書いたのにエラーが出た」という方はこのカンマがあるかないかをまずは疑ってください。

カンマなしでエラー
カンマがある正しいコード

起こりやすいミス(その2)

コードも全く同じ。なのにエラーが出るという時に考えられるもう一つの原因はimport文が間違っていることです。Alt+Enterでimport文を書いたと思いますがその際に複数選択できたと思います。正しいものを選択しないとエラーが出ますので、その時はコース内の解答コードと比較してください。

3つほどの選択肢がある

二つのものを選択する方法

これはAndroid Studioの技術ではありませんが、今回のコースで「2 つの Text コンポーザブルを選択」というのがあります。
普通なら、Windowsの場合は一つ選択した後にCtrlキーを押しながらもう一つを選択することで複数を選択することが出来ます。しかし、今回の場合はCtrlキーを押すと複数選択ではない機能となるため、この場合はTextの分すべてを選択してください。

二文ではなく全文をドラッグして選択する

余談

勘のいい方は前回のコースでDesign画面とエミュレータ上の画面が違うことを不思議に思ったかもしれませんが、@Previewの下に書いているのはDesignに表示される画面ですので、エミュレータを実行した際はここの部分は関係ありません。ここでは、onCreate内で書かれてやっとエミュレータ上でも見えるようになるのです。

Androidアプリに画像を追加する

画像のリソースが違う（重要）

コースでは、背景画像のリソースをR.drawable.androidpartyとしていますが、正しくはR.drawable.androidparty__1_です。
人によって違うかもしれないので、[app]->[res]->[drawable]で画像名の.pngより前の部分を書くようにしてください。

画像の名前が書かれてる場所

最後に

ユニット1のパスウェイ3の学習お疲れさまでした！
今回のコースだけでも、テキストの書き方と画像の書き方を学んだので今の時期に合わせてクリスマスカードを作るのも楽しいと思います！
今後のコースでは更にボタンの追加やテキスト入力できるボックスを作るなど、より様々なアプリを作れるようになります。
次も張り切っていきましょう！！！

おしらせ

今年（2023）の更新はこの記事で最後となります。
来年もまだまだ投稿しますのでそれまでお待ちください。
よいお年を！


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