【AndroidStudio】レイアウトについて

# 目的
本記事は私が学んだことについての備忘録です。
忘れないように記述していきます。

# 目次
・[Layoutとは](#layoutとは)
・[Layoutの種類](#layoutの種類)
・[wrap_contentとmatch_parentについて](#wrap_contentとmatch_parentについて)
・[Start・EndとLeft・Rigntの違いについて](#startendとleftrigntの違いについて)
・[ピクセル密度について](#ピクセル密度について)

# Layoutとは
viewと呼ばれる**部品を入れることが出来る枠のようなもの**です。
Layoutの中にLayoutを入れることもできます。

# Layoutの種類
レイアウトで主に利用される種類は以下の4種類があります。

### LinearLayout
LinearLayoutは**どの方向に並べるのか指定ができます。**
指定できる方向は2種類で**横方向に並べるか縦方向に並べるか**です。
横方向は```android:orientation="horizontal"```
縦方向は```android:orientation="vertical"```
のように指定します。
並べる方向の指定なしでコードを書いた場合horizotal(横方向)が設定されます。

LinearLayoutは入れ子を行うことにより、下の画像のように
縦横を組み合わせた画面レイアウトを実装することができます。
![スクリーンショット 2023-05-25 174557.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/0356a815-dafc-f696-191b-d66740e10364.png)
またLinearLayoutを入れ子にしたレイアウトは後述する
RelativeLayoutで代用出来ることがあります。
入れ子にしたレイアウトは個人的に少し見づらくなるため、
代用できるのであればRelativeLayoutをオススメします。

>画像を引用させていただいた[参考サイト](https://codezine.jp/article/detail/9437)

### ConstraintLayout
ConstraintLayoutはレイアウトの中でも新しめのレイアウトです。
水平方向と垂直方向それぞれに最低でも1つの制約を設定しないとエラー表示が出ます。
エラーが出ていても実行自体は出来ますが、配置が左上の隅固定になってしまうので
基本的にはエラー表示が出たら解決したほうが良いでしょう。
**可変で動かしたい部分がある場合はこのレイアウトを用いることで
いろんな画面サイズの端末に対応することが可能になります。**
RelativeLayoutと似た使い方も出来たりします。
レイアウトの性質上部品を制約の設定に用いることが多いため部品にIDを振る必要があります。

### FrameLayout
FrameLayoutは**部品を重ねて表示したい場合に用いられるレイアウトです。**

layout_gravity属性を利用しないとFrameLayout内の部品は
全て左上固定になってしまうので注意です。
とはいえ複数部品を重ねたい場面も個人的にはあまり無く、そこまで扱えていません・・・
個人製作にてFragmentの画面遷移で用いることがあったくらいです。

### RelativeLayout
RelativeLayoutは相対レイアウトとも呼びます。
**そのViewが置かれている親のレイアウトや、
IDで指定したViewを基準に位置を指定することが出来ます。**
このレイアウトもConstraintLayoutと同じく部品を制約の設定に
用いることが多いため部品にIDを振る必要があります。
FrameLayoutと同じく位置の指定がない場合は
全ての部品が左上固定になってしまうため注意が必要です。
LinearLayoutの入れ子の際にRelativeLayoutで代用できる場合があると言いましたが
その例を挙げると以下の画像のようなレイアウトなどです。
![スクリーンショット 2023-07-27 003653.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/e9369546-c5c7-9a8a-a7e5-eff0c63d2d3a.png)

# wrap_contentとmatch_parentについて
この二つの要素はviewやlayout幅、高さの値を設定するために用います。
**wrap_contentは幅、高さを中身の大きさに合わせて自動的に設定してくれます。**
![スクリーンショット 2023-05-25 102806.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/c03a109b-b2e8-f31b-36ed-5c9e6c721c31.png)
**match_parentは幅、高さを、それが載っているlayoutの大きさに合わせて
自動的に設定してくれます。**
レイアウトの余白を埋めたい時などに使用すると効果的です。
![スクリーンショット 2023-05-25 103426.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/f504ed54-7aa9-bc20-6ea4-b38187e9dfd7.png)

>上記の画像2枚は[参考サイト](https://zerokara-app.com/543/)からお借りしました。

設定するには設定したい要素のAttributesにあるlayout_width(幅),layout_height(高さ)の欄にある
▼の部分をクリックし選択するか、以下のように自分でコードに記述するなどが挙げられます。
```android:layout_width="match_parent"```
```android:layout_height="wrap_content"```
また、ConstraintLayoutを用いている場合はLayoutタブ内にある
Constraint Widgetの画像部分のマークをクリックしても切り替えが可能です。
![スクリーンショット 2023-05-25 105427.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/0d3ce991-8ba6-1b83-8434-8394df76e46e.png)
<font color="red">自分でコードに記述する場合ConstraintLayoutには注意点があります。</font>
このレイアウト内の部品にはmatch_parentでの指定は行わず、代わりに**0dp**という指定をします。
そのため```android:layout_width="match_parent"```ではなく
```android:layout_width="0dp"```が正しい指定方法になります。
# Start・EndとLeft・Rigntの違いについて
水平方向・垂直方向の制約やgravityを用いた位置指定など様々な場面で見かけるものですが
普段使っていてStartとLeft、EndとRightはどちらを指定しても特に差はないように感じました。
いったい何の差があるのか気になったため調べたところ、
アラビア語など**読む方向が違う言語の時配置位置を言語に合わせるか否か**でした。
![スクリーンショット 2023-08-05 150357.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/f4ef6000-bac0-c5c0-dea9-d7ea36e6fb98.png)
↑日本語表記
↓アラビア語表記
![スクリーンショット 2023-08-05 150411.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329738/f7827670-32fc-bd81-c286-9758d512daa2.png)
>上記の画像2枚は[参考サイト](https://programming-cafe.com/programming/android/info-android/development-aiming-at-multilingualization/)からお借りしました。
# ピクセル密度について
スマホの画面サイズによってはピクセルの数が違います。
そのためpxで指定すると端末ごとに違った表示になってしまうことがあります。
それを避けるために使用するサイズ指定の単位としてdpやspが挙げられます。
**dpはViewの配置間隔などを指定するときに用います。**
対して**spはテキストサイズの指定に用います。**
主にこの2つの単位を使用して作成しますので、pxなどを使うことはほぼないと思います。

# おわりに
自分でAndroidStudioを触っていて疑問に思っていたことや
直接触れて分かったことなどをまとめてみました。
上手く記事が書けずだいぶ苦労しました・・・
まだまだ未熟な身ですので今後も積極的に学んでいきたいです。
最後まで閲覧いただきありがとうございました。<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">🙇‍♀️</font></font>

# 参考にさせていただいたサイトまとめ
[LinearLayoutについて](https://codezine.jp/article/detail/9437)
[ConstraintLayoutについて・ConstraintLayoutのmatch_parentについて](https://developer.android.com/training/constraint-layout?hl=ja#additional-resources)
[FrameLayoutについて](https://android-note.open-memo.net/sub/layout__float_view.html)
[RelativeLayoutについて](https://developer.android.com/guide/topics/ui/layout/relative?hl=ja)
[wrap_contentとmatch_parent](https://zerokara-app.com/543/)
[Start・EndとLeft・Rigntの違い](https://programming-cafe.com/programming/android/info-android/development-aiming-at-multilingualization/)
[ピクセル密度について](https://developer.android.com/training/multiscreen/screendensities?hl=ja)