はじめに
Swift UIは公表してからもう2年近くたちました。ネット上の情報量もけっこう増えたので、そろそろ本格に学習しないとと考えて本記事をはじめました。
初心者でも分かりやすいDesign Codeを使ってやっていきます。
・Swift UIの強み
1.自家製のリアクティブフレームワークCombine
2.最も時間がかかるUI設計はリアルタイムで確認できる
3.iOS・macOS・carOS(予想？), すべてネイティブに
目次
シミュレーター編集可能
・テキストを編集する際に、コードから編集する以外に、画面と右上にあるTextから編集することも可能です。
・画面デザインのルールについて、不明点があればHuman Interface Guidelinesを参考してください。
inspectorが便利
・シミュレーターをクリックし、cmd+dを押せば同じテキストは下にコピーできます。
・paddingはコードから直接削除する他に、右のinspectorの✖️も削除できます。
・テキストとテキストのpaddingを変更したい場合は、テキストに対してpaddingを足すことではなく、VStackから行うのがおすすめです。
・シミュレーターでVstackのエリアを選択し、backgroundをinspector（Add Modifier）から追加できます。（右上の＋ボタンからもできます）
・写真を追加した後に、resizableとaspectRatioを使って大きさを決めましょう。メリットとしてはVStackの大きさによって写真の大きさは動的に変わってきます。
複数のシミュレータを使う
・＋ボタンを押せば、今のシミュレータがコピーされます。
・darkモードに変更したら、textの色は白に変わりました。オリジナルの色では賢く変わってくれないので、できればデフォルトの色を使いましょう。Human Interface Guidelines
・シミュレーターごとをクリックし、layoutをFixedに変えます。layoutはwidth200とheight200としたら、四角に隙間が見えます。spacerを使って、containerを全部使うことになります。写真はsafe area以外を使いきります。
・写真に対してもspacerを追加したら完成です。
まとめ
・inspectorを使えば、どこに何を追加すべきかはわかりやすくなります。
・逆にinspectorはデザインのミスや漏れが起こりやすいデメリットもあります。
ソースコードGithub