Help us understand the problem. What is going on with this article?

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

前回まで

前回の記事はこちらから。。。
APIを使って、Qiitaの記事を表示する。Part.1

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

1.NavigationControllerを追加する。

Main.storyboardのViewControllerを選択し、
Editor -> Embed In -> Navigation Controllerを選択します。

image.png

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

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

2.TableViewを追加する。(AutoLayout)

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

image.png

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

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

image.png

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

image.png

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

怖くない!AutoLayout 〜多画面対応 with Storyboard〜

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

3.TableViewCellを追加する。

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

image.png

4.NavigationItemにタイトルをつける。

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

image.png

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

image.png

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

コードを書くための準備

1.dataSourceとdelegateの設定

TableViewには、dataSourcedelegate というものがあり、内容や操作などの処理を行うものです。
これらを使うためには、Mainstoryboardで設定しなくてはいけません。

以下、参照
Swift言語で始めるiOSアプリ入門 – UITableViewを使ってみる

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

image.png

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

image.png

2.TableViewをコードに紐付けする。

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

image.png

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

image.png

プロトコルを追加する。

dataSourceとdelegateを設定し、TableViewを紐づけたので、コードにプロコルを追加してあげます。
ViewController.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

AutoLayoutについて

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

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

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

AutoLayout 未使用
image.png

AutoLayout 使用
image.png

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

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

theport
ポート株式会社 PORT INC.は、「世界中に、アタリマエとシアワセを。」をミッションに、新しい時代の1ページを創る会社です。【PORTもくもく会】https://freestyle-mokumoku.connpass.com/
https://www.theport.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away