見出し画像

【徒然iOS】気ままにUIKit19〜StackViewを使って黄色警告を消そう〜

M_Kaku堂

概要

このマガジンは四十を過ぎたおっさんが、

を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。

今回

をやる〜〜〜

全部をスクショしていくと果てしなく長くなりそうだから要点でタイプに分けてやっていくます〜〜〜！

ここも考え方とか詳細なやり方は、リンク先の記事を読んでね〜〜〜
（果てしなく長くなるので）

ポイント

  • Vertical Stack View（以下、VStackView）　：　縦にパーツを格納

  • Horizontal Stack View（以下、HStackView）　：　横のパーツを格納

  • 組み合わせて使うこともOK！

👉結果的に、制約の数を減らせる

前準備

今回は、今まで作ったビューを直していくだけなので

  1. 念の為、バックアップ

だけをいつも通りやってから本題へ💃

てな感じで今日の日付でバックアップ

本題

⒈まずは、Vertical Stack Viewからやって、Stackのイメージを

素材にするビューはこれな〜〜〜〜

ボタンの時に作ったビュー＝縦に並んでるだけ
パーツを選んで〜〜〜〜
適当に配置〜〜〜
Stack Viewがひとつ増えてる

全部のパーツを縦に並べるだけだから、、、

全パーツを選んで
さっき追加したVStackViewの中にドラッグする

すでにこの時点で、黄色警告エラー数が　67 → 58に変わってる

左側の青くなってるところでStackView全体を選択して、、、
VStackView全体のみ制約を追加〜〜〜〜
こんな感じになるけど焦らず
右側のDistributionをFill Equalityに変更
はい、完了

操作しながらだとわかると思うけど、こんなにあっさり終わります

ここらのビューもちょっと同様に直してみる

て感じでVStackViewを追加して直しただんけど、
すでにエラーが58→41まで減った！！！！

次はこのビューなんだけど、、、、

縦に並んだ部品と横に並んだ部品があるから、
HStackViewを使ってやっていく

⒉HStackViewビューとVStackViewビューを組み合わせて使う

ポイント

組み合わせの場合は、

①HStackViewからやって、
②VStackViewでやる

と簡単

HStackViewを追加
追加後
下の値変更を先ほどと同様にドラッグしてまとめてHStackView内に移動
同じ要領で値も移動
VStackを選んで〜〜〜
ビューに追加〜〜〜

おかしなところがあれば調整して、

VStackViewのみと同じ要領で、移動
あとは同じ要領で、VStackView自体に制約を追加するだけ
制約を選択
制約追加後

すでに、41　→ 　38にエラーが減った

ここら辺の組み合わせ画面もやってみよう
ここのふたつが完了した
すでに黄色警告が31/67＝半分以下に、、、
次はこのビューだけど、、、、

実はリンクの記事の説明だけだと、気づかないかもしれない
これは

⒊VStackViewの中にVStackViewを組み合わせるでさらに対応できるパターン

同様に、まずは下の段の１　５　10 をHStackViewからやって、アニメーションありラベルとVStackViewで結合

VStackViewまで追加したところ
全体図は今の所こんな感じ

同様に上の段も〜〜〜〜

ついでに、HStackViewで実行ボタンのところもやる〜〜〜

できた

ここで、VStackViewに一気に嵌め込む前に

さっきのアニメーションなし／ありのVStackViewの幅を調整して、制約を付けとく　＝今回は幅は360,高さは177くらいにしとく

こんな感じでコンフリクトになるけど一旦気にしない

で、VStackViewを追加して、すべてのパーツを格納してく〜〜〜

格納後〜〜〜
VStackViewに制約を追加〜〜〜

まだ、赤になっているので、コンフリクトを解消する

Change Priorityをクリックして、赤丸を消していく〜〜〜
はい、完成

すでに黄色警告のエラーが 67→20まで減った〜〜〜〜！

以下の画面

は同様に、今までに紹介したやり方でエラーを消していく

こんな感じ、このビューだけStackViewとAutoLayoutの組み合わせでやった！

すでに、13個までエラーが潰せてる👀

左側のエラー内容を見ると、各ビューにエントリーポイントがないから出すエラー以外は解消できてることがわかる

エントリーポイントについては、、、

なんかでやればすぐに解消できるので〜〜〜〜🕺

実は、他にも

横に傾けたときにレイアウト変更したい👉size class制御
や、
横に傾けて隠れてる箇所を操作したい👉scroll view

などなど、色々あるけど、今回の目的はあくまで、

黄色警告解消

なんで。世の中が休日に、ビール片手に暇だから書いたまで🕺

まとめ

VerticalStackViewとHorizontalStackViewとその組み合わせ方法について簡単な使い方を説明したけど、これを使えば、

  • ビューのデザインに相当なこだわりがない限り８割くらいはまずエラーが解消できる。

  • 気になるエラーが他にコンフリクトなんかで出てくる時は、そこで、Resolveを使えば解消できる

  • ただし、どうしても凝ったデザインにしたいって場合とか、これじゃ対応できない場合なんかは、AutoLayoutを純粋に使ってね〜〜〜！

あくまでも、個人的に気ままにUIKitの基本を振り返りながら、記事当時の仕様と、現在の開発環境の相違を楽しんでるマガジンなので〜〜〜！

ま、これでも十分、ある程度のビューには対応できると思うけどな。

AutoLayoutに行き詰まってる人は参考にしてみてね

ひとつのビューが検証まで終わったら、

やるのが、

制約の割り付け

なので次回からそれも解説しながらやるかな。

TableViewも長いから記事分けるかもだけど💦

これが別に正解なんて

ゆー気もないので、

  • Objective-Cの神

  • もっと良いやり方を知ってる

方はどうぞご自由に！

ちらほら、

SwiftUIのことについても触れてるけど、
SwiftUIについてはそもそも、AutoLayoutって概念が作る上では意識しなくていい仕様になっていて、
構造体の中にHStackビュー、VStackビュー、ZStackビューの中にビューを組み込まないと複雑なビューが作れない仕様だから。
UIKitでもこれを知っておくと、すんなりSwiftUIにも入っていけると思う。

  • 今の業務はUIKitがメインだから関係ない

  • SwiftUIにはできることも少ないって聞いてるから関係ない

なんて思わずに、意識しておいてね〜〜〜〜
多分、今後SwiftUIがiOSとかMacの主要フレームワークになるのではないかと思われるので！
日本で出回ってるSwiftUIの情報が古すぎるだけなので〜〜〜〜！

ではでは、ホントに

💃よい3連休を🕺

追記

あ、そうそう
何でコードでやらずに画面で出来る操作は画面で
て言ってるか？

なんだけど、

今までやった何れかのビューに
例えば、何か部品が加わるとか、仕様が変わったとしたら、
画面だけなら、Clear Constraintsなんかでやり直すだけだけど、

コードだとコード修正以外に接続なりxibファイル自体を修正しないといけなくなるからねー！

お客さんなんて、わからないから開発依頼をしてくるわけで、要求がいきなり変わるなんて日常茶飯事だし。

開発の鉄則のひとつ、

変更可能性を意識して最初から開発しとく

ま、あんま偉そうなことはわからないけど！

いいなと思ったら応援しよう！