Navigation Bar and Side Menu with Storyboard Practice

この文章はSide Menuがどのようにスクリーンを弾いたのかではありません.既存の画面を押し開きたい場合は、次のリファレンスビデオリンクを使用してビデオを表示します.
リファレンス映像
https://www.youtube.com/watch?v=Hl_Re_KLhcY
次のように、シーケンスイメージボード上の2つのTable Viewを無視してください.1つ目の目的は、シーケンスイメージボードからナビゲーションバーを追加することです.

画面上部のEditorを選択すると、下はEmbed In、下はNavigation Controlになります.ナビゲーションバーコントローラを作成するには、このボタンをクリックします.

下図のようにNavigation Bar Controllerが作成されています.

追加後、ナビゲーションコントローラがIs初期ビューコントローラではないことを確認してください.そうでない場合、Simulatorは黒い画面だけを表示します.

ボタンを追加する必要があります.Barを検索すると、次のようにBar Button Itemが表示されます.

ドラッグ＆ドロップで目的の場所に追加します.右側にボタンを付けて、右側にSide Menuが見えるようにしました.

ユーザーがボタンを押すと、表示する画面を特定する必要があります.ボタンをクリックすると、右側からTable Viewが見えます.そのためには、Table View Controlを含むコンテンツビューコントローラを適切な場所に追加してください.

右側に新しいビューコントローラが追加されます.必要なビューコントローラはTable Viewで、削除後にTable View Controlを追加します.次に、キーボードコントロールキーを押しながら、以前に追加したコンテンツビューコントローラをTable Viewにドラッグします.選択可能な項目は下図のようにEmbedを選択してください.

Table View Controlオブジェクトファイルを個別に作成し、クラスを指定しました.任意のラベルが同時に追加されました.

Reuse Identifierの設定も忘れないでください.

作成したTable View Controllerオブジェクトファイルで、次のコードを記述します.textLabel.textに入力したのは、私がランダムに配列に置いた表情です.

class SideMenuTableViewController: UITableViewController {

    private let logData = LogData()

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

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return logData.logData.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "SideMenuCell", for: indexPath)
        cell.textLabel?.text = logData.logData[indexPath.row].emoji
        return cell
    }

}

結果は次のとおりです.左の2つのテーブルを無視して、右のテーブルだけを考えます.

まず、現在のコンテンツビューの幅を固定サイズに設定します.次に、セキュリティ領域の上部と下部にLayoutを設定することによって、Trailing(左側から表示される場合、Contenter View Controlをシーケンスイメージボードの一番左側に配置し、Leading)を幅の負の値(私の場合-402)に設定します.

Contenter View Controllerは、以下のように非表示になります.

次に、ViewControllerにNSLayoutConstraintを追加します.

    @IBOutlet weak var sideMenuTrailingLayout: NSLayoutConstraint!

そして、IBOUTLEの左側に空の円が現れます.これは、以前にシーケンスイメージボードで使用したTrailing Constraintに関連付けられます.「Side Menu Trailing L.」は、下図の一番下の3番目の位置にあります.接続されているかどうかを確認できます.次の画像は接続されていますが、接続されていない場合は別の名前です.これは、接続する前に、次の画像とは異なるように見えることを意味します.

ViewControllerを変更する前に、次のようにContenter View Controllerオブジェクトを作成します.

class ContainerViewController: UIViewController {
    
    var sideMenuOpen = false
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
}

ViewControllerでは、ナビゲーションバーのボタンを以下のように接続し、@Ibaction、コンテナViewController、Containerメソッドを作成します.

class ViewController: UIViewController {

    @IBOutlet weak var sideMenuTrailingLayout: NSLayoutConstraint!
    
    @IBOutlet weak var sideMenuButton: UIBarButtonItem!
    
    @IBAction func sideMenuToggled(_ sender: Any) {
        if containerViewController.sideMenuOpen == false {
            containerViewController.sideMenuOpen = true
            sideMenuTrailingLayout.constant = 0
        } else {
            containerViewController.sideMenuOpen = false
            sideMenuTrailingLayout.constant = -402
        }
        UIView.animate(withDuration: 0.3) {
            self.view.layoutIfNeeded()
        }
    }
    
    var containerViewController: ContainerViewController!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableViewDelegate()
        configureContainer()
    }

    private func configureContainer() {
        containerViewController = ContainerViewController()
    }

}

ユーザーがその意味を説明すると、ContenterView Controlはボタンを押す前にsideMenuOpenを同時に非表示にし、ユーザーがボタンを押すとsideMenuOpenはtrueになり、sideMenuTrailingLayoutも非表示になります.constantを0にして画面に表示します.