鳩ブログ

サラリーマンが綴るブログ

今日はSwiftのコードではなくUIパーツのレイアウトを勉強

f:id:hato36:20200708194321p:plain

いまいち本を読みながら設定していたのだが理解できていなかったのがUIパーツのレイアウトについて。
今日はここを勉強してみた。

 

iPhoneのランドスケープ(横)

f:id:hato36:20200708194600p:plain

とりあえず縦でも横でも入力項目がニョキッと伸びて、ボタンがちゃんと配置される様になった。おそらくこれを繰り返せば入力項目が増えても並べられると思うのだが、普通に考えて縦と横だと長さが違うから横の時はうまく配置し直さないとだめだよね?

今日はそこまではいけなかったけど、とりあえずはイメージ通り。
もう少し項目が増えた時の横画面でうまく配置できる様になったらベストだね。
ただ、普通に考えるとそこまでやってるアプリって無いかな?
ふとよく使うEvernoteとかを見ても縦横比が変わるだけで、そこまで大きく変わらないわw

レイアウトいじるとエラーが出まくる(涙

今まで理解せずにいろいろいじっていて、すぐに以下の様にエラーになってしまっていた。

f:id:hato36:20200708200745p:plain

当然これは理解が出来ていなかったから...というわけだが、自分なりに考えながらいじってみたところ少し理解ができてきた。

左側のtextfieldについては、上左右の三箇所だけで、右側のbuttonは上左右の指定をし、さらにボタンサイズを固定としている。

f:id:hato36:20200708204237p:plain

指定はもちろん下記のAdd New Constraintsで。

f:id:hato36:20200708204545p:plain

で、まだ本では出てきていない箇所だが、このAuto Layoutで失敗した場合(先の赤や橙の線となった場合)に、指定したConstrainsを取り除くことができるので、失敗したときや試す時にやってみると良い。

f:id:hato36:20200708204906j:plain

まだまだ勉強中で正しいかどうかもわかっていないが、これをやってなんとか綺麗にレイアウトをすることができたので、もう少しUIパーツを追加して試してみようと思う

 

以前の記事にも書いているが、この本を読みながら勉強をしている。

Kindleだとページをペラペラめくるってやりづらくてやらなくなってしまったが技術書には不向きなのかも

今日書いていることもひょっとしたらもっと先の章に正しいやり方が書いてあるのかもしれないが、Kindleで買うと先に読み飛ばすと言うことを意外とやらないことに気がついたw
普通の小説とかだと読み飛ばしなんてことはしないのでいいが、この手の本はひょっとしたら紙の本の方がいいかもしれないと改めて思った。
コードも少し復習できて、UIにも少しずつ慣れてきているが、もう少しレベルアップしたいと思う。作りたいアプリのイメージは出来ているので、レベルアップしたら一気に作りたいなと。

以前VBを使っていた私にとってXCodeのUI設定は難しいと思った 

今回改めて思ったが、UIの設定画面はかなりわかりづらいと思う。
まぁ、これまで私はWindowsで固定サイズのアプリばかり作ってきていたからだと思う。(多少は解像度に合わせてレイアウトを変えることもあったが....)
この辺は縦横や画面サイズの違うスマホに合わせて行く必要のあるスマホアプリならではかもしれないが、オブジェクトの設置やレイアウトをコードでやる方法も今回の勉強の中でみられたので、ひょっとしたらそっちの方が都合がいいこともあるかもしれないので、その辺も試してみたいと思う。

詳解 Swift 第5版

詳解 Swift 第5版

  • 作者:荻原 剛志
  • 発売日: 2019/11/15
  • メディア: Kindle版