iOSで使用できるボタンスタイル
今回のアプリでは.borderedProminentを設定しましたが、iOSで使用できるボタンスタイルは他にもあります。
| ボタンスタイル | 説明 |
|---|---|
| automatic | 特定のスタイルを指定しない場合にデフォルトのスタイルが自動で選択されるボタンスタイル |
| bordered | 標準的なボタン枠のデザインを適用するスタイル |
| borderedProminent | 強調された外観のボタン枠を適用するスタイル |
| borderless | ボタン枠を適用しないシンプルなボタンスタイル |
| plain | スタイリングはせず、押下時やフォーカス時に視覚効果を追加するスタイル |
実際にそれぞれのボタンスタイルを設定し、見た目の違いを確認してみてください。
ボタンの枠に形状を適用する
ボタンスタイルが、borderedやborderedProminentのような枠付きのスタイルの場合には、buttonBorderShapeというモディファイアを使用して、SwiftUIが提供する形状に変更することができます。
次のように.buttonBorderShapeを追加してみてください。
Button(action: {
// ボタン押下時の処理
}, label: {
Text("愚痴る")
.font(.largeTitle)
})
.buttonStyle(.borderedProminent)
// ここを追加↓
.buttonBorderShape(.capsule)
ボタンの形状が変更され、カプセルのような形状になります。
ボタン枠の形状は色々
ボタン枠の形状は、他にもあります。その他のボタン枠の形状も試してみて、どのように変化するか確認してみてください。
| 名前 | 形状 |
|---|---|
| automatic | システムが自動的に適した形状を決定する |
| capsule | 丸みを帯びた長方形のカプセル形 |
| circle | 円形 |
| roundedRectangle | 丸みを帯びた長方形 |
| roundedRectangle（radius: CGFloat） | 任意の角丸半径を指定して作成する丸みを帯びた長方形 |
Viewに余白をつける
Viewに余白をつけるには、.paddingモディファイアを使用し、次のようにコードを変更してください。
Button(action: {
// ボタン押下時の処理
}, label: {
Text("愚痴る")
.font(.largeTitle)
// ここに追加↓
.padding()
})
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
愚痴るボタンの青い部分が広がりました。これはText("愚痴る")に余白がついたことでボタンのサイズ自体が大きくなったからです。
.padding()では上下左右の全ての方向に対して余白がつきますが、.paddingでは、Edgeという値を設定して、そのEdgeの指定する方向に余白をつけることもできます。
| Edge | 説明 |
|---|---|
| .top | 上方向 |
| .bottom | 下方向 |
| .leading | 左方向 |
| .trailing | 右方向 |
| .horizontal | 水平方向（左右） |
| .vertical | 垂直方向（上下） |
また、余白の大きさも指定することができます。次のようにコードを変更してどのように変化をするか確認してみましょう。
Button(action: {
// ボタン押下時の処理
}, label: {
Text("愚痴る")
.font(.largeTitle)
.padding()
})
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
// ここに追加↓
.padding(.top, 40)
今回は.paddingは.topで上方向に余白をつけており、その大きさは40となっています。実際にプレビューでの表示でも上部とボタンの間が広がっていることが確認できます。
前面に別の画面を表示する
それでは、実際に愚痴る画面を作っていきます。
今回は、前面に別の画面を表示する方法として.sheetモディファイアを使用します。この.sheetモディファイアを使用することで、画面全体が上からスライドして表示されるモーダル遷移を実現することができます。
.sheetモディファイアにも、さまざまな値を設定できる形式のものがありますが、今回は次の形式のものを使用します。
.sheet(isPresented: , onDismiss:, content: )
-
isPresentedには、このsheetが表示されたかどうかのBool値を渡します -
onDismissには、
sheetで表示した画面が閉じた時に実行した処理を記述します -
contentには表示したいViewを渡します
実際にコードを変更して動きを確認してみましょう。sheet表示は、愚痴るボタンを押すことで表示できるように、コードを次のように変更します。
struct ComplaintView: View {
// ここに追加↓
@State private var isPresented = false
var body: some View {
VStack {
HStack(spacing: 16) {
Text("Good")
Text("Chill")
.foregroundStyle(.yellow)
}
.font(.system(size: 56))
.fontWeight(.black)
.foregroundStyle(.red)
Button(action: {
// ここに変更↓
isPresented = true
}, label: {
Text("愚痴る")
.font(.largeTitle)
.padding()
})
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
.padding(.top, 40)
}
// ここに追加↓
.sheet(isPresented: $isPresented, onDismiss: {
// 画面を閉じた時に実行する処理
}, content: {
Text("愚痴る画面")
.font(.largeTitle)
})
}
}
変更した箇所は3箇所です。
-
sheetを表示したかどうかを管理するための@State変数のisPresentedを追加 -
愚痴るボタンを押した時に
isPresentedにtrueを代入 -
.sheetモディファイアの追加
.sheetモディファイアで見慣れない$が使われていますが、これはバインディングといってSwiftUIのUI要素との双方向のデータのやり取りを示すものになります。isPresentedがtrueになると、別の画面が表示されますが、表示された画面を下にスワイプして閉じると表示されていた画面が閉じます。これはSwiftUI側でisPresentedの値をfalseに切り替えていることで実現できています。
プレビューで愚痴るボタンを押すと、愚痴る画面という文字が表示された別の画面が前面に表示されることを確認できます。
