Instantly share code, notes, and snippets.
SatoTakeshiX/SwithcMenu.swift
Last active Jan 23, 2021
開閉式メニュー
// | |
// 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