【Swift】StoryboardにUIパーツを設置する

まえがき

Xcode12.4のSwiftを使ったiOSアプリ開発にて、以前のXcodeと異なることが多かったので記載

ボタンをクリックするとラベルの文字が変更するアクションを実装

UIパーツの設置

• 右上の+ボタンをクリックし、オブジェクトの一覧を表示する
  
• ラベルとボタンを画面に追加する
  
• 好きな位置に設定可能だがレイアウトのエラーが発生してしまう
• エラーを解消するためにAutoLayoutの設定を行う

AutoLayoutの設定

• AutoLayoutは右下にあるアイコンで余白や他のUIパーツとの距離を設定する

• ラベルを選択後に右下のアイコンを開き、Horizontally in Container にチェックを入れる
• その後Add 1 Constraintをクリック

• ConstraintsにLabel.centerX = centerXが追加され、ラベルが中央に来るように設定された

• 次はラベルの余白を設定
• ラベルを選択後に右下のアイコンを開き、Add New Constraintsの上の赤い線をクリックして、数値を入力する（今回は上: 163に設定）
• その後Add 1 Constraintをクリック

※赤い線をクリックしていない箇所は反映されない

• 同様にしてボタンの位置も設定する（今回は上: 205、右: 30、左: 30、下: 399に設定）

※上はラベルとの距離

以上で、エラーが消えて、ボタンのAutoLayoutを設定完了

アウトレット接続

次にアウトレット接続をしてラベルとボタンの内容を設定する

• ViewControllerを開く
• controlキーを押したままStoryboardのラベルをViewControllerのviewDidLoadの上に追加する（Name: labelに設定）
  
• 同様にしてボタンもアウトレット接続を行う（Name: buttonに設定）
• viewDidLoadは初期画面表示の時に呼び出される
• 以下、ViewController

import UIKit

class ViewController: UIViewController {

    // アウトレット接続
    @IBOutlet weak var label: UILabel! // ラベル
    @IBOutlet weak var button: UIButton! // ボタン
    
    // 最初に読み込まれるコード
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

• viewDidLoad内で、ラベルとボタンの中身を設定する
• 以下、ViewControllerのviewDidLoadメソッド

 // 最初に読み込まれるコード
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        label.text = "ボタンがクリックされてません" // 追加
        button.setTitle("クリック", for: UIControl.State.normal) // 追加
    }

実行するとラベルとボタンに設定したテキストが適応されている

アクション接続

次にアクション接続をしてボタンがクリックされた時の動きを設定する

• controlキーを押したままStoryboardのボタンをViewControllerのviewDidLoadの下に追加する（Name: buttonClickに設定）
  
• buttonClickメソッドにボタンをクリックした時の動きを設定する
• 以下、ViewControllerのbuttonClickメソッド

 // ボタンをクリックした時
    @IBAction func buttonClick(_ sender: Any) {
        label.text = "ボタンがクリックされました！" // ラベルの表示内容
    }

実行するとボタンをクリックするとラベルの文字が変更される

クリック後

• ViewControllerの全体のメソッド

 import UIKit

class ViewController: UIViewController {

    // アウトレット接続
    @IBOutlet weak var label: UILabel! // ラベル
    @IBOutlet weak var button: UIButton! // ボタン
    
    // 最初に読み込まれるコード
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        label.text = "ボタンがクリックされてません" // ラベルの表示内容
        button.setTitle("クリック", for: UIControl.State.normal) // ボタンの表示内容
    }
    
    // ボタンをクリックした時
    @IBAction func buttonClick(_ sender: Any) {
        label.text = "ボタンがクリックされました！" // ラベルの表示内容
    }
}

今回はここまで !

---

関連記事

1.SwiftでStoryboardを扱う
2.StoryboardにUIパーツを設置する（本記事）
3.画面遷移を行う
4.画面上に画像を表示する方法
5.ImagePickerでカメラロールから写真を選択して表示する
6.PHPickerでカメラロールから写真を選択して表示する