こんにちは、情報系大学生のハル（Blog_IT_haru）です。
今回は、Swift・Xcode学習13日目です。
参考にしている本の『絶対に挫折しないiPhoneアプリ開発「超」入門』が一通り終わったため、１１日と同様に、大学の授業で作るアプリに関係しそうなところを、自分で調べたりして学習していきたいと思います。
今回もStoryboardを使っていきます。
本に関する内容の時は、「▶︎p〇 〜という内容」というふうに示します。
また、この本はXcode 11ですが、私のXcodeのバージョンは13.4のため、その違いによるメモも多くあるので、参考になる箇所も多いと思います。
※プログラミングは大学で触れていたので、ガチの初心者向けではありません。
前回の１２日目はこちら↓
【Xcode 13.4】Swift・Xcode学習備忘録１２日目【TextFieldを使ったアプリを作ろう】 - はるのぶろぐ。
参考にした本
『絶対に挫折しない iPhoneアプリ開発「超」入門』です。
今日やるところ
画面遷移の練習として、QuizKnockのふくらPが作っていた、ルイザ・グロス・ホロイッツ賞のアプリを作ってみます。
東大生100点は取り飽きたので人生最高得点を取る旅に出ます - YouTube
ルイザ・グロス・ホロウィッツ賞クイズ - Apps on Google Play
学習備忘録
Xcode
画面遷移のアプリを作ってみる
以下のサイトを参考にやってみます。
基本は以上のサイトを参考に作っていくので、画面遷移については、このサイトを参考にしてみてください。
【Swift/Xcode超入門】画面遷移するアプリを作ってみよう | satorikublog
「Bar Tint」をSystem Yellow Colorに変更しても色が変わらない？
「AppearnaceのStandard」と、「Scroll edge」にチェックを入れます。
「Scroll Edge Appearnace」の「Background」で色をSystem Yellow Colorにします。
以上のようにすると、OKでした。
私の作業環境は、Xcode13.4ですが、参考にしたサイトでは、12.0.1でしたので、この違いかな？と思います。
参考：NavigationBarの色が変わらない! - Qiita
画面遷移自体は、ここまでで完了です。
テキストを表示する
これは、さほど難しくありませんが、ルイザ・グロス・ホロウィッツ賞のアプリを見てみると、問題の文字が表示されています。
これは、TextViewを使って実現できます。
いつも通り、＋ボタンからTextViewを画面にドラッグアンドドロップします。
また、今回は、ユーザーに文字入力させたくないので、BehaviorのEditableのチェックを外しておきます。
ちなみに、TextView 内で改行する方法は、「option+エンターキー」です。
もっとルイザ・グロス・ホロウィッツ賞クイズに近づけよう
単純に、Backボタンが自動で付くものであれば、参考にしたサイトの部分でOKなのですが、実際、QuizKnockのふくらPが作ったアプリは、画面全体を押したら戻るシステムになっていますし、backボタンはありません。
- 画面全体を押せるようにする
- backボタンが出ない画面遷移にしたい
- オブジェクトの場所（デザイン）を少し整理して完成する
とりあえず今日は3.のみ行います。他の部分はまた明日できたら投稿します。
オブジェクトの場所を整理することについては、前回のTextFieldのアプリを作るときに、AutoLayoutを使用したので、そこをもとにやればOKだと思いますが、一応以下に再掲しておきますね。
★AutoLayoutのポイント★
・左上が0,0という座標！
デバイスを切り替えても、ボタンの大きさの比率が保たれるように設定していきます
右下のアイコンをクリック、Accept Ratioにチェックを入れます
Add 1 Constraintボタンをクリックします
ボタンとViewを紐づけます
ボタンをControlを押しながら、Viewへドラッグアンドドロップします
Equal Widthsを選択します
右下のアイコンをクリック、Horizonatally in Containerにチェックを入れます
Add 1 Constraintボタンをクリックします
x軸の位置が中央に固定されました
iPad Pro 12.9 から iPhone SE へ切り替えて確認してみます
ボタンサイズのサイズ比率が維持されています
ちなみに、Horizonatally in Containerは、水平を揃えるという意味です。
垂直方向も揃えたい場合はVertical Center in Containerにチェックを入れると良いです。
今回は、どちらも規定の位置にしたかったので、どちらもチェックを入れました。
また、Vertical Center in Containerのところを初期値は0ですが、決まった位置にしたい場合は、ここの数字を変える必要があるということが必要です。
（引用：【Xcode 13.4】Swift・Xcode学習備忘録１２日目【TextFieldを使ったアプリを作ろう】 - はるのぶろぐ。）
他の部分については、明日またやろうと思います。
前日までの連載はこちら
私と同じ本を使って学習中の方で、今日の連載よりも前のページでつまづいた方は、以下の連載を見ていただけると、お役に立てるかもしれません。
ぜひ見てみてください。
まとめ
いかがでしたか？
大学が始まったため、毎日投稿は厳しくなるかもしれませんが、引き続き、勉強頑張っていきたいと思います。
ちなみに、明日か明後日には、ルイザ・グロス・ホロウィッツ賞クイズを完成させて、GitHubか何かに上げられたら良いなと思っています。
この記事がいいな、と思ってくれたら、SNSなどで拡散したり、
ブックマークやコメントなどしてくれると励みになります！
下の方とサイドバーにある、サポートもお待ちしています！
更に、読者になってくれたら、お返しに私も読者になります！
また、この記事の内容についてなにかありましたら、
お問い合わせ、コメント、TwitterのDMなどによろしくお願いします。
それでは。
