들어가기 앞서!! => 밑에 적힌 모든 코드를 하나하나 다 이해할 필요 절대 없읍니다!! 그냥 아 이런 흐름이구나만 알고, 다음에 이거 만들 때 여깄는 거 긁어와야징 하는 마음으로 편하게 보시면 돼용띠한가온.
파일을 만들 때
내가 만드는 파일이 화면을 꾸미는 것이다!! 화면에 뭔가를 배치해야되고, 실제로 내 눈에 보이는 화면이어야한다! 할 때는 SwiftUI View로 파일을 만들어야하구
내가 만드는 파일이 화면을 꾸미는 건 아니고, 화면 그 뒤에서 뭔가를 정의하고, 나중에 써먹을 함수를 정의하거나 타입을 정의하는 용도일 뿐이다 할 때는 Swift File로 파일을 만들어야함니다.
TabView 기본 형태
엄청 간단함미다!!
View 안에서 Component들을 수직으로 묶고 싶을 때 VStack을 사용해요.
VStack {
빨간색동그라미()
초록색동그라미()
파란색동그라미()
}
VStack이랑 같은 느낌으로, View 안에서 Component들이 좌우로 스크롤 되면서 표시되게 하고 싶을 때 TabView를 사용하면 돼요.
TabView {
빨간색동그라미()
초록색동그라미()
파란색동그라미()
}.tabViewStyle(원하는스타일)
VStack은 } 옆에 .뭐시기뭐시기를 안 썼는데, TabView에서는 넣어줘야돼요.
.tabViewStyle(원하는스타일)로 빨동-초동-파동이 어떤 스타일로 넘어가게 할 건지를 표시해줘야지 눈으로 넘어가는 게 보여요!
이걸 코드로 작성하면, 화면을 만들어야하니까 SwiftUI View로 파일을 만들고 빨간색 네모 안에다가 코드를 작성하시면 됨미다.
결과물!!
HIG Said
https://developer.apple.com/design/human-interface-guidelines/page-controls
Page controls | Apple Developer Documentation
A page control displays a row of indicator images, each of which represents a page in a flat list.
developer.apple.com
Best Practices > Use page controls to represent movement between an ordered list of pages.
페이지 컨트롤을 사용하여 정렬된 페이지 목록 간의 이동을 나타내라!!
Best Practices > Center a page control at the bottom of the screen.
페이지 컨트롤을 화면의 하단 가운데에 놔라!!
iOS, iPadOS > Developer Note > for developer guidance, see UIPageControl.InteractionState.
개발자는 UIPageControl을 참고해라!!
iOS, iPadOS > A page control can include a translucent, rounded - rectangle background appearance that provides visual contrast for the indicators. You can choose one of the following background styles:
그 점들 보여주는 거 뒤에 배경 감싸주는 것이 좋다!
Page Control을 사용하라니까 일단 ㅇㅋ
일단은 Page Control을 가능하게 하기 위해서 UIPageControl을 참고하라니까 참고해보겠읍니다.
https://developer.apple.com/documentation/uikit/uipagecontrol/
UIPageControl | Apple Developer Documentation
A control that displays a horizontal series of dots, each of which corresponds to a page in the app’s document or other data-model entity.
developer.apple.com
UIPageControl 안에는
현재 페이지를 표시하는 흰색 점인 currentPage라는 Int 데이터 타입의 변수(var)가 있어요.
페이지 전체 수를 물어보는 numbrerOfPages라는 Int 데이터 타입의 변수(var)가 있어요.
써먹을 곳이 있겠군 정도만 보고 넘어가면 됩니다.
지금부터 하는 이야기는 절대절대 지금 당장 이해해야되는 부분은 아닌 거 같아용. 그냥 완성된 코드 볼 때 아 이게 이래서 이런 게 있구나 정도만 이해하기 위한 용도로 정리하는 겁니당.
UIPageControl은 UIKit 프레임워크에서 제공하는, View를 꾸미는 기능이라고 합니다. 근데 저희는 SwiftUI 프레임워크에서 제공하는 기능으로 View를 만들어야하잖아요??
UIKit이랑 SwiftUI가 뭐가 다르냐면요.. 음...
PPT 자료를 만들어야할 때, 파워포인트를 사용해서 만들 수도 있고, Keynote를 사용해서 만들 수 있잖아요?
iOS App도 똑같이, 앱을 만들 때, UIKit을 사용해서 만들 수도 있고, SwiftUI를 사용해서 만들 수도 있어용.
근데 우리는 SwiftUI를 사용해서 iOS App을 만들기로 했자나여... 근데 갑자기 UIKit을 사용한다고? 라는 생각이 들거에용.
SwiftUI를 사용해서 앱을 만드는데, UIKit에서 제공하는 기능을 사용할 수 있나?라는 의문이 들거에용. 하지만 그걸 가능하게 해주는 녀석이 있다고 합니다.
https://developer.apple.com/documentation/swiftui/uiviewrepresentable/
UIViewRepresentable | Apple Developer Documentation
A wrapper for a UIKit view that you use to integrate that view into your SwiftUI view hierarchy.
developer.apple.com
UIViewRepresentable이라는 것이 SwiftUI를 사용해서 앱을 만드는 경우에, UIKit에서 제공하는 기능을 사용할 수 있게 해주는 역할을 한다고 합니다. 이걸 사용하면 가능하대요!! 그냥 진짜 가볍게 아 그렇구나~ 하고 넘어갔읍니다.
그래서 이제 HIG에서 만들라고 했던 PageControl을 만들러 가보겠읍니다.
근데 그 전에 또 개빡치는 걸 하나 알아야해용... @State랑 @Binding이라는 걸 알아야합니다...
진짜진짜진짜 초간단으로 설명하면 @State 붙은 게 원본이고, @Binding(단축키는 $) 붙은 게 원본을 복사해서 가져온 복사본이라고 생각하면 됩니다.
예를들어서 수와유빈이라는 변수가 있다고 쳐볼게용. 수와유빈 변수를 이쪽 파일에서도 써야되고 저쪽 파일에서도 써야되고, 이쪽 파일에서 수와유빈 값이 바뀌면 저쪽화면에서도 업데이트 되게 하고 암튼 그런 느낌이에요.
// 원본
@State var 수와유빈: Int = 0
// 복사본은 값을 지정하지 않아줘도 돼요(= 0 필요없음). 왜냐면 원본에서 =0을 해줬으니까 그거 그냥 복사해온 거에요.
@Binding var 수와유빈: Int
// 단축키
$수와유빈
복사본에서 값을 바꿔도 원본 값이 바뀌고, 원본 값이 바껴도 복사본 값이 바껴요. 이게 @State와 @Binding을 사용하는 가장 큰 목적이라고 합니다.
같은 변수를 다루는데 이쪽에서는 3이고 이쪽에서는 0인 걸 방지하기 위해 사용하는 것이 @State와 @Binding입니다.
OK 이제 리얼로 PageControl 만들러가봅시다.
현재 보이는 원이 몇번째 페이지인지 알 수 있게, 저렇게 코드를 하나 넣어주세요.
그리고 컴퓨터가 이게 몇번째 currentCircle인지 인식을 하게 해줘야해요.
.tag 저거 안 썼을 때는 이게 몇번째 원이다를 사람 눈만 인식하지 컴퓨터는 인식하지 못해요.
그리고 컴퓨터가 숫자를 셀 때는 1부터 시작하는 것이 아니라 0부터 시작해용.
이제 UIKit에서 제공하는 기능을 SwiftUI에서 사용할 수 있도록 장치를 마련해둘거에요. 이건 화면이 필요없으니까 Swift File로 파일로 만들어줄게용. 이름은 뭐 아무거나 하셔도 돼요. 전 SwiftUILoveUIKit으로 했어요. 짠!!
안에 들어갈 내용을 작성했어요.
주석에 설명 쭈욱 써놨어요. 쭉 편하게 읽어보시고 이해되시면 좋지만, 어려우면 그냥 복붙하세요!! ㅋㅋㅋ
위에서 만든 PageControl을 사용할 거에요!
다시 TabView1 파일로 돌아와서 구조를 생각해봅시다!
위에는 원 아래는 PageControl이잖아요? 그럼 VStack으로 감싸면 되겠죵!
이거는 HIG에서 뒤에 배경 감싸주는 게 좋다고 해서 그거 감싸주는 코드입니다.
원의 총 갯수가 3이니까 3을 작성해줘요.
현재 원이 몇번째 원인지를 작성해주면 돼요. 복사본을 가져올 건데 @Binding 뭐를 안 쓰고 단축키인 $를 사용하시면 됩니다!
우리팀 개 파이팅!!!!
'Note' 카테고리의 다른 글
| Alarm 관련 공부 (0) | 2023.05.30 |
|---|---|
| 개쉬운 탭뷰 (1) | 2023.05.13 |
| Making classes observable (0) | 2023.05.06 |
| ToolbarItem (0) | 2023.05.05 |
| NavigationView와 toolbar (0) | 2023.05.04 |
