忘備録-基本的なiOSアプリ開発

趣味でiOSアプリ開発をかじっていた自分が、改めてiOS開発を勉強し始めた際に、曖昧に理解していたところや知らなかったところをメモしています。いつか書き直します。

## 参考文献

この記事は以下の書籍の情報を参考にして執筆しました。4章を読んだ時のメモです。

- [本気ではじめるiPhoneアプリ作り Xcode 10.x対応 (Informatics&IDEA)](https://www.amazon.co.jp/%E6%9C%AC%E6%B0%97%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8BiPhone%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E3%82%8A-Xcode-10-x%E5%AF%BE%E5%BF%9C-Informatics-IDEA/dp/4815600031/)

#4章の概要
4章では電卓アプリを作りながらアプリ開発の基本を学べました。プロジェクトの作成方法から部品配置、コーディング、画面遷移、Auto Layoutについて学べます。本記事ではその中で知らなかったことを忘備録としてメモしています。

#Storyboard
##部品の関連付け
[option]+ファイル名クリックで画面の右側にファイルを開ける。UI部品の関連付けの際に便利。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/62f97c1b-49d1-f991-27ad-5eeca68ebae7.png)


##UILabelのAutoshrink
Autoshrinkプロパティの値を変更することでUILableのサイズに収まらないテキストを設定した場合でも、自動的にテキストのサイズを縮小して全文を表示できる。iOSのメジャーバージョンアップ時にフォントのサイズが変わる事もあるので、絶対表示したい文章などを表示するのに使える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/4053ee1d-246d-4f09-ac2d-92ae47161ce4.png)


#画面遷移
##最初の画面に戻る遷移指定
ボタンを押したら最初の画面に戻る指定をしたい場合、最初の画面のUIViewContorllerに下記のメソッドを定義。
(全て手入力)
@IB~という記述は「@」はプログラムの特別な予約語であることを示し、「IB」はインターフェスビルダーの略。

```swift
 @IBAction func restart(_ segue: UIStoryboardSegue){
    //初期化処理
  }
```

その後、該当のボタン等をExitまでドラッグする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/6f1d1721-0e06-96af-b41c-7fb4ef3ba95f.png)



##ダウンキャスト
あるクラスをサブクラスにキャストすること。
例としてsegueで画面遷移をする際に、親クラスであるUIViewControllerを遷移先のクラスにダウンキャストするときの処理を抜粋。

```swift
  let viewController = segue.destination as! ViewController2
```


#Auto Layout

##Xcodeに制約を追加してもらう
部品を配置し[Reset to Suggested Constraints] を実行すると、現在の部品の位置で制約をつけてくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/2bae7cd4-2ec8-fee5-b10a-6b054b7e8459.png)


##Update Frames
制約と部品の位置がずれている時に、この機能を使うと戻せる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/28a6375f-7d1f-0765-0199-f7ef7c874e58.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/9c37169b-f44a-c0b1-939d-e3c4e387e5fa.png)

##Add New Constraintsの項目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/7c28d958-4014-f7f9-7481-49ad4621431f.png)

Equal Width : 複数の部品の幅を同じにする制約を追加。部品を複数選択している時に選択可能。
Equal Heights : 複数の部品の高さを同じにする制約を追加。部品を複数選択している時に選択可能。
Aspect Ratio : 複数の部品の感覚の比率の制約を追加。


##複数の部品を同じサイズにする

TextFieldを2つ設置し、１つに上からの距離、左からの距離、幅の制約をつける。
もう片方には上からの距離、左からの距離の制約をつける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/d6d3956f-c6ca-6027-95bc-f8c5780559e5.png)

幅を指定したTextFieldから幅を指定していないTextFieldに[control]+ドラッグし、Equal Widthを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/81c26e4b-c744-2eae-3065-52bc94f9a2e0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/cc6edf74-4d3e-4991-95e2-e737f96550ba.png)


これで二つのTextFieldの横幅の比率が等しくなる制約がついたので、制約をクリックし、赤ワクで囲った値を1にする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/e633e495-a907-dbc1-ab0c-a76e9290cb4f.png)

これで横幅が等しくなった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542614/d5c00817-bf84-a38b-97d9-60fe7418a4ec.png)