xcode14(swift)に触れてみる

初めてxcodeに触れた際のメモとして記事に残そうと思います。
内容としてはxcodeで画面にボタンを作成し、画面遷移を行うレベルです。
xcodeのバージョンにより操作が違う部分があるようです。

環境
xcode14.1
swift

[開発者向け公式サイト(日本語)](https://developer.apple.com/jp/develop/)
[開発者向け公式サイト(英語)](https://developer.apple.com/)

#  操作
・ライブラリペインの表示　`コマンド+シフト+L`
・アシスタントエディタの表示
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/017fc82c-a24a-95b2-94f3-5ff0b0da4b11.png">



# ボタンの追加とセグエで画面遷移

・画面に部品の追加を行うために`コマンド+シフト+L`でライブラリペインを表示する。
・buttonを検索し、ドラックアンドドロップで画面に配置する
・ダブルクリックでボタンの表示文字を変えることができる　
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/56e4c653-a939-4f5e-7b85-59c60013af53.png">
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/f942ec48-f66a-35fc-dd61-05c694d1cc8d.png">


・Auto Layoutを使いボタンを中央に配置。(チェックを入れadd Constraintsを押下)
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/a2f54a06-99fe-b677-da95-342a3d444b07.png
">

・ライブラリペインからview Controllerをドラック&ドロップで追加する
・別画面として分かりやすいようにbackground　colorをライトグレーにする
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/4234e47b-963f-a3ab-68be-f311baaa44d6.png">
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/a39a8dd4-6973-f2bd-fc13-631f860cd879.png">
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/323d411d-6d89-209d-8430-6c0c827903ac.png">

・ボタンと画面を繋ぐためにcontrolを押しながらボタンを次の画面に引っ張り、Present Modallyを選択する(セグウェイ？の設定が完了。矢印の真ん中のを押すことでオプション設定もある)
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/3e53122e-f37a-5b71-9108-68e2d5177d71.png">
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/0ff975d5-da38-ab4b-fa73-fc3997f04858.png">
<ここまでをシュミレータで起動するとtap meのボタン押下でグレーの画面に遷移する。>

# 戻るボタンを追加する

・グレーの画面にボタンを追加する
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/b322eb71-132c-4e8f-f758-a5eab6d24199.png">

・画面遷移と同じやり方でやってしまうと白い画面二つ目が作られてしまうので、Go Back押下でグレーの画面を終了させるやり方とする
・ViewControllerに関数を作成する(unwindToTop)
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/c7ce58c5-c10f-ff06-2ba3-268610b2c0df.png">

・GoBackボタンをcontrolを押しながら右上のアイコンに持っていき、先ほど作った関数を選択する
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/d5b1ccf2-74d4-5f88-6d0c-dcfa093ce866.png">

<ここまでをシュミレータで起動するとGo Backの押下でグレーの画面が消え、白に戻る。>

# ナビゲーションコントローラーを使い複数の画面で画面遷移を行う
<img width="900" src="">
・先ほどのグレーの画面を消しView Controllerを二つ追加し分かりやすいように背景色をつける
・最初の画面のボタンから二つ目の画面にボタンを引っ張り、showを選択する
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/a67aa463-ca76-4ef9-95ed-ee8584c2db65.png">

・二つ目の画面にボタンを追加し、同じことを行う
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/d84dfe5c-b0f5-71f1-b932-f2b4366a19bf.png">
＜ここまでで遷移はするが戻れない状況＞

・ナビゲーションコントローラーを埋め込む
・最初の画面の左上を押下 ヘッダーのEditor>Embet in>Navigation controllerを選択
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/61dff444-053e-68d4-37fa-4bdfda0719c5.png">
<ここまでをシュミレータで起動すると画面上部にBackボタンが表示され、戻る動作ができる>


# ラベルとボタンを追加し、ボタン押下でラベルの文字を変える簡単な処理を作成する

・不要な画面は削除し、最初に表示する画面の矢印マークも消えた場合は左上のview controllerを選択し右側のIs Initial View Controllerにチェックを入れる
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/fc5870c9-d3bf-ffb5-8831-ddd0bffd9767.png">

・アシスタントエディタを表示しラベルから`control`を押しながらアシスタントエディタに引っ張る
・nameを決めconnect押下
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/40d65db6-cb11-e6d7-8b89-fb714d924aff.png">
・ボタンも同様に引っ張りConnectionをActionを選択、nameを決めconnect
・アシスタントエディタに処理を記述
<img width="900" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/90a9980d-8b03-f419-10bf-9be6e62800a7.png">
・デプロイし、tap me押下でラベルの文字が変わる
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/c865095f-ab7f-1e58-43af-b99d30df008e.png">
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689433/b863f20d-97d7-d1df-a77a-0e52e19c9f8d.png">