Swiftにてレイアウトの設定をどこにするか明確にしたい

Question

前提・実現したいこと

現在Swiftの勉強をしているのですが、レイアウトの設定をどこにどう記述するか曖昧になっています。
レイアウトの設定方法は様々あると思うので、同じ物は作成できるのですが、可読性・保守性を考慮した適切な書き方を知りたいです。

発生している問題

例）アプリタイトルの右上に●マークがあった場合
●マークやユーザー名の下線等はどこに記述するのが適切でしょうか？

試したこと

1.　Storyboard上にViewを直接配置する（Autolayoutで位置調整）
->　画面サイズが変わった際に計算できない?

2.　ViewController内にViewクラスを生成し、addSubViewを用いて配置する
-> ViewController内のコード量が多くなってしまう?

3.　カスタムクラスを作成し、反映する
-> ファイル数が膨大になる?

補足情報（FW/ツールのバージョンなど）

Swift 5.3
Xcode 12.0.1

Answer 1

アプリタイトルの右上に●マーク

●マークの意味 (ロゴ？ 通知のバッヂ？) にもよりますが、Storyboard 上の AutoLayout で解決できるのでは。

1. アプリタイトルの UILabel を中央揃えにして、縦位置も決めます。
2. 画面サイズや、アプリタイトルの長さがローカライズで変わったときに備えて、画面の左右どちらかの端からの幅を制約します。このとき、Relation を Equal ではなく Greater Than or Equal にするとアプリタイトルが短い時はそのままで、長くなったら幅が制限されます。
3. アプリタイトルの UILabel の Autoshrink を設定すると、アプリタイトルが長くなったときに後ろが ... で省略される代わりにフォントが小さくなります。
4. ●マークの左下 (Leading と Bottom) とアプリタイトルの右上 (Trailing と Top) を制約します。

ユーザー名の下線

再利用を考えて UITextField のサブクラスにするのがいいと思います。extension だと ViewController にコードを書く必要があるのが嫌ですね。ファイル数は増えますが、フォルダ構成を工夫すればそんなに問題にはならないのでは。

参考: UITextFieldに下線を引く（縦向き、横向き切替対応） - Qiita (draw で毎回 addSublayer するのはどうかと思いますが…)
参考: iOS UITextField Underline Style in swift - Stack Overflow

Comments

[Atsushi_Kygo]

回答ありがとうございます！
複数利用する可能性がある場合はサブクラス化し、一度しか使わないようなレイアウトの場合はAutolayoutで実装する、という認識でよろしいでしょうか？

また、Autolayoutで指定する場合、タイトルラベルから10px離す様に設定すると、画面サイズが変わった際も10pxとなってレイアウトが崩れないか不安なのですが、制約は絶対値で指定してよろしいのでしょうか？（フォントサイズも絶対値で設定するので、その部分も気になります）

[hoshi-takanori]

> 複数利用する可能性がある場合はサブクラス化し、
はい。(単純に何回利用するからというだけですべてが決まるとは思いませんが、同じものを複数利用するのであればコンポーネント化すべき理由にはなります。)

> 一度しか使わないようなレイアウトの場合はAutolayoutで実装する、という認識でよろしいでしょうか？
AutoLayout で実装できるものは AutoLayout で対応するのがいいのではないかと思いますが、実装できない場合もあり、その場合はコードを書いてレイアウトする必要があります。

> 制約は絶対値で指定してよろしいのでしょうか？
それを決めるのは私ではなく、あなたが作るアプリをデザインする人になります。決めるときの判断基準は、●マークの意図や、異なる画面サイズに対してどういうデザインにしたいかによると思います。例えば、文字尾の大きさが小さくなったら、それに合わせてマージンや●マークの大きさも変えたい、ということであれば AutoLayout では対応できません。

私の回答は、あくまで質問文を読んだ限りではこうするのがいいのではないかという一案に過ぎません。実際には、デザインの意図や、将来的な変更の可能性やその方向性などをデザイナーさんと話し合って決めることになります。

[Atsushi_Kygo]

なるほど、細かい設定は状況によって変わるという事なんですね。非常に勉強になります！
分かりやすい説明ありがとうございました！