More than 5 years have passed since last update.

Storyboardで画面遷移を学ぶ

Posted at 2015-08-25

はじめに

この資料はスクーはじめてのiOSアプリ開発② - 基本操作を覚えようの第5回 (はじめてのiOSアプリ開発 - Twitterのタイムラインのベースを作ろう（ユーザーアクションイベント）)の内容の写経です。

授業を見ていない人でもなるべく分かるように書いていきます。

前提

数回の授業を通してTwitterなアプリケーションを作っていきます。

前回までの授業で、UIを作るためのツールであるStoryboardの使い方の基本を学んでいます。

前回の続きなので前回の記事を読んだ方が良いです。

今日やること

Twitterアプリケーションのログインロジックを作ります。

こんなやつです。

UITableViewを利用してツイートを表示
ユーザーごとにアイコンを表示
ツイート内容は名前と発言
詳細画面

1. UI準備

`Navigation Controller`を新規で追加します。

Navigation Controllerを追加すると、Navigation ControllerとつながったRoot View Controllerの二つのビューが追加されます。

もともとあったViewControllerにボタンを追加して、テキストをログインに変更しておきます。

起動時のViewを変更

第４回ではTableView側だけで作業したのでTableViewに起動の矢印が向いてましたが、今回はNavigation Controllerに向けます。

リレーションを変更

Navigation ControllerからRoot View ControllerへのリレーションをもともとあったViewControllerに変更します。

Navigation Controllerをクリックした際にインスペクタエリアに表示されるのマークを選択してTriggered Seguesの部分にある線をもともとあったViewControllerへドラッグアンドドロップで変更できます。

2. ViewController.swiftにプログラムを書く

コピペでいけます。説明は授業内で。

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet var loginButton: UIButton!
    var accountsList:[Dictionary<String,String>]?
    var tweets:[Dictionary<String, AnyObject>]?

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        accountsList = [["name":"Hiro"], ["name":"Account BBB"], ["name":"Account CCC"]]
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func tappedLoginButton(sender: AnyObject) {
        var accountSelectionSheet = UIAlertController()
        accountSelectionSheet.title = "Select Account"

        let selectAction =  { (var action: UIAlertAction!) -> Void in
            self.performSegueWithIdentifier("showTimelineViewController", sender: nil)
        }

        if let accounts:[Dictionary<String, String>] = accountsList{
            for account in accounts {
                let action = UIAlertAction(title: account["name"]!, style: .Default, handler: selectAction)
                accountSelectionSheet.addAction(action)
            }
        }

        let CanceledAction = UIAlertAction(title: "Cancel", style: .Cancel, handler: nil)
        accountSelectionSheet.addAction(CanceledAction)

        self.presentViewController(accountSelectionSheet, animated: true, completion: nil)
    }

}