Tag: Storyboard

目次

関連ページ

参考情報

概要

  • 画面遷移の仕組み

全般

ストーリーボードのデバイスがデカイ?

Storyboardを使わない方法に関して

ビューコントローラー

初期ビューコントローラーを指定する

  • 左側に矢印のついたビューコントローラーがないと何も表示されない。
  • Attributes Inspectorを開き、View Controllerの「Is Initial View Controller」をチェックする。

プログラムコードからストーリーボードのビューコントローラーを呼び出す

  • 以下のように呼び出す
            let storyboard = UIStoryboard(name: "Main", bundle: nil)
            let vc:UIViewController = storyboard.instantiateViewControllerWithIdentifier("WebViewController")
            let webViewController = vc as! WebViewController
            webViewController.initialUrl = urlString
            self.navigationController!.presentViewController(vc, animated: true, completion: nil)
    
  • 呼び出し先のビューコントローラーには、Storyboard IDを割り当てておく。Identity InspectorのStoryboard IDで設定できる。

テーブルビュー

一番上のセルがステータスバーにかぶってしまう

  • 最初にテーブルのサイズをステータスバー以下にしておいてAutoLayoutのPinを設定すれば良い。
  • 上限に設定するとかぶるが、ステータスバーの下にしてから始めれば自動的に隙間があく。
  • コードで以下のようにするのはサイズが異なるデバイスで対応できないのでだめ。
           self.tableView.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)

左右のマージン

  • Pinの設定でConstraint to Marginのせい。

UITableViewControllerを使う

  • Single View Applicationで作成。
  • ViewController.swiftを削除。
  • Main.storyboardの中のView Controllerを削除。かわりにTable View Controllerを追加。
    • Attributes InspectorのView Controllerセクションにある「Is Initial View Controller」にチェック。
  • 「File > New」からUITableViewControllerクラスのサブクラス(例MyTableViewController)を作成して追加。
  • Table View ControllerのクラスをMyTableViewControllerとする。
  • UITableViewControllerにナビゲーションコントローラーやツールバーを追加したい場合、下記のナビゲーションコントローラーを参照のこと。

※UITableViewControllerを使わないと、Static Cellsが使えない。

ナビゲーションコントローラー

ナビゲーションコントローラーを使う

※ちなみにios - StoryboardのNavigation Barの存在理由 - スタック・オーバーフローによると、NavigationBarを個別に追加する必要はほとんどないらしい。

ナビゲーションコントローラーに編集ボタンを追加

  • 上の方法でナビゲーションコントローラーを追加した場合、ViewControllerのviewDidLoadで以下を実行する。
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
            self.navigationItem.rightBarButtonItem = self.editButtonItem()
        }
    

ナビゲーションコントローラーにCancel/Doneボタンを追加する

  • Bar Button Itemをドラッグして、ボタンの種類をCancel、Doneに変更する。

ナビゲーションコントローラーにツールバーを表示する

  • ナビゲーションコントローラーを使っている場合、Attributes Inspectorの「Shows Toolbar」にチェックを入れる。
  • Interface Builderで操作してもだめ。

ナビゲーションコントローラーのツールバーの表示非表示を切り替える

  • 例えば編集ボタンが押されたとき、ツールバーを非表示にしたいような場合
        override func setEditing(editing: Bool, animated: Bool) {
            super.setEditing(editing, animated: animated);
            self.navigationController?.setToolbarHidden(editing, animated:true)
        }
    

画面遷移

画面遷移の基本

  • あるビューコントローラーから他のビューコントローラーをPresent Modallyで表示する。
  • ビューコントローラーのアイコンを他のビューコントローラーCtrlドラッグして表示方法をPresent Modallyに変更。
  • 呼び出し元のボタンタップやテーブルセルタップで、performSegueを呼び出す
        func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
            if tableView.isEditing {
                let shelf = fetchedResultsController.object(at: indexPath)
                performSegue(withIdentifier: "editShelf", sender: shelf)
            } else {
                let shelf = fetchedResultsController.object(at: indexPath)
                performSegue(withIdentifier: "listBook", sender: shelf)
            }
        }
    

戻る処理

  • 戻り先のUIViewControllerに以下のメソッドを作成。
    @IBAction func unwindToTop(segue: UIStoryboardSegue) {
    }
    
  • Interface Builderで遷移先のボタンなどを選択し、Exitボタンにドロップする。unwindToTopが表示されるのでそれを選択する。
  • 手動で戻りたい場合は、ViewController自身をExitボタンにドロップして、segueに名前を付け以下のように手動で呼び出す。
                    self.performSegue(withIdentifier: "back", sender: nil)
    

Tips

独自のUIViewControllerを使用する

  • Storyboardで「ビューコントローラー」の部品を追加。
  • 独自のUIViewControllerのサブクラスを追加。
  • Identity Inspectorでビューコントローラーの部品のクラスを独自クラスに変更する。

ナビゲーションコントローラーの2番目のビューコントローラーにタイトルを設定する

ステータスバーまわりのはなし

自動レイアウトでパーセンテージ指定

  • 2つのコントロールを選択して「Pin」でEqual WIdth or Equal Heightの制約を追加。
  • Constrainsを選択肢、Attributes InspectorでMultiplierを指定。First Item = Second Item * Multiplierとなる。First ItemとSecond Itemはリストボックスをクリックして入れ替えることもできる。

トラブルシューティング

Scene is unreachable due to lack of entry points

UITableViewControllerで行が表示されない

  • UITableViewControllerではdatasourceやdelegateを自分で設定する必要はない。
  • 最低限以下のようなメソッドを表示すればデータが表示されるはず。
        override func numberOfSections(in tableView: UITableView) -> Int {
            // #warning Incomplete implementation, return the number of sections
            return 1
        }
    
        override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return rows.count
        }
    
        override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath)
            cell.textLabel!.text = rows[indexPath.row]
            return cell;
        }
    
  • 落とし穴として、テンプレートのnumberOfSectionsのデフォルト実装が"return 0"となっている。これを変えるを忘れないようにしないといけない。

Interface Builder上でだけナビゲーションバーが表示される

  • View Controllerのプロパティで、Simulated Metrixを確認する。Sizeが"Detail"となっていると表示される模様。

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-01-30 (火) 15:56:31 (356d)