はるのぶろぐ。

情報系大学生ハルが、ゆるゆるとIT関係についてや日々の雑記を綴ります。ちょっとだけ、あなたの役に立てる、そんなブログを目指しています。

【Xcode 13.4】Swift・Xcode学習備忘録12日目【TextFieldを使ったアプリを作ろう】

参加してます!ポチッとお願いします

記事名と
URLをコピー

こんにちは、情報系大学生のハル(Blog_IT_haru)です。

今回は、Swift・Xcode学習12日目です。

参考にしている本の『絶対に挫折しないiPhoneアプリ開発「超」入門』が一通り終わったため、11日と同様に、大学の授業で作るアプリに関係しそうなところを、自分で調べたりして学習していきたいと思います。

今回もStoryboardを使っていきます。

本に関する内容の時は、「▶︎p〇 〜という内容」というふうに示します。

また、この本はXcode 11ですが、私のXcodeのバージョンは13.4のため、その違いによるメモも多くあるので、参考になる箇所も多いと思います。

※プログラミングは大学で触れていたので、ガチの初心者向けではありません。

前回の11日目はこちら↓

【Xcode 13.4】Swift・Xcode学習備忘録11日目【地図アプリを作ろう】【現在地表示は未解決】 - はるのぶろぐ。

参考にした本

『絶対に挫折しない iPhoneアプリ開発「超」入門』です。

今日やるところ

画面遷移と、テキスト入力をできるようにすることをやりました。

参考にしたサイトは、【Swift/Xcode超入門】TextFieldを使ったアプリを作ってみよう | satorikublogです。

学習備忘録

Xcode

TextFieldを使ったアプリを作ろう

★ポイント →  Storyboardを使うこと!

作業の途中に出た英語の意味のメモ

「Do any additional setup after loading the view.」の意味 →「 ビューをロードした後、追加の設定を行います。」

ストリーボードとエディターを同時に表示させる方法

ストーリーボードの画面と、コードのぶぶんを同時に出したいとき、ありますよね?

↓のサイトを参考にできました。

【Xcode】ストーリーボードとエディターを同時に表示させる - ナトーアプリ工房

真ん中にオブジェクトを寄せたい

実際に作ることができたアプリは以下になります。

若干右に寄ってしまっているので、これを直したいです。

色々調べた結果、xcode autolayout 比率 | アヒルのプログラマBlogがわかりやすかったので、共有します。

バイスを切り替えても、ボタンの大きさの比率が保たれるように設定していきます

右下のアイコンをクリック、Accept Ratioにチェックを入れます

Add 1 Constraintボタンをクリックします

ボタンとViewを紐づけます

ボタンをControlを押しながら、Viewへドラッグアンドドロップします

Equal Widthsを選択します

右下のアイコンをクリック、Horizonatally in Containerにチェックを入れます

Add 1 Constraintボタンをクリックします

x軸の位置が中央に固定されました

iPad Pro 12.9 から iPhone SE へ切り替えて確認してみます

ボタンサイズのサイズ比率が維持されています

(引用:xcode autolayout 比率 | アヒルのプログラマBlog

ちなみに、Horizonatally in Containerは、水平を揃えるという意味です。

垂直方向も揃えたい場合はVertical Center in Containerにチェックを入れると良いです。

今回は、どちらも規定の位置にしたかったので、どちらもチェックを入れました。

また、Vertical Center in Containerのところを初期値は0ですが、決まった位置にしたい場合は、ここの数字を変える必要があるということが必要です。

結果、以下のように、決まったところに揃えることができました!

前日までの連載はこちら

私と同じ本を使って学習中の方で、今日の連載よりも前のページでつまづいた方は、以下のカテゴリーにまとめてある、連載を見ていただけると、お役に立てるかもしれません。

ぜひ見てみてください。

プログラミング-iPhoneアプリ開発 カテゴリーの記事一覧 - はるのぶろぐ。

前日の地図アプリを作ってみた、は以下からご覧になれます。

blog-it.hatenablog.com

まとめ

いかがでしたか?

前回は難しいな、と思っていましたが、今回は中央に配置するAutoLayout以外はさほど難しくありませんでしたので、次回に活かしていきたいと思います。

この記事がいいな、と思ってくれたら、SNSなどで拡散したり、

ブックマークやコメントなどしてくれると励みになります!

下の方とサイドバーにある、サポートもお待ちしています!

更に、読者になってくれたら、お返しに私も読者になります!

また、この記事の内容についてなにかありましたら、

お問い合わせ、コメント、TwitterのDMなどによろしくお願いします。

それでは。