[Swift-TIL] 여러 화면 이동하기 (1편)

여러화면을 그려서

이어붙여보는걸 배워봤다.

 

이 글에서는

그중 여러 화면을 이동하는걸

써보고자 한다.

 

View는 하나의 화면이라는건

스위프트를 배우면서 가장

기초적인 지식이다.

 

그래서

스위프트UI파일을 만들면

하나의 뷰를 만들면

그게 하나의 화면이 된다.

 

그리고 해야할 건

여러개의 화면을 이동하는

그 방법을 알아두어야 한다.

 

일상생활에서

한번 떠올려 본다면

어떤게 있을까?

 

화면을 이동하는것

누구나 한번쯤은 경험을

해본적이 있을꺼다.

 

로그인이나 댓글은?

이런것들은 화면이동을

어떻게 했는지 생각해보자.

 

어제나 같은 방법으로 구형되지 않지만,

규칙이나 이런것들은 될 수 있지만,

반드시 이렇게 해야하만 한다는 법은

아니기에 앱마다 다르게

구현이 되어 있을 수는 있다는 것이다.

 

로그인 댓글중에

밑에서 화면이 하나 올라와서

입력을 하고 나서 확인을 누르면

사라지는 화면

대충 요런 화면이다.

 

앱을 사용하다보면 로그인이 필요한

그 순간이 되면 밑에서

올라와 로그인 해달라며

로그인 버튼을 누르고 완료를 하면

화면이 내려가면서

로그인이 완료된 화면으로

이동이 된다던가

 

댓글 버튼을 누르거나 해서

밑에서 슬라이드 형식으로 등장해서

대표적으로는 유투브가 있죠?

댓글을 누르면 밑에서 새로운 창이

띄워져서 거기서 댓글을 달 수 있는

뭐 그런 화면

 

그게 이러한 모달에 특징인 것이다.

 

어떠한 흐름을 진행하다가

중간에 필요한 것들이 있으면

밑에서 창이 새로이 올라온 다음에

제자리로 돌아가는

이게 화면의 전환이다.

 

흐름이 있다가 그 흐름을 잠깐 방해하는

이런걸 한번 만들어 볼 예정이다.

이 화면에 하위 페이지의 정보가 있다면

어떻게 해야하는 걸까?

 

네비게이션이 필요하다.

 

어디로 가야 할지..

그리고 가서 무엇이 있는지를

알려주는 녀석이 필요한거다.

 

지금 설정 페이지는

정말 단순한 UI를 가지고 있는데,

이것 말고도 이커머스에서

상품을 검색하면 쭉 리스트가 나오고

그러한 리스트는 항상

하위 페이지를 가지고 있다는 것이다.

 

중고 거래 플랫폼도

메신저도 동일하다.

 

여러 종류의 화면을 이동해야한다면

어떻게 해야하는가?

 

이런 화면이 있다고 하자.

바로 눈에 보이지 않나?

 

여러 종류의 화면을

이동해야한다면

탭뷰를 이용해야하는데,

화면의 아랫쪽에 투데이, 게임, 앱

이런것들을 말하는거다

 

이런식으로 각각의 다른 종류의

다른 카테고리의 화면들이

있을때에는 탭 뷰를 이용해서

이동을 해야 하는 것이다.

 

또 무엇이 있을까 생각해보면

너무 많아서 다 나열하기도 어렵다..

기본적으로 온보딩 화면 이동도

마찬가지다.

---

새로운 폴더와 파일을 만들어줬다.

일단은 모달부터 해보려고 한다.

 

V스택을 만들어서

텍스트 하나를 넣어봤다.

음.. 그리고 버튼을 만들어주겠다.

이렇게 하고

모달 화면 전환 버튼을

눌렀을 때 화면이 전환 되기를

기대한다.

 

여기서부터 심플한데

sheet 라는게 있고,

isPresented 라는것이 있는데

Binding<Bool>

바인딩 변수가 필요하다.

 

그리고 이름에서 좀 더 직관적으로

알 수 있는데

"isPresented" "이 모델이

보여져야 하는가?" 가 바인딩 된 값이다.

 

그래서 바인딩을 만들기 위해서

"State" 변수로 "showModal"

타입은 "Bool" 일단은 false로 두겠다.

이렇게 하면 자연스럽게

"isPresented"는 "$showModal"

이렇게 들어가게 된다.

컨텐츠의 경우는 모달 페이지이다.

일단은 텍스트를 넣어두겠다.

일단은 이렇게 하겠다.

 

그리고 버튼이 중요한데,

실험을 한번 해보겠다.

showModal = true

버튼을 누르면 showModal이

true가 되는거다.

오... 버튼을 눌렀더니

모달이 띄워졌다.

다시 내리면 내려간다.

 

그런데 true가 아니라 그냥

toggle로 하면?

이것도 된다.

음 별반 차이가 없는데..?

 

재밌는걸 보여준다면,

true의 경우 showModal에

true가 들어간거고

그러면 눌렀을 때 showModal은

true인거고 다시 닫고

다시 버튼을 눌러도 true 이다.

 

true면 보이는것(State)인데,

버튼을 누를 때마다 true로 바뀐다.

 

그러면 toggle 얘는 false면 true로,

true면 false로 바꿔주는 녀석인데도

눌렀을 때마다 정확하게 잘 보인다..

 

그러면 어떻게 이해해야하는가?

얘가 사라질 때

"showModal" 이게 false로 바뀌는건가?

아니면,

얘가 사라질 때

"이 값으로 다시 셋팅이 되는건가?"

라는 가설을 세울 수 있는데,

요건 좀더 공부하면서 알아 보겠다.