【AndroidStudio】 TableLayout


#■TableLayoutとは
表組みのレイアウトを作る時に使用するもの

``` kotlin
<TableLayout 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"
    tools:context=".MainActivity">


</TableLayout>
```

#■TableRow
横1行にあたる範囲

TableRowの中にbuttonなどのViewを渡せば
横1列になる。

``` kotlin
<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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"
    tools:context=".MainActivity">

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

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

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

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

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

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

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

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

    </TableRow>

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

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

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

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

</TableLayout>
```
![スクリーンショット 2021-05-31 13.15.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/9197c69d-af6e-a339-5bdc-905a8fd5b494.png)

#■span column

■span
2個分3個分など
view一つに定められたサイズの横のでかさを倍にする。

``` kotlin
   <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
          //Button2つ分の横のでかさになる。
            android:layout_span="2"
            android:text="1" />

    </TableRow>

    //...以下のコード省略
```
![スクリーンショット 2021-05-31 13.23.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/a1cafe6e-0b02-78bf-55fc-d35f9b7fd290.png)

■column
指定した列の場所に表示する。(一番左を0列目とする。)

``` kotlin
   <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
          　//0列目からと数えて2列目へ
            android:layout_column="2"
            android:text="1" />

    </TableRow>
//...以下のコード省略
```

![スクリーンショット 2021-05-31 13.27.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/d08aa786-0c67-65e3-60ea-fb6e6bb45dec.png)

#■stretchColumns
指定したViewを使って幅いっぱい広げる。

``` kotlin
<TableLayout 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"
   
   //0列目と2列目のviewを使って幅いっぱい広げる。
    android:stretchColumns="0,2"
    tools:context=".MainActivity">

 <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

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

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

    </TableRow>

//...以下コード省略
```
![スクリーンショット 2021-05-31 14.05.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/230f2909-256f-0728-9a23-09c1b3f24321.png)

横幅いっぱいに広がっている。

#■shrinkColumns
文字が多くてオーバーしてても
指定した列で無理やり幅いっぱいに収まるようにする。

``` kotlin
TableLayout 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"

    //2列目で収まって
    android:shrinkColumns="2"
    tools:context=".MainActivity">

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="こんにちわおはよう" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="こんにちわおはよう" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="こんにちわおはよう"/>

    </TableRow>

```

![スクリーンショット 2021-05-31 14.11.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/f641a938-4f30-667d-cec9-fa392dcdb702.png)


■一番右のviewがはみ出していてshrinkColumnsで
全部の列を指定した動き


![スクリーンショット 2021-05-31 14.12.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/73cfe371-b465-faaf-1f1d-a5b553d3972b.png)


``` kotlin
<TableLayout 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:shrinkColumns="0,1,2,3,4"
    tools:context=".MainActivity">
```
![スクリーンショット 2021-05-31 14.14.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1558142/7cda6966-4cb6-1033-5829-025d6f2d6362.png)

全て等しいサイズで収まる。