【Objective-C】【Swift】TableViewの基本設定について




Objective-CとSwiftでTableViewを使用する際に行う、基本的な設定についてまとめました。

実行環境
・Xcode 10.2.1
・Objective-C
・Swift 5.0

#１．共通設定
* StorybordにTableView, TableViewCellを画面に配置する。<br>
① Libraryを選択する。<br>
② Library内のTableViewを選択し、ViewControllerに配置する。<br>
③ Library内のTableViewCellを選択し、TableView内に配置する。<br>
![tableView,tableViewCell.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431502/381e9cac-f869-316b-a1c4-fc0b0a18aea8.png)



<br>

* delegate, datasourceの設定<br>
Storybord、コード内のどちらでも設定することができます。<br>
Storybordでの設定<br>
![delegate,datasource.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431502/a2f33ae2-1a0a-2f08-6f69-7521fd556a05.png)<br>
コード内での設定


```objective_c:Objective-C&nbsp;&nbsp;.h
@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>
```

```objective_c:Objective-C&nbsp;&nbsp;.m
- (void)viewDidLoad 
{
    [super viewDidLoad];

    //storybordで設定した場合不要
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
}
```

<br>

```swift:Swift
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate 
{
    override func viewDidLoad() 
    {
        super.viewDidLoad()

        //storybordで設定した場合不要
        tableView.dataSource = self
        tableView.delegate = self
    }
}
```
<br>

* Identifierの設定<br>
StorybordでTableViewCellのIdentifierを設定します。
![Identifier.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431502/4c6b6e0b-f99a-c2d5-2d32-b7378297fd3c.png)

<br>

* TableViewの追加<br>
Storybordに追加したTableViewとコード内のTableViewの関連付けを行います。

```objective_c:objective-c.h
@property (weak, nonatomic) IBOutlet UITableView *tableView;
```

<br>

```swift:swift
@IBOutlet weak var tableView: UITableView!
```




#２．Objective-C



* 行数の設定

```objective_c:Objective-C&nbsp;&nbsp;.m
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 5;
}
```

<br>

* セクション数の設定

```objective_c:Objective-C&nbsp;&nbsp;.m
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}
```

<br>

* セルの設定<br>
Storybordで設定した、Identifierを使用することで、TableViewCellに値を設定できます。<br>
indexPath.row, indexPath.sectionを使用することで表示するセルの行数、セクションを指定できます。

```objective_c:Objective-C&nbsp;&nbsp;.m
//セルの高さ
- (CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 
{
    return 50;
}

//セルの内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{
    NSString* identifier = @"tableViewCell";
    UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier: identifier forIndexPath:indexPath];
    //セルの内容
    cell.textLabel.text = [NSString stringWithFormat:@"indexPath: %ld", indexPath.row];
    return cell;
}
```

<br>

* 選択時の処理<br>
セルを選択した際に実行されます。<br>
indexPath.row, indexPath.sectionを使用することで選択したセルの行数、セクションを取得できます。<br>
cell.textLabel.textで選択したセルの内容を取得できます。

```objective_c:Objective-C&nbsp;&nbsp;.m
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 
{
    
}
```

<br>

* ヘッダー、フッターの設定<br>
各セクション毎に表示するヘッダー、フッターの設定を行います。


```objective_c:Objective-C&nbsp;&nbsp;.m
//ヘッダーの高さ
- (CGFloat)tableView:(UITableView *)tableView heightForFotterInSection:(NSInteger)section
{
    return 50;
}

//ヘッダーのタイトル
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
    return [NSString stringWithFormat: @"ヘッダー  section: %ld", section];
}

//フッターの高さ
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 50;
}

//フッターのタイトル
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
    return [NSString stringWithFormat: @"フッター  section: %ld", section];
}
```

<br>
#３．Swift

* 行数の設定

```swift:Swift
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
{
    return 5
}
```
<br>

* セクション数の設定

```swift:Swift
func numberOfSections(in tableView: UITableView) -> Int 
{
    return 1
}
```
<br>

* セルの設定。<br>
storybordで設定した、Identifierを使用することで、TableViewCellに値を設定できます。<br>
indexPath.row, indexPath.sectionを使用することで表示するセルの行数、セクションを指定できます。

```swift:Swift
//セルの高さ
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat 
{
    return 50
}

//セルの内容
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
{
    let identifier = "tableViewCell"
    let cell = tableView.dequeueReusableCell(withIdentifier: identifier, for: indexPath)
    cell.textLabel?.text = "indexPath.row: \(indexPath.row)  indexPath.section: \(indexPath.section)"
    return cell
}
```
<br>

* セル選択時の処理<br>
セルを選択した際に実行されます。<br>
indexPath.row, indexPath.sectionを使用することで選択したセルの行数、セクションを取得できます。<br>
table.cellForRow(at: indexPath)!.textLabel!.text!)で選択したセルの内容を取得できます。

```swift:Swift
func tableView(_ table: UITableView, didSelectRowAt indexPath: IndexPath)
{

}
```

<br>

* ヘッダー, フッターの設定<br>
各セクション毎に表示するヘッダー、フッターの設定を行います。

```swift:Swift
//ヘッダーの高さ
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat 
{
    return 50
}

//ヘッダーのタイトル
func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? 
{
    return "ヘッダー section:\(section)"
}

//フッターの高さ
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat 
{
    return 50
}

//フッターのタイトル
func tableView(_ tableView: UITableView, titleForFooterInSection section: Int) -> String? 
{
    return "フッター section:\(section)"
}
```

#4. 実行結果
<img width="500" alt="動作.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431502/a47dd0e8-1f94-815f-fb5a-9ce2bde329b1.png">