この記事は？
SwiftUIを導入する話とそれを基に得た知見などをまとめていきます。
SwiftUIの発表から約3年が経ちそろそろSwiftUIを導入しなきゃな〜とお考えの皆さんの参考になったら幸いです！
HalfModal(ハーフモーダル) とは
一番有名なところではMapなどのUIで利用されているものだと思います
ハーフモーダル"（Half Modal）という用語は、一般的なUIデザインパターンの一つを指します。ハーフモーダルは、モーダル（ダイアログ）ウィンドウの一部が画面上部から表示され、背後のコンテンツと一部重なるような形式のモーダルです。
ハーフモーダルは、画面上部に一部表示されるため、背後のコンテンツが見え続けることができます。これにより、モーダルのコンテンツと背景のコンテンツの関連性が強調され、ユーザーに対話性と一貫性のある体験を提供します。
コード解説
今回はiOS 15以前とiOS 15以降の両方のモーダルスタイルを扱うHalfModalViewです。それぞれの部分を解説し、知見を共有します。
まず、iOS 15以降で使用されるハーフモーダルスタイルの実装は次の部分です：
.sheet(isPresented: $isModalPresented, content: {
VStack {
Spacer()
Text("Half Modal Content")
.font(.title)
.padding()
Spacer()
Button(action: {
isModalPresented.toggle()
}) {
Text("Close")
.font(.headline)
}
.padding()
}
.background(Color.white.opacity(0.5))
.edgesIgnoringSafeArea(.all)
.presentationDetents([.medium])
})
この部分では、sheet モディファイアを使用して、iOS 15以降でのハーフモーダルを表示しています。モーダルの内容は、テキストと閉じるボタンで構成されています。background モディファイアで背景色を設定し、edgesIgnoringSafeArea モディファイアで安全エリアを無視してモーダルをフルスクリーン表示します。さらに、presentationDetents メソッドを使用して、モーダルのプレゼンテーションを中サイズに制限しています。
次に、iOS 15以前のモーダルスタイルを扱うBeforeiOS15HalfModalViewの実装です：
if isBeforeiOS15ModalPresented {
Color.black.opacity(0.2)
.ignoresSafeArea()
.onTapGesture {
isBeforeiOS15ModalPresented.toggle()
}
VStack{
Spacer()
HStack(alignment: .bottom){
BeforeiOS15HalfModalView(isModalPresented: $isBeforeiOS15ModalPresented)
.frame(height: 400)
.cornerRadius(10)
.shadow(radius: 5)
.padding()
}.frame(maxWidth: .infinity)
.background(Color.white)
}
}
この部分では、iOS 15以前のハーフモーダルを表示しています。isBeforeiOS15ModalPresented の値が true の場合に、黒い半透明の背景と共にBeforeiOS15HalfModalViewが表示されます。BeforeiOS15HalfModalViewには、テキストと閉じるボタンが含まれています。背景やレイアウトをカスタマイズするために、適切なモディファイアを使用しています。
このコードを使用すると、iOS 15以降では新しいハーフモーダルスタイルが表示され、iOS 15以前では独自のハーフモーダルスタイルがこのコードは、iOS 15以前の環境でもハーフモーダルを実現する方法を示しています。このコードでは、ハーフモーダルの表示には、sheet を利用しています。加えて、presentationDetents メソッドを使って、モーダルビューをフルスクリーンではなく、特定の高さに表示するように設定しています。
また、iOS 15以前の環境では、ハーフモーダルを実現するために、GeometryReader や Spacer、padding モディファイアを使用する必要があります。そのため、isBeforeiOS15ModalPresented という状態変数を使用し、別のビューを表示することで、iOS 15以前の環境でもハーフモーダルを実現しています。
こちらに実際に利用したsampleコードを置いておきます！よかったら利用してください〜
Discussion