[Swift3] Segmentを使った画面切り替え (Extra View)

1 はじめに
- 1.1 前提条件
2 Segmentの用意
3 表示したいViewを用意
4 Extra Viewsに追加
5 Segmentでの切り替え
6 さいごに

はじめに

こんにちははじめです。
Segmentを使って画面の切り替えを行うにはいくつか方法はあると思いますが、
今回は[Extra Views]というものを使用して画面の切り替えを行いたいと思います。

前提条件

Swift 3.1

Segmentの用意

StoryboradにSegmentを追加し、

Segmentがタップされた時の処理を用意しておきます。

import UIKit

class ViewController: UIViewController {

    // Storyboardに追加したSegmentをOutLet接続
    @IBOutlet weak var Segment: UISegmentedControl!

    override func viewDidLoad() {
        super.viewDidLoad()        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    // セグメントをタップした時に実行
    @IBAction func tapSegment(_ sender: UISegmentedControl) {
        switch sender.selectedSegmentIndex {
        case 0:
            // Firstをタップした時に実行される処理
        case 1:
            // Secondをタップした時に実行される処理
        default:
            // デフォルトの処理
        }
    }
}

import UIKit

class ViewController: UIViewController {

// Storyboardに追加したSegmentをOutLet接続

@IBOutlet weak var Segment: UISegmentedControl!

override func viewDidLoad() {

super.viewDidLoad()

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

}

// セグメントをタップした時に実行

@IBAction func tapSegment(_ sender: UISegmentedControl) {

switch sender.selectedSegmentIndex {

case 0:

// Firstをタップした時に実行される処理

case 1:

// Secondをタップした時に実行される処理

default:

// デフォルトの処理

}

表示したいViewを用意

storyboardにUIViewを追加し、「First」をタップされた時に表示したい画面を作成します。

今回はタップされたセグメントがわかるように背景色とTextLabelを追加し「First」と表示しておきます。

Extra Viewsに追加

先ほど作成したViewをstoryboardの上部にある「First Responder」と「Exit」の間に

ドラックアンドドロップします。

※controlやoption、command等を押す必要はありません。

以上で先ほど作成したViewが「Extra Views」に追加されました。

同じ要領で「Second」をタップされた時に表示したいViewも「Extra Views」に追加します。

追加後は下の画像のようになります。

Segmentでの切り替え

デフォルトで表示されるViewを設定

「Extra Views」に追加されているものはaddSubViewするまで画面上に表示されないため、

ロード時に「First」のViewを表示するように追記しておきます。

class ViewController: UIViewController {

    @IBOutlet weak var Segment: UISegmentedControl!
    @IBOutlet var FirstView: UIView!
    @IBOutlet var SecondView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 追加するViewのHeightがSegumentの下につくように設定
        // 追加するViewのHeightがSegumentの下につくように設定
        FirstView.frame = CGRect(x: 0,
                                 y: Segment.frame.minY + Segment.frame.height,
                                 width: self.view.frame.width,
                                 height: (self.view.frame.height - Segment.frame.minY))
        SecondView.frame = CGRect(x: 0,
                                  y: Segment.frame.minY + Segment.frame.height,
                                  width: self.view.frame.width,
                                  height: (self.view.frame.height - Segment.frame.minY))
        
        // デフォルトでFirstViewを表示
        self.view.addSubview(FirstView)
    }
}

class ViewController: UIViewController {

@IBOutlet weak var Segment: UISegmentedControl!

@IBOutlet var FirstView: UIView!

@IBOutlet var SecondView: UIView!

override func viewDidLoad() {

super.viewDidLoad()

// 追加するViewのHeightがSegumentの下につくように設定

FirstView.frame = CGRect(x: 0,

y: Segment.frame.minY + Segment.frame.height,

width: self.view.frame.width,

height: (self.view.frame.height - Segment.frame.minY))

SecondView.frame = CGRect(x: 0,

y: Segment.frame.minY + Segment.frame.height,

width: self.view.frame.width,

height: (self.view.frame.height - Segment.frame.minY))

// デフォルトでFirstViewを表示

self.view.addSubview(FirstView)

}

※addSubViewをした際画面に表示されたViewがSegmentと重なってしまうので、

Segmentの下に表示されるようにframeを設定する必要があります。

Segmentがタップされた時に実行されるメソッドを作成

「First」がタップされた時は

「Second」をSuperViewから削除し、「First」をSuperViewに追加。

「Second」がタップされた時は

「First」をSuperViewから削除し、「Second」をSuperViewに追加するメソッド

を用意しておきます。

// SecondViewをViewから削除し、FirstViewをViewに追加する
func addFirstView() {
    SecondView.removeFromSuperview()
    self.view.addSubview(FirstView)
}

// FirstViewをViewから削除し、SecondViewをViewに追加する
func addSecondView() {
    FirstView.removeFromSuperview()
    self.view.addSubview(SecondView)
}

// SecondViewをViewから削除し、FirstViewをViewに追加する

func addFirstView() {

SecondView.removeFromSuperview()

self.view.addSubview(FirstView)

}

// FirstViewをViewから削除し、SecondViewをViewに追加する

func addSecondView() {

FirstView.removeFromSuperview()

self.view.addSubview(SecondView)

}

Segmentがタップされた時にメソッドが実行されるように追記

Segmentがタップされた時に先ほど作成したメソッドを実行するように

追記をします。

// セグメントをタップした時に実行
@IBAction func tapSegment(_ sender: UISegmentedControl) {
    switch sender.selectedSegmentIndex {
    case 0:
        // Firstをタップされた時に実行される処理
        addFirstView()
    case 1:
        // Secondをタップされた時に実行される処理
        addSecondView()
    default:
        // デフォルトで実行される処理
        addFirstView()
    }
}

// セグメントをタップした時に実行

@IBAction func tapSegment(_ sender: UISegmentedControl) {

switch sender.selectedSegmentIndex {

case 0:

// Firstをタップされた時に実行される処理

addFirstView()

case 1:

// Secondをタップされた時に実行される処理

addSecondView()

default:

// デフォルトで実行される処理

addFirstView()

}

以上で完成になります。

完成後のソースは以下のようになります。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var Segment: UISegmentedControl!
    @IBOutlet var FirstView: UIView!
    @IBOutlet var SecondView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 追加するViewのHeightがSegumentの下につくように設定
        FirstView.frame = CGRect(x: 0,
                                 y: Segment.frame.minY + Segment.frame.height,
                                 width: self.view.frame.width,
                                 height: (self.view.frame.height - Segment.frame.minY))
        SecondView.frame = CGRect(x: 0,
                                  y: Segment.frame.minY + Segment.frame.height,
                                  width: self.view.frame.width,
                                  height: (self.view.frame.height - Segment.frame.minY))
        
        // デフォルトでFirstViewを表示
        self.view.addSubview(FirstView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    // セグメントをタップした時に実行
    @IBAction func tapSegment(_ sender: UISegmentedControl) {
        switch sender.selectedSegmentIndex {
        case 0:
            // Firstをタップされた時に実行される処理
            addFirstView()
        case 1:
            // Secondをタップされた時に実行される処理
            addSecondView()
        default:
            // デフォルトで実行される処理
            addFirstView()
        }
    }
    
    // SecondViewをViewから削除し、FirstViewをViewに追加する
    func addFirstView() {
        SecondView.removeFromSuperview()
        self.view.addSubview(FirstView)
    }
    
    // FirstViewをViewから削除し、SecondViewをViewに追加する
    func addSecondView() {
        FirstView.removeFromSuperview()
        self.view.addSubview(SecondView)
    }

}

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var Segment: UISegmentedControl!

@IBOutlet var FirstView: UIView!

@IBOutlet var SecondView: UIView!

override func viewDidLoad() {

super.viewDidLoad()

// 追加するViewのHeightがSegumentの下につくように設定

FirstView.frame = CGRect(x: 0,

y: Segment.frame.minY + Segment.frame.height,

width: self.view.frame.width,

height: (self.view.frame.height - Segment.frame.minY))

SecondView.frame = CGRect(x: 0,

y: Segment.frame.minY + Segment.frame.height,

width: self.view.frame.width,

height: (self.view.frame.height - Segment.frame.minY))

// デフォルトでFirstViewを表示

self.view.addSubview(FirstView)

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

}

// セグメントをタップした時に実行

@IBAction func tapSegment(_ sender: UISegmentedControl) {

switch sender.selectedSegmentIndex {

case 0:

// Firstをタップされた時に実行される処理

addFirstView()

case 1:

// Secondをタップされた時に実行される処理

addSecondView()

default:

// デフォルトで実行される処理

addFirstView()

}

// SecondViewをViewから削除し、FirstViewをViewに追加する

func addFirstView() {

SecondView.removeFromSuperview()

self.view.addSubview(FirstView)

}

// FirstViewをViewから削除し、SecondViewをViewに追加する

func addSecondView() {

FirstView.removeFromSuperview()

self.view.addSubview(SecondView)

}

さいごに

最近見た目やautolayoutに頭を悩まされることが増えてきた気がします。

まだまだ勉強不足なので、今後とも理解を深めていこうと思います。

この記事が少しでも何かの参考になれば幸いです。

最後まで見て頂きありがとうございました。

日	月	火	水	木	金	土
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

[Swift3] Segmentを使った画面切り替え (Extra View)

はじめに

前提条件

Segmentの用意

表示したいViewを用意

Extra Viewsに追加

Segmentでの切り替え

デフォルトで表示されるViewを設定

Segmentがタップされた時に実行されるメソッドを作成

Segmentがタップされた時にメソッドが実行されるように追記

さいごに

フォロー

アプリ情報