21
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[Swift4]ナビゲーションバーの使い方

Last updated at Posted at 2018-05-07

こんばんは。東條です。

今日はナビゲーションバーの使い方について学びます。

##1.ストーリーボードでの作成方法
ストーリーボードで作る場合はNavigation Barってやつを配置します。
左右にBar Button Itemってやつを配置することで、いい感じになります。Buttonとかを使う時みたいな感じで設定しちゃってください。

##2.コードでの作成方法
ここからが本題。
ストーリーボードで作ると色々と不便な時があるので、コードで作る方法も調べてみました。

処理内容:
1.コードで最初のビューにナビゲーションバーを作成
2.遷移ボタンを押下したら次の画面に遷移&次の画面にナビゲーションバーを作成
3.戻るボタンを押すことで前の画面に戻る

このコードを試すときには、ストーリーボードでビューコントローラーをもう一つ追加して、追加したビューコントローラーのidentify inspectorのStoryboard IDにnextを設定しておいてください。

test
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        //ナビゲーションバーを作る
        let navBar = UINavigationBar()
        
        //xとyで位置を、widthとheightで幅と高さを指定する
        navBar.frame = CGRect(x: 0, y: 0, width: 375, height: 60)
        
        //ナビゲーションアイテムのタイトルを設定
        let navItem : UINavigationItem = UINavigationItem(title: "タイトル")
        
        //ナビゲーションバー右のボタンを設定
        navItem.rightBarButtonItem = UIBarButtonItem(title: "遷移", style: UIBarButtonItemStyle.plain, target: self, action:#selector(self.myAction))
        
        //ナビゲーションバーにアイテムを追加
        navBar.pushItem(navItem, animated: true)
        
        //Viewにナビゲーションバーを追加
        self.view.addSubview(navBar)
        
    }
    
    @objc func myAction(){
        let storyboard: UIStoryboard = self.storyboard!
        let second = storyboard.instantiateViewController(withIdentifier: "next")
        

        //ナビゲーションバーを作る
        let navBar = UINavigationBar()
        
        //xとyで位置を、widthとheightで幅と高さを指定する
        navBar.frame = CGRect(x: 0, y: 0, width: 375, height: 60)
        
        //ナビゲーションアイテムのタイトルを設定
        let navItem : UINavigationItem = UINavigationItem(title: "タイトル")
        
        //ナビゲーションバー左のボタンを設定
        navItem.leftBarButtonItem = UIBarButtonItem(title: "戻る", style: UIBarButtonItemStyle.plain, target: self, action:#selector(self.returnView))
        
        //ナビゲーションバーにアイテムを追加
        navBar.pushItem(navItem, animated: true)
        
        //遷移先Viewにナビゲーションバーを追加
        second.view.addSubview(navBar)
        
        //画面遷移
        self.present(second, animated: true, completion: nil)
    }
    

    //遷移先Viewから戻る処理
    @objc func returnView(){
        self.dismiss(animated: true, completion: nil)
    }
    

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


}

ソースで見ると何となくわかったような気になれますね。
actionの内容を変えれば色々楽しめそうです。

ただUIBarButtonItemのStyleやtargetはどのような意味があってどのようにいじれるのでしょう。。。presentやdismissのanimatedとcompletionも謎です。。。

21
17
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?