見出し画像

【徒然iOS】気ままにUIKit15〜AutoLayout導入編　AutoLayoutとは〜

M_Kaku堂

概要

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

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

今回

をやる〜〜〜！

お断り

で一日悩んだんだけど、まとめて一気にやると

  • 果てしなく長くなりそう

  • 1個ずつきちんとやった方が初めての人にはいい

と思ったので、記事の順番でゆっくり記事にしていく〜〜〜

なぜか

勘のいい人は気づいてると思うけど、
今までのビューは、
AutoLayoutを施していないから、

画面上部


右側の黄色三角のエラー

画面左部

画面左に黄色三角

で既に60個ものエラーが軽微なエラー
が出てる👀

これ、公開申請をする前に、、、

作法としてエラー警告は色に関わらず消す

のが普通だから、実際にやったことがないからAppleがこのまま出して道断するかは分からないけど、
これだけで

公開拒否＝リジェクト

を喰らう可能性が高い。なので、

動けばいい。
👉で、AutoLayoutを疎かにすると、公開まで最終的に考えているならば
痛い目を見ることになる
（個人的には、AutoLayoutを沼と読んでた時期もあったな）

なので、

でスクリーンショットだけ載せてたAmachaClipsは、プロジェクトファイルを見せると、

AutoLayout対策をしっかりやってるから、一切、黄色と赤の警告エラーが出てないようにしてる🕺

つまり、

UIKitでのiOSアプリ開発では、AutoLayoutが最大の肝になると言っても過言ではないくらい重要👀

SwiftUIでは、

  • VStack、HStack、ZStackなんかでStackて概念でビューを作り上げる

  • Xibファイルとの連携って概念がない

👉AutoLayoutを気にしなくいい
ようになっているので、あまり気にすることはなくなってるんだけどね。

それでも、

画面を縦向き、横向きにした時にレイアウトを変えたい場合が出てくるので、SizeClassで使い分けはしないといけない場合も出てくるけど、
コードベースでビューを作っていけるから、非常に簡単にレイアウトの使い分けができたりする。

と、まあ話が長くなったけど、いざ今回の操作へ、、、💦

前準備

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

  2. 新しいクラス

  3. ビューコントローラの追加

  4. イニシャルビューの変更

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

こんな感じ

本題

⒈ボタンを配置

縦横の中央に配置した

⒉シミュレータを実行して、ローテートを変更してみる

縦
横、、、iPhone14 proだとButtonが消えてしまう💦

ま、これはサイズクラスでRegularとCompactの違いがあるから当たり前ちゃあ当たり前な話なんだけど、、、💦

⒊Interface Builder Documentを確認

今の環境だとデフォルト（初期設定）でチェックは入っているみたいだね👀

⒋AutLayoutの制約を追加

記事どおりに設定すると
こんな感じで制約が追加された

⒌　⒉を再実行して確認

縦は元から問題なし
横も表示できた〜〜〜〜🕺

⒍追加した制約を確認

まず、制約確認できるエリアが表示されていない可能性があるから
表示する方法ね
左下の一番左のマークをクリック

ここの
コイツ
Button直下に、制約＝Constraintsが表示されてる

⒎Confrict＝制約の衝突を解決するように追加してみる

記事どおりに追加〜〜〜
発生したので赤くなった〜〜〜
ここの〜〜〜
ここをクリック〜〜〜
コンフリクトしてる候補が出てくるので〜〜〜
こいつをクリック〜〜〜
下にチェックを入れて、Delete Constraintsをクリックすると
コンフリクトが解消できて、赤が消えた🕺

⒏部品を制約の位置に移動する

ボタンを移動すると〜〜〜オレンジが今度は出てきた〜〜〜〜
右下のコイツをクリックして〜〜〜
上から２番目をクリックすると〜〜〜
制約が更新できた🕺

⒐以降は少し、今の表示と違うことが多いので、

制約の一部追加方法をちょっと一例だけ

ボタンの幅と高さを両方100に変更したくなったとして

コイツをクリック
みたいな感じで〜〜〜追加すると、、、
てな感じで、制約は追加できたけど、
コイツが出てきた
中身はこんな感じ
コイツをクリック〜〜〜
上から二番目を選択して、Confirmをクリック〜〜〜
修正できた〜〜〜

ただし、シミュレータで確認してみると、、、

縦はいいけど
横は制約自体が画面サイズからはみ出てるから出るわけないんだよね〜〜〜

まとめ

と、まあ今回は記事に従ってここまで。
今回は導入編なので

AutoLayoutどんなものか

をイメージしてもらえれば充分

参考書籍としては、

なんかがある。
読みたい人は自由だし、5年以上前にやってたけど、個人的には、

  • 既にXcodeの操作画面も古くなっている

  • Objective-C関係の知識を俺はこんなに知ってるんだ！って感じでObjective-C関係の知識をふんだんに盛り込んでる

  • 純粋なSwiftの知識だけでできないことばかり書いてる

印象なので、正直お勧めしないし、読んで操作しても混乱するか学習コストを嵩上げするだけ

沼を底なし沼に自分でする

だと思う。

よりは、

自分でビューを作ってみて、AutoLayoutの制約をゆっくり最新の環境でやった方が近道。

UIKitのiOSアプリ開発で

AutoLayoutも含めてだけど、画面上での操作でできることをわざわざコードで、あんまりやらない方がいい。

技術力アピールしたい自称プログラマさんとかでさっき紹介した本とかで最初からObjective-Cのコードでやろうとする人も昔は多かったけど、

  • ビューを変更したいときに、柔軟性がなくなる

  • 簡単なことをあえて難しくするのは、Appleがあまり推奨してない

から、やらない方がいいかなと、、、。

「コードイズ技術力」でアピール

したくて、他に無理にUIKitでやらないといけない事情がないんだったら、

最初からSwiftUIでやれよ！！！！

てだけの話。

さてと次回は

複数部品ですな。

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