[SwiftUI] ZStack 실전 예제들

ZStack은 Stack안에 있는 자식 뷰들을 z축으로 중첩시켜주는 view 입니다.

 

 

실제 쓰이는 경우들을 알게 되어서 정리합니다-! 

 

[1] 카메라와 컨트롤

 

이런 카메라 앱을 만든다고 할때,

카메라뷰랑 컨트롤 버튼들(파란네모친 영역)를 zstack을 이용하여 동시에 띄울 수 있습니다.

 

 

	struct ContentView: View {
	var body: some View {
	let cameraView = CameraView()
	return ZStack {
	cameraView
	.edgesIgnoringSafeArea(.all)
	.scaledToFill()
	ControlView(cameraView: cameraView)
	}
	}
	}

view raw zstack.swift hosted with ❤ by GitHub

 

 

더불어 컨트롤뷰의 HStack(갤러리 열기, 촬영, 필터 버튼들이 있음)를 bottom에서부터 height 200으로 위치잡아주고 싶다면 

Spacer를 활용할수있습니다. (신기)

 

 

	struct ControlView: View {
	...
	var body: some View {
	...
	return VStack {
	Spacer()
	HStack(alignment: .center, spacing: 30) {
	Button(action: {
	self.showImagePicker = true
	}, label: {
	Text("open gallery")
	}).sheet(isPresented: $showImagePicker, content: {
	imagePicker
	})
	Button(action: {
	self.cameraView.takePhoto()
	}, label: {
	Circle()
	.frame(width: 100, height: 100)
	.foregroundColor(.white)
	})
	Button(action: {
	print("현재 카메라의 필터를 바꾸기")
	}, label: {
	Text("필터버튼")
	})
	}.frame(height: 200)
	}
	}
	}

view raw ControlView.swift hosted with ❤ by GitHub

 

 

 

 

[2] SwiftUI의 Fullscreen Modal을 띄울때 

 

SwiftUI에서는 현재 fullscreen 모달을 띄울 수 있는 설정이 없습니다..😭

 

그래서 zstack을 활용해서 fullscreen presentation을 한 것 처럼 보이게 하시더라구요...!! 

 

forums.developer.apple.com/thread/127839

SwiftUI:how to get the secondView showed in ful... |Apple Developer Forums

 

www.youtube.com/watch?v=514A7yzznJE

 

 

⚠️ 참고 ⚠️

저는 iOS13일때 이 글을 쓴건데, 

iOS 14부터 fullScreenCover(isPresented:onDismiss:content:)  를 사용하시면 됩니다!!