【初級】AndroidStudio　レイアウト新旧・サンプルページへのリンク

# 先に追記
もしAndroidStudioとUnityを迷われている方はこちらも見てみてください。

https://qiita.com/kiyoZy/items/5185d9915db7ae8ea43f


# 記事内容
AndroidStudioは数年前に触っていたのですが新しいレイアウトの方法が追加されたようです。自身のメモも兼ねて新旧の設定・サンプルページへのリンクをまとめてあります。

* いくつか見比べて分かりやすい部分から進めて行くのがお勧めです。最後にコードがまとまっているページもあるので同時に見て進めると分かりやすいと思います。

* 新レイアウトを使用する際にJavaでもKotlinでも「importとは」をざっくり知っている必要があります。種類がいくつかあり違うものを指定するとエラーになります。このあたりは未だに難しい部分です💦

* 動作環境

| OS | AndroidStudio | 
|:--:|:--:|
| Windows 10 | Android Studio Flamingo 2022.2.1 |



# 新旧レイアウトの比較
「XMLファイルとレイアウトツール」を使用する方を「旧」、「JetpackComposition」を使用する方を「新」として書いています。この認識で良いのか分かりませんが…。

これからは「新」を使用したレイアウトが一般的になるかと思われますが参考のため「旧」も記載してあります。「旧」でリソースなどの使い方が分かっているとイメージしやすい部分がありました。でも新しい方だけを進めた方が理解は早いのかも知れません。


### 旧：XML使用レイアウト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/c79cfa7d-3f81-bd45-29d9-82e88e3a89da.png)
下にある「Hello Toast」を作るとこのような感じです。

### 新：Composition使用レイアウト
下にある「基本的なレイアウトを作成する」/「誕生日カード」を作って行くとこのような感じのレイアウトが出来ます。動くアプリではなくまずは表示の方法を理解して行くようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/59130126-c994-0f31-5661-fc40417bfebf.png)


# 旧：レイアウト
## 「Hello Toast」アプリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/9dd97428-c312-5f62-f483-f75d229582e7.png)

https://developer.android.com/codelabs/android-training-layout-editor-part-a#0

これからはこのレイアウトは少なくなるのかも知れませんがアプリを動作させるまでの一連の流れが書いてあり分かりやすいです。実際に動かせるのは楽しいですからね👍

## レイアウトツール説明
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/42195fc2-6e63-bb36-7600-d461612ce3be.png)

https://developer.android.com/studio/write/layout-editor?hl=ja

こちらもこれからの利用は少なくなるのかも知れませんがツールによりXMLの内容を変更する方法が分かります。

# 新：レイアウト
説明動画やコードへのリンクがまとまっています。

## 文字設定
「Setup Android Studio」画面から「Create your first Android app」リンク先に文字設定のサンプルがあります。
他には「ダウンロード～最初のアプリ作成～エミュレーターでの動作」が書いてあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/33692f4d-b9ab-6805-91f2-da859dfa36ee.png)

https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-2?hl=ja#codelab-https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app



## 「誕生日カード」
基本的なレイアウトの作成方法と画像の追加方法が分かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/7dd09782-6ce5-b315-3d17-ac8518561db6.png)

https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-3?hl=ja#codelab-https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables





## 「サイコロ」、「レモネード」アプリ
画像データを読み込みボタンを押すと画像が変わるアプリのサンプルです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/938f3fcc-5dd7-5e18-8884-fadb11b49b85.png)

https://developer.android.com/courses/pathways/android-basics-compose-unit-2-pathway-2?hl=ja



## 「チップ計算」アプリ
内部で計算をして指定の%を追加した数値が出せるアプリのサンプルです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/af320aa4-0b2d-765c-156a-10e6965b30bc.png)

https://developer.android.com/courses/pathways/android-basics-compose-unit-2-pathway-3


**※「TextField」でエラーが出た場合**
私の環境なので同じ方法で解決するか分かりませんが
エラーの赤波線が出ている「TextField」を触ると窓（？）が表示されるので「'EditNumberField'で'ExperimentalMaterial3Api'をオプトイン」をクリックするとアノテーション（@OptIn(ExperimentalMaterial3Api::class)）が追加されてエラーが解消されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/2c91dafe-eb55-203b-f21e-6fb5d4b33521.png)
普通のimportとは何が違うの分かってないんですけどね💦　進める時は大体で進めて行っています。



## 「リスト」アプリ
「Jetpack Compose の基本」にリストサンプルがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/f9062f2b-ed2b-a2a5-bb19-e86850890889.png)

https://developer.android.com/courses/pathways/compose?hl=ja#codelab-https://developer.android.com/codelabs/jetpack-compose-basics

## 設定まとめ
色々な設定のまとめが書いてあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3004096/68df908d-e4e9-7856-29f5-272aaf715614.png)

https://developer.android.com/jetpack/compose/text?hl=ja


# 後記
サンプルの画面が実際と少し違う場合や同様に書いてもエラーになってしまう場合があります。
インポート以外の赤線のエラーで解消出来ない場合があるかも知れません。その場合は一旦そのコードは無にしてしまって（消すもしくはコメントする）動くように進めることがお勧めです。

後で分かることも多いので学習中は大体で進めて行っています。

# 追記
書いた内容を大幅に修正しました。色々と書きすぎており人様のページをどーこー言っている場合ではありませんでした。（「本家ページ分かり難い…💦」とかですね笑）　読みやすい文章、分かりやすいページ構成など難しいですね。