APIを使って、Qiitaの記事を表示させる。Part.2

## 前回まで
前回の記事はこちらから。。。
[APIを使って、Qiitaの記事を表示する。Part.1](https://qiita.com/shun6510/items/f4600c2a2e8b45d1219e)

## Main.storyboardで記事を表示する画面を作る。

### 1.NavigationControllerを追加する。
Main.storyboardのViewControllerを選択し、
`Editor -> Embed In -> Navigation Controller`を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/b1ad6fda-77b0-74bb-d626-70399dbbd097.png)

そうすると、`NavigationController`が追加され、`ViewController`と結びつきます。

※この時に、`Storyboard Entry Point`が消えてるかもしれません。
 その時は、NavigationControllerを選択して、右の４つ目のアイコンのViewControllerの
 `Is Initial View Controller`にチェックを入れます。（これがないと、Simulaterで起動できません。）

### 2.TableViewを追加する。（AutoLayout）
次に、`ViewController`の中に記事一覧を表示する`TableView`を追加します。
Main.storyboarの右下のところから、"TableView"を選択して、ViewControllerにドラッグ＆ドロップします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/4ef84090-d24e-e6be-ac41-5d967e20dacc.png)


これだけでは、画面いっぱいに記事が表示されないので、Xcodeの**AutoLayout**という機能を使って、
画面いっぱいにTableViewを伸ばします。


まず、下の図のように、下にあるアイコンをクリックして、
`Horizontally in Container` と `Vertically in Container` にチェックを入れます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/7c80a973-280d-7471-fcf8-3ec06c235e6a.png)

そうすると、赤い線が出て来ると思います。
次に、先ほどクリックしたアイコンの横にあるアイコンをクリックして、
TableViewの上下左右を"0"にします。
この時に注意することは、"Viewに対して0"にすることです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/e227c701-b8ef-df61-1dc7-f299b26927d1.png)

そうすることで、TableViewが画面いっぱいに、広がると思います。
なお、AutoLayoutは以下のサイトが参照。

[怖くない！AutoLayout 〜多画面対応 with Storyboard〜](https://qiita.com/_ha1f/items/5c292bb6a4617da60d4f)

また、AutoLayoutを使う理由は、最後に伝えます。

### 3.TableViewCellを追加する。
TableViewを追加できたので、記事の一つ一つを表示する`TableViewCell`を追加します。
TableViewを選択して、右の４つ目のアイコンのTable Viewの`Prototype Cells`を0から１にします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/6d544172-7eec-ab8f-402d-0256327de1c3.png)

### 4.NavigationItemにタイトルをつける。
先ほど追加したNavigationViewでViewControllerに`NavigationItem`というものが追加されています。
そこに、タイトルをつけます。今回は、新着記事を載せるため、"新着記事一覧"とつけます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/f07ac30e-e765-40b0-ab15-4bce325c48fc.png)

ここで一度、Simulaterを起動してみましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/e9ad9cee-4ba1-0c15-42a4-93e9e1800a68.png)

このようになっていたら、一通りできています。

## コードを書くための準備
### 1.dataSourceとdelegateの設定
TableViewには、`dataSource` と `delegate` というものがあり、内容や操作などの処理を行うものです。
これらを使うためには、Mainstoryboardで設定しなくてはいけません。

以下、参照
[Swift言語で始めるiOSアプリ入門 – UITableViewを使ってみる]
(http://www.dcom-web.co.jp/technology/swift3/)


TableViewを選択した状態で、`Control` を押しながら、ViewControllerまでドラッグしていきます。
そうすると、下の図のように`Outlets`が表示されるので、dataSourceとdelegateをクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/da545445-909e-e493-2fd6-01c993b85207.png)

TableViewを選択した時にOutletsのdataSourceとdelegateにチェックが入って入れば、オーケーです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/0edae419-5851-c07b-f63e-d4dc631dbdee.png)

### 2.TableViewをコードに紐付けする。
TableViewをコードに紐づけていきます。
まず、右上の`AssistantEditor`を開き、`Automatic -> ViewController.swift`を開きます。
TableViewを選択して、'Control'　を押しながらドラッグしていきます。
そうすると、下の図のようになるので、変数名をつけて、Conectします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/ff861948-b89e-0ddb-004f-5fbe94886451.png)

以下のようになれば、オーケーです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/2f9cdffd-3e18-e6af-40d0-bc72fbb55563.png)

### プロトコルを追加する。
dataSourceとdelegateを設定し、TableViewを紐づけたので、コードにプロコルを追加してあげます。
`ViewController.swift`を開き、　

```swift:ViewController.swift
import UIKit

// プロトコル宣言
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    @IBOutlet weak var tableView: UITableView! // 紐付け
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}
```
と書きます。
エラーが出ますが、今は気にしないでください。

## Part.3へ
Mainstoryboardで画面ができたので、次はいよいよ中身について書きます。

[APIを使って、Qiitaの記事を表示させる。Part.3](https://qiita.com/shun6934/items/81028970c15dc9de05f1)

## AutoLayoutについて
今回で、XcodeのAutoLayoutを使いましたが、
その理由について話します。

一言で言うと、
AutoLayoutを使う1番の理由は、他の端末でも同じデザインにしたいからです。

AutoLayoutを使わないと、機種で大きな差が出てしまいます。
例えば、AutoLayoutを使わずにiPhone8で開発しているとします。
開発が終わった後に、iPadで起動すると、iPhone8と同じデザインにはならないのです。
下の図がわかりやすいかと思います。

AutoLayout 未使用
![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/9de4e554-07b8-3da0-a4fe-66b06bcb3c82.png)

AutoLayout 使用
![image.png](https://qiita-image-store.s3.amazonaws.com/0/179470/35679606-5bc0-4b52-cbfa-e0adfcdc867f.png)


このようなことを避けるために、個人的に使っています。

機会があれば、他の記事で詳しく説明したいと思います。