[iOS][SwiftUI] Custom SideMenu 간단하게 만들기

안녕하세요. iOSangBong입니다. 

오늘은 SwiftUI에서 사용가능한 커스텀 사이드메뉴를 만들어보겠습니다.

 

저번에 만들었던 커스텀 하단시트와 동일한 방식으로 만들면 

아주 쉽게 만들 수 있습니다.

https://iosangbong.tistory.com/14

[iOS][SwiftUI] Custom 하단시트 간단하게 만들기

커스텀 하단시트도 한번 구경해주세요~

 

간단히 미리 살펴보자면 이렇게 됩니다.

 

자 이제 만들어 보겠습니다.

1. 사이드메뉴 만들기

일단 사이드메뉴 클래스를 만들어줍니다. 

 

사이드메뉴를 열고 닫기위해 isPresented 로 바인딩해주고

사이드 메뉴의 View 길이를 지정해줍니다.

그리고 사이드메뉴에 들어간 View를 Content로 받아줍니다.

 

그리고 드래그제스쳐와 SafeArea를 선언해줬습니다.

 

이제 View를 구성해보겠습니다.

HStack을 이용해 오른쪽 부분에 Content를 보여주도록 화면들 구성했습니다.

그리고 미리 선언해준 translation으로 x offset값을 조절해주는 로직을 구성했습니다.

 

2. 사이드메뉴 사용하기

이제 바로 사용해보도록 하겠습니다. 

ZStack을 이용해서 사이드메뉴의 배경 및 사이드메뉴가 나타나도록 구성했습니다.

 

edgesIgnoringSafeArea는 프로젝트에 따라 조절해주며

중요한건 animation처리를 자연스럽게 우측에서 좌측으로 움직이면서

사이드메뉴가 생성됩니다.

 

3. 결과

그 결과로 매우 자연스럽게 화면이 나오는걸 볼 수 있습니다.

 

이걸 프로젝트에 잘 활용해보세요~!

 

참고는 깃허브를 참고해주세요~

https://github.com/bongbong9708/BongStorage

GitHub - bongbong9708/BongStorage

다들 즐코딩하세요. 그럼 이만~