Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
開閉式メニュー
//
// ContentView.swift
// MenuSample
//
// Created by satoutakeshi on 2020/12/21.
//
import SwiftUI
struct ContentView: View {
@State var isShowMenu = false
var body: some View {
GeometryReader { geometry in
ZStack {
Button(action: {
withAnimation {
isShowMenu.toggle()
}
}, label: {
Text("show menu")
})
.frame(width: UIScreen.main.bounds.width)
MenuViewWithinSafeArea(isShowMenu: $isShowMenu,
bottomSafeAreaInsets: geometry.safeAreaInsets.bottom)
.ignoresSafeArea(edges: .bottom)
}
}
}
}
struct MenuView: View {
@Binding var isShowMenu: Bool
var body: some View {
VStack {
Spacer()
HStack {
Spacer()
Button(action: {
withAnimation {
isShowMenu = false
}
}, label: {
Image(systemName: "checkmark")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 20, height: 20)
.padding()
})
}
.background(Color.black.opacity(0.8))
.foregroundColor(.white)
.offset(x: 0, y: isShowMenu ? 0 : 300)
}
}
}
struct MenuViewWithinSafeArea: View {
@Binding var isShowMenu: Bool
let bottomSafeAreaInsets: CGFloat
var body: some View {
GeometryReader { geometry in
VStack(spacing: 0) {
Spacer()
HStack {
Spacer()
Button(action: {
withAnimation {
isShowMenu = false
}
}, label: {
Image(systemName: "checkmark")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 20, height: 20)
.padding()
})
}
.background(Color.black.opacity(0.8))
.foregroundColor(.white)
.offset(x: 0, y: isShowMenu ? 0 : geometry.size.height)
// safe area外のコンテンツ
Rectangle()
.foregroundColor(Color.red.opacity(0.8))
.frame(height: bottomSafeAreaInsets)
.edgesIgnoringSafeArea(.bottom)
.offset(x: 0, y: isShowMenu ? 0 : geometry.size.height)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment