【Swift5/Xcode】UIStackViewで簡単にトルツメを実装する方法(表示非表示切り替え)

①プラスボタン（Shift + command + L）をクリック

②「View」をドラッグ&ドロップ

①「View」を選択

② 「Show the Size inspector」を選択

③以下の表の通りに入力

①「View」を選択

② 「Show the Attributes inspector」を選択

③Backgroundをわかりやすい色に変更

①「View」を選択して、optionを押しながらドラッグ&ドロップして複製

①複製した「View」を選択

② 「Show the Attributes inspector」を選択

③Backgroundをわかりやすい色に変更

①複製したViewを選択

② 「Show the Size inspector」を選択

③以下の表の通りに入力

①プラスボタン（Shift + command + L）をクリック

②「Vertical Stack View」をドラッグ&ドロップ

①「Stack View」を選択

② 「Show the Size inspector」を選択

③以下の表の通りに入力

2つのViewをshiftを押しながら複数選択して、StackViewの中にドラッグ&ドロップ

①プラスボタン（Shift + command + L）をクリック

②「Button」をドラッグ&ドロップ

①「Button」を選択

② 「Show the Attributes inspector」を選択

③名前を「トルツメ」、Fontを「System 30」に変更

①「StackView」を選択

② を選択

③上、左、右それぞれ赤い線をクリックして0にする

④「Add 3 Constraints」をクリック

①トルツメ(Button)を選択

② をクリック

③「Hotizontally in Container」と「Vertically in Constainer」をチェック入れる

④「Add 2 Vonstraints」をクリック

①２つのViewをShiftを押しながら複数選択

② を選択

③「Height」にチェック入れる

④「Add 2 Constraints」をクリック

これでstoryboard上の設定は完了です。

①Main.storyboardを選択

②control + option + command + enterを押下

Viewを11行目と12行目の間にcontrolを押しながらドラッグ&ドロップする。

①Nameに「toruView」と入力

②「Connect」をクリック

①トルツメ(Button)を選択し、controlを押しながら18行目と19行目にドラッグ&ドロップ

①Nameに「torutumeBtn」と入力

②「Connect」をクリック

これで、Main.storyboardとViewController.swiftの紐付けが完了しました。

以下は、現時点でのコードです。

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var toruView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func torutumeBtn(_ sender: Any) {
    }
}

@IBActionの中に、以下のように記述しましょう。

@IBAction func torutumeBtn(_ sender: Any) {
    self.toruView.isHidden = true
}

command + rで実行して動作確認しましょう。

以下のように処理を付け足しましょう。

@IBAction func torutumeBtn(_ sender: Any) {
    if toruView.isHidden {
        self.toruView.isHidden = false
    } else {
        self.toruView.isHidden = true
    }
}

次は、アニメーションをつけましょう。

さらに、以下のように処理を付け足しましょう。

@IBAction func torutumeBtn(_ sender: Any) {
    if toruView.isHidden {
        UIView.animate(withDuration: 0.3) {
            self.toruView.isHidden = false
        }
    } else {
        UIView.animate(withDuration: 0.3) {
            self.toruView.isHidden = true
        }
    }
}

これでトルツメの実装が完了です。