SegmentControlで画面を切り替えてみよう

Blog

 

今回、紹介するのは、SegmentControlを使って画面を切り替える方法を紹介します。

 

完成イメージ

 

 

 

 

 

UI

 

  1. NavigationControllerとViewControllerを二つ追加。
  2. ViewControllerのBackgroundの色を変更、ラベルを追加。

 

 

 

 

  1. SegmentControlをNavigation Itemの所に追加。

 

 

 

 

  1. 「First View」と「SecondView」のViewをNavigationControllerの上部にある「First Responder」と「Exit」の間にドラッグ&ドロップ。

 

 

 

  1. 完成図は以下のようになる。

 

 

 

コネクト

 

 

  1. SegmentControlをOutlet接続、Action接続。
  2. FirstViewとSecondViewをOutlet接続。

 

 

@IBOutlet weak var segment: UISegmentedControl!
@IBOutlet var firstView: UIView!
@IBOutlet var secondView: UIView!

@IBAction func segmentControl(_ sender: UISegmentedControl) {
        
 }

 

 

 

 

 

コーディング

 

  1. FirstView,SecondViewを表示・非表示にするファンクションの記入。

 

func addFirstView() {
        secondView.removeFromSuperview()
        self.view.addSubview(firstView)
   }
    
func addSecondView() {
        firstView.removeFromSuperview()
        self.view.addSubview(secondView)
  }

 

 

  1. SegmentControlのActionにSwitchでコードを記入。

 

 

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

 

  1. デフォルトでFirstViewを表示する

 

   override func viewDidLoad() {
        super.viewDidLoad()
      
       self.view.addSubview(firstView)
    
}

 

 

全コード

 

 

import UIKit

class ViewController: UIViewController {
    
    
    @IBOutlet weak var segment: UISegmentedControl!
    @IBOutlet var firstView: UIView!
    @IBOutlet var secondView: UIView!
    

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // デフォルトでFirstViewを表示
        self.view.addSubview(firstView)
    }
    
    
    @IBAction func segmentControl(_ 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)
    }
    
    

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


}

 

 

 

完成!実行!!

 

 

 

 

 

いかがでしたか。

 

以上で「SegmentControlで画面を切り替えてみよう[swift Xcode9 SegmentControl]」の説明を終わります。

 

🤗

 

 

コメント