鳩ブログ

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

今日はUIパーツのレイアウトを勉強、これ使いづらいですね...

f:id:hato36:20200708194321p:plain

本を読みながら設定していたのですが、理解できていなかったことの一つに、UIパーツのレイアウトがあります。
ですので、今日はUIパーツのレイアウトについて勉強しました。
しかし、使えば使うほど使いづらさを感じますw

 

iPhoneのランドスケープ(横)にも対応させる

f:id:hato36:20200708194600p:plain

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

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

よく使うEvernoteとかを見ても縦横比が変わるだけで、そこまで大きく変わらないのですよね。意外とみなさん適当なのかしらね。

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

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

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で本を買うと、先に読み飛ばすと言うことを意外とやらないことに気がつきました。なんとなく元のページに戻って来づらいと思ってしまうからです。

そもそも、普通の小説だと読み飛ばしはしないので良いのですが、この手の本はひょっとしたら紙の本の方がいいかもしれないと改めて思いましたが、私があまり使っていないブックマーク(栞)をもう少し活用すべきなのかもしれません。

Kindleの便利な使い方ももっと勉強しないとだめですね。

 

コードも少し復習できて、UIにも少しずつ慣れてきていますが、もう少しレベルアップしたいと思っています。
実は、作りたいアプリのイメージは出来てきているので、レベルアップしたら一気に作りたいと思っています。

 

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

今回改めて思ったのですが、UIの設定画面はかなりわかりづらいですし、XCode自体も使いづらいと感じました。

これまで私はWindowsで固定サイズのアプリばかり作ってきたからだと思います。

この辺は、縦横や画面サイズの違うスマホに合わせる必要のあるスマホアプリならではかもしれません。オブジェクトの設置やレイアウトをコードでやる方法も今回の勉強の中に覚えたので、ひょっとしたらそっちの方が都合がいいこともあるかもしれないので、その辺も試してみたいと思います。( 追記 SwiftUIがまさにそう言う発想です)