![見出し画像](https://assets.st-note.com/production/uploads/images/95073377/rectangle_large_type_2_8c75a89a42714e0424dea3f1bb87f716.png?width=1200)
【徒然iOS】気ままにUIKit19〜StackViewを使って黄色警告を消そう〜
概要
このマガジンは四十を過ぎたおっさんが、
を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。
今回
をやる〜〜〜
全部をスクショしていくと果てしなく長くなりそうだから要点でタイプに分けてやっていくます〜〜〜!
ここも考え方とか詳細なやり方は、リンク先の記事を読んでね〜〜〜
(果てしなく長くなるので)
ポイント
Vertical Stack View(以下、VStackView) : 縦にパーツを格納
Horizontal Stack View(以下、HStackView) : 横のパーツを格納
組み合わせて使うこともOK!
👉結果的に、制約の数を減らせる
前準備
今回は、今まで作ったビューを直していくだけなので
念の為、バックアップ
だけをいつも通りやってから本題へ💃
![](https://assets.st-note.com/img/1673064901565-0oHsZUXOjg.png?width=1200)
本題
⒈まずは、Vertical Stack Viewからやって、Stackのイメージを
素材にするビューはこれな〜〜〜〜
![](https://assets.st-note.com/img/1673065082559-iFWL4RvWPq.png?width=1200)
![](https://assets.st-note.com/img/1673065183377-JIpDYhfGiV.png?width=1200)
![](https://assets.st-note.com/img/1673065203331-OPrTMps8lb.png?width=1200)
![](https://assets.st-note.com/img/1673065233446-yBDvh2lQJR.png?width=1200)
全部のパーツを縦に並べるだけだから、、、
![](https://assets.st-note.com/img/1673065305773-IoxMwpw8ry.png?width=1200)
![](https://assets.st-note.com/img/1673065335040-MWvV4notRv.png?width=1200)
すでにこの時点で、黄色警告エラー数が 67 → 58に変わってる
![](https://assets.st-note.com/img/1673065415879-4sKEBy1lX7.png?width=1200)
![](https://assets.st-note.com/img/1673065465441-I2MeR33Unm.png?width=1200)
![](https://assets.st-note.com/img/1673065526674-s9PiVgGErX.png?width=1200)
![](https://assets.st-note.com/img/1673065568117-mRAGUfStnL.png?width=1200)
![](https://assets.st-note.com/img/1673065663402-RWMSMyCHxt.png?width=1200)
操作しながらだとわかると思うけど、こんなにあっさり終わります
![](https://assets.st-note.com/img/1673065781402-YsrjTH6DWs.png?width=1200)
![](https://assets.st-note.com/img/1673066091267-9cIoVImRfb.png?width=1200)
て感じでVStackViewを追加して直しただんけど、
すでにエラーが58→41まで減った!!!!
![](https://assets.st-note.com/img/1673066215267-mBvXhQrEGo.png)
次はこのビューなんだけど、、、、
縦に並んだ部品と横に並んだ部品があるから、
HStackViewを使ってやっていく
⒉HStackViewビューとVStackViewビューを組み合わせて使う
ポイント
組み合わせの場合は、
①HStackViewからやって、
②VStackViewでやる
と簡単
![](https://assets.st-note.com/img/1673066455308-IpoziTZTag.png?width=1200)
![](https://assets.st-note.com/img/1673066486810-atygmD51VZ.png?width=1200)
![](https://assets.st-note.com/img/1673066561794-kzrY02GwLk.png?width=1200)
![](https://assets.st-note.com/img/1673066642680-8sZA7OokQf.png?width=1200)
![](https://assets.st-note.com/img/1673066676795-GiEiKFq5QX.png?width=1200)
![](https://assets.st-note.com/img/1673066699957-duGrF9K2tk.png?width=1200)
おかしなところがあれば調整して、
![](https://assets.st-note.com/img/1673066772980-80voYHjgne.png?width=1200)
![](https://assets.st-note.com/img/1673066842372-9a6TMfrHqB.png?width=1200)
![](https://assets.st-note.com/img/1673066909871-pF0JnSqkBL.png?width=1200)
![](https://assets.st-note.com/img/1673066928588-7fnrx5KiUc.png?width=1200)
すでに、41 → 38にエラーが減った
![](https://assets.st-note.com/img/1673067088150-ljWexSUZ7H.png?width=1200)
![](https://assets.st-note.com/img/1673067606083-JAS9oiHqRg.png?width=1200)
![](https://assets.st-note.com/img/1673067838087-XZw0wAhBPz.png?width=1200)
![](https://assets.st-note.com/img/1673067900606-ckcFVvBQBc.png)
実はリンクの記事の説明だけだと、気づかないかもしれない
これは
⒊VStackViewの中にVStackViewを組み合わせるでさらに対応できるパターン
同様に、まずは下の段の1 5 10 をHStackViewからやって、アニメーションありラベルとVStackViewで結合
![](https://assets.st-note.com/img/1673068111954-qgVbiZJe2S.png)
![](https://assets.st-note.com/img/1673068153466-NP4aUYMh08.png?width=1200)
同様に上の段も〜〜〜〜
![](https://assets.st-note.com/img/1673068307104-VSksdKV2qD.png?width=1200)
ついでに、HStackViewで実行ボタンのところもやる〜〜〜
![](https://assets.st-note.com/img/1673068408688-4mFwLkvHdt.png?width=1200)
ここで、VStackViewに一気に嵌め込む前に
さっきのアニメーションなし/ありのVStackViewの幅を調整して、制約を付けとく =今回は幅は360,高さは177くらいにしとく
![](https://assets.st-note.com/img/1673068579936-jk6jczuVjT.png?width=1200)
で、VStackViewを追加して、すべてのパーツを格納してく〜〜〜
![](https://assets.st-note.com/img/1673068733740-t4ISUWF3BV.png?width=1200)
![](https://assets.st-note.com/img/1673068771574-oh7K9KkhOl.png?width=1200)
まだ、赤になっているので、コンフリクトを解消する
![](https://assets.st-note.com/img/1673068835542-r0pEutoX5K.png?width=1200)
![](https://assets.st-note.com/img/1673068873066-VuY3zXpCtg.png?width=1200)
すでに黄色警告のエラーが 67→20まで減った〜〜〜〜!
以下の画面
![](https://assets.st-note.com/img/1673068948714-ixzgvh3jXT.png?width=1200)
は同様に、今までに紹介したやり方でエラーを消していく
![](https://assets.st-note.com/img/1673069555617-hlKPMJSM7w.png?width=1200)
すでに、13個までエラーが潰せてる👀
![](https://assets.st-note.com/img/1673069773215-ZKYto6VMu0.png?width=1200)
エントリーポイントについては、、、
なんかでやればすぐに解消できるので〜〜〜〜🕺
実は、他にも
横に傾けたときにレイアウト変更したい👉size class制御
や、
横に傾けて隠れてる箇所を操作したい👉scroll view
などなど、色々あるけど、今回の目的はあくまで、
黄色警告解消
なんで。世の中が休日に、ビール片手に暇だから書いたまで🕺
まとめ
VerticalStackViewとHorizontalStackViewとその組み合わせ方法について簡単な使い方を説明したけど、これを使えば、
ビューのデザインに相当なこだわりがない限り8割くらいはまずエラーが解消できる。
気になるエラーが他にコンフリクトなんかで出てくる時は、そこで、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ファイル自体を修正しないといけなくなるからねー!
お客さんなんて、わからないから開発依頼をしてくるわけで、要求がいきなり変わるなんて日常茶飯事だし。
開発の鉄則のひとつ、
変更可能性を意識して最初から開発しとく
ま、あんま偉そうなことはわからないけど!