[Swift]TableView　UI編　

#はじめに
私はmacOSのアプリケーションを現在開発しています。
tableをつかったことが無かったので今回はとりあえず文献の多いiOSのtableViewを使って見ようかと思います。
慣れてきたらmacOSでも開発を行っていく。

##参考文献
https://weblabo.oscasierra.net/swift-uitableview-1/
#完成図


<img width="499" alt="スクリーンショット 2019-05-01 20.08.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/0f187f4a-9ede-0033-0ec6-649b680fc8cb.png">
・cellの大きさは100
・cellのstyleはBasic


#UI
Main.storyboardを使ってボタン等を配置していく。
LibraryからTableViewを選択。
<img width="1135" alt="スクリーンショット 2019-04-29 0.49.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/c55f5637-5b47-771f-48ff-72aa0093be2b.png">

##TableViewを画面に配置
TableViewを配置したら、要素を画面に固定するため**Add New Constraints**を用いる。

constraints
>
強制、圧迫、束縛、制約 するもの、窮屈な感じ

###こんなイメージ
<img width="636" alt="スクリーンショット 2019-04-29 1.42.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/073d8d96-b842-da7c-32ff-3194f78c5d63.png">
要素が紐で拘束されているイメージ:point_up:


##TableViewを束縛
**Add New Constraints**を用いて四方の要素を束縛。
<img width="850" alt="スクリーンショット 2019-04-29 1.51.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/7b8beedb-ddca-0024-bb01-d32f69b4ef87.png">


##TableViewにcellを追加
Attributesインスペクタを編集
1. Prototype Cellsを１に変更する
2. TableView上にPrototype Cellsが表示される。
3. cellのStyleはBasicを使用
<img width="957" alt="スクリーンショット 2019-04-29 1.59.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/39ed38a6-b39a-d5ca-a66c-bce3919fe476.png">
Cellの大きさを変更したい場合、TableViewの**Sizeインスペクタ**を選択し
TableViewCell の RowHeightを編集。☓
tableViewのRowHeightを編集したらできた。○

##View ControllerにTableViewを追加
追加するもの
1. dataSource
2. delegate

この操作をすることでTableの値を使うことができる。
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/3e429a5e-ce6c-f49f-ce0d-8cdc24de4ad1.gif)

####以上でTableViewのUIは終わり…次は、プログラム

#Programing
1. **UITableViewDataSource**、**UITableViewDelegate**のプロトコルを追加

```ViewController.swift
class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate{
##code
}
```

2.2つファンクションを追加


```ViewController.swift
   func tableView(_ tableView: UITableView,numberOfRowsInSection section: Int) -> Int {
        ##code
    }
```
１つ目のファンクションのパラメータは以下のようになっている。
・func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int

|    parameters   |    説明   |
|:------------------:|:------------------:|
|    tableView    |どのTableViewからのリクエストなのか|
|section|tableView内のセクションを識別する番号。

|    Returns   |    tableViewのcell数を設定   |
|:------------------:|:------------------:|

2つ目にファンクションのパラメータは以下のようになっている。
・func tableView(_ tableView: UITableView,cellForRowAt indexPath: IndexPath) -> UITableViewCell


```ViewController.swift
    func tableView(_ tableView: UITableView,cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        ##code
    }
```

|    parameters   |    説明   |
|:------------------:|:------------------:|
|    tableView    |tableViewオブジェクトがcellを要求
|indexPath|tableView内のcellの内部パス

|    Returns   |   cellの中身をtableViewに反映    |
|:------------------:|:------------------:|

このファンクションは、cellごとに実行されている。
indexPathが1ループごとにカウントアップされ1つ目のファンクションで設定した数まで実行したらループを抜ける。

##実装

```ViewController.swift
import UIKit

class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {
    let data = ["1","2","3"]
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        //tableViewのcell数を設定。
        return data.count//定数dataの要素数を返り値に
        
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        var cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        //このメソッドのwithIdentifierパラメータはcellのIdentifireを呼び出すので、
        //PrototypeCellsのAttribute Inspector-->Identifireを編集
        //indexPathパラメータは、tableViewから値を参照する。
        cell.textLabel?.text = data[indexPath.row]
        //tableViewにcellを返す。
        return cell
    }
    

    @IBOutlet weak var tableView: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

}
```
#おわりに
今回はiOSのtableViewについて触った。このtableViewを使うときには
2つのファンクションを定義することが必須条件であることがわかった。

次は、別ファンクションから呼び出したファイルの内容を一覧表示させるプログラムを書いていく。