【AndroidStudio】 LinearLayout

#■layoutの組み方コード

■LinearLayout
子要素を縦・横の一列に並べるレイアウトである。android:orientation属性にvertical, horizontalを指定することでそれぞれ縦、横に並べることができる。

書き方 使い方
緑の場所にLinearLayoutを記入
始めの場所に
android:orientation="vertical"を記入
これで要素が縦に並ぶ。

``` kotlin
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

</LinearLayout>
```

■BUttonを4つ縦に並べてみる。

``` kotlin
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

   <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Button"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"/>

</LinearLayout>
```

下記画像のようになる。

![スクリーンショット 2021-05-30 18.50.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/e66ad0cf-2d3b-cdc8-05fa-6b48506e3d62.png)

#■幅

■①wrap_content 
中身の要素の幅に合わせる。

■②match_parent
親要素の幅に合わせる。

■③任意の数に合わせる。

上記の契約を使いlayoutを組んでみる

``` kotlin
    //①wrap_content
    <Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Button"/>

    //②match_parent
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"/>

    //③任意の数に合わせる。
    <Button
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="Button"/>
```

下記画像のようになる。

![スクリーンショット 2021-05-30 18.55.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/aa53f29e-30a3-4c75-55d2-db392903dfab.png)

#■余白
■android:layout_margin
外側の余白
■android:padding
内側の余白


``` kotlin
 <Button
       android:layout_width="wrap_content"
       android:layout_margin="80dp"
       android:layout_height="wrap_content"
       android:text="Button"/>

    <Button
        android:layout_width="wrap_content"
        android:padding="40dp"
        android:layout_height="wrap_content"
        android:text="Button"/>
```

もちろんtopやrightなどに絞って使う事もできる.

![スクリーンショット 2021-05-30 19.06.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/51aea2b8-a40a-cc82-ad01-fabbfc776122.png)


#■割合

■android:layout_weight
縦or横の全体の面積を割合で割り当てる。
android:layout_weight = "1"
など


``` kotlin
 <Button
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:text="Button"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Button"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Button"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Button"/>
```
下記画像のようになる。
![スクリーンショット 2021-05-30 19.04.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/9b8aa2ef-60b3-ba29-7392-d2154e1ea944.png)

#■gravity 位置決め

■android:gravity
中の要素の場所を決める。

■android:layout_gravity
親要素に合わせて動く

``` kotlin
 <Button
       android:layout_width="300dp"
       android:layout_height="300dp"
      　//中身の要素　真ん中の下
       android:gravity="center|bottom"
       android:text="Button"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        //親要素右端
        android:layout_gravity="right"
        android:text="Button"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        //親要素の終わり
        android:layout_gravity="end"
        android:text="Button"/>

```

![スクリーンショット 2021-05-30 19.22.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/c1a547e8-edff-1772-771e-ae10380c6c11.png)