この記事は ZOZO Advent Calendar 2022 カレンダーVol.6の18日目の記事です。
はじめに
今年のWWDCでもSwiftUIのアップデートがあり、SwiftUIは年々使いやすくなっている印象です。
SwiftUIが発表されてから3年ぐらい経ちますが、ちょっとしたサンプル実装ぐらいでしか触れてきませんでした。
他社の採用事例も増えてきており、流石に無視出来なくなってきているのでとてもマイペースではありますが、Apple MusicのUIをSwiftUIで実装してみています。
実装はまだ一部ですが、個人的なメモを残しているのでそれを公開したいと思います。
環境
Xcode 14.1
iOS 16+
メモ
modifierの順序は大事
Viewはstructだから。
例えばボーダー込みで角丸にしたい時。border → cornerRadiusの順序。
Rectangle()
.aspectRatio(1, contentMode: .fill)
.foregroundColor(.pink)
.border(.gray, width: 0.5)
.cornerRadius(8)
逆だとborderが角丸にならない。
Rectangle()
.aspectRatio(1, contentMode: .fill)
.foregroundColor(.pink)
.cornerRadius(8)
.border(.gray, width: 0.5)
GeometryReader
コンテンツの位置とサイズを取得できるので、端末サイズの比率でViewのサイズを指定したいときに使える。
GeometryReader { proxy in
LazyVStack(spacing: 0) {
...
}
.frame(width: proxy.size.width * 0.7)
}
ScrollViewのcontentInsets指定
配下のViewにpaddingを指定する。
ScrollView(.horizontal, showsIndicators: false) {
LazyHStack(spacing: 12) {
...
}
.padding(.horizontal, 20)
}
@ViewBuilder 属性を使ってViewを返す
条件によって返すViewを変えたい時などに使える。
@ViewBuilder
private func section(with section: State.Section, screenWidth: CGFloat) -> some View {
switch section {
case let .topPicks(state):
MediumPortraitRectangleHGridSection(
state: state,
frameWidth: screenWidth,
paddingHorizontal: paddingHorizontal
)
トップレベル（View階層の）のVStackのspacingは0にするのが良さそう
階層が深くなると思わぬところにspacingが効いてしまうことがあった。
var body: some View {
VStack(spacing: 0) {
HStack(alignment: .center, spacing: 20) {
VStack(alignment: .leading, spacing: 4) {
HStack(spacing: 2) {
Image(systemName: "applelogo")
Text(state.headline)
.bold()
}
Text(state.subheadline)
.foregroundColor(.gray)
}
想定通り組めるなら余計なSpacerやpaddingが減るので使ったほうがいい。
Viewを重ねるときはZStackを使う
ZStack(alignment: .leading) {
Rectangle()
.background(Color.black)
.opacity(0.2)
HStack(alignment: .center, spacing: 14) {
VStack(alignment: .leading, spacing: 4) {
Group {
HStack(spacing: 0) {
Text("LIVE")
Text("・")
Text(state.timetable)
}
.font(.caption)
Text(state.title)
.lineLimit(1)
.bold()
Text(state.caption)
.lineLimit(nil)
.layoutPriority(1)
}
.font(.system(size: 15))
.foregroundColor(.white)
}
Spacer()
Image(systemName: "play.circle.fill")
.resizable()
.scaledToFit()
.foregroundColor(.white)
.frame(width: 40)
.opacity(0.8)
}
.padding(.horizontal, 20)
}
異なるViewに同じmodifierを適応させたい場合はGroupが使える
Group {
Text("1")
Text("2")
}
.foregroundColor(.white)
.multilineTextAlignment(.center)
レイアウトを優先させたいViewにはlayoutPriorityを使う
例えばテキストが長くなった時、上のテキストを優先させたいなど。
Text("長い文字列")
.layoutPriority(1)
Text("長い文字列")
テキストが短いときは上詰め、長いときは一杯にしたいとき Spacer(minLength: 0) を使う
VStack(alignment: .leading) {
Text("長い文字列")
// minLength指定がないとSpacerの分、文字が広がらない
Spacer(minLength: 0)
}
テキストの複数行は .lineLimit(nil) を使う
Text(state.caption)
.lineLimit(nil)
ライトグレーを使う
// UIColorを使う
Color(uiColor: .lightGray)
// systemGrayを使う
Color(.systemGray6)
ForEachでoffsetを使用する方法
ForEach(Array(array.enumerated()), id: \.element) { offset, element in
previewDevice
プレビューの端末指定ができる。（複数可）
struct BrowseView_Previews: PreviewProvider {
static var previews: some View {
BrowseView()
.previewDevice(PreviewDevice(rawValue: "iPhone 14 Pro"))
.previewDisplayName("iPhone 14 Pro")
}
}
次のコマンドをターミナルで実行すると使用できる端末一覧が取得できる
xcrun simctl list devicetypes
LazyVStack内でListは使えない？
深ぼってないので深ぼる。
ScrollViewでページングができない
UIScrollViewに存在した isPagingEnabled と同等のものがない
Xcode 14からSFSymbolが検索できるようになって便利
所感
まだベストプラクティスがわからずこれでいいのかな？と悩むことも多い。大体VStack, HStackで組めてしまうので他のレイアウトを適材適所で使えるようになりたい。
おわりに
個人的メモなので整理されてなく、雑メモですみません。（メモにキャプチャはないので頑張って貼りました）
まだ初歩的なところですが今後もSwiftUIと触れ合う時間を作って仲良くなっていこうと思います。