[Issue 해결] 아주 간단한 Picker 사용으로 바보같은 짓 멈챠,,~

요즘 앱을 사용하다 보면 상단의 버튼을 통해 뷰의 이동을 쉽게 할 수 있는 것을 볼 수 있다.

바로 이것!!!

빨간색으로 동그라미 쳐져있는 곳! 마켓컬리와 뷰티컬리 뷰의 이동을 할 수 있게 해주는 버튼!!

 

 

앱에서 중요한 요소 중 하나가 view들 간의 이동이 쉬워야 하고 직관적이어야 한다고 생각하기 때문에

이 기능이 생각보다 많이 쓰인다는 사실을 알게 되었다.

 

그래서 이번 프로토타입 구현 수업을 통해 앱의 UI를 구현하다 보니 이 기능을 사용하고 싶었다.

하고 싶은 기능은 사용가능한 제품과 이미 사용한 제품을 보여주는 각각의 뷰를

저 버튼으로 뷰를 이동하면서 보여주고 싶었댜,,!!!!

 

그래서 처음에는 어떻게 구현할까 생각을 하다가

아무래도 누르는거니까 버튼을 사용하는 것이 아닐까..?

아 근데 view가 변하니까 navigationLink를 써야되나,, 하면서

일단 구현해보기로 한다. 

.

.

.

.

못했다 ㅋ

구현 못했다 이것이다,,!

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

ㅠ

뭔가,, 네비게이션 링크나 버튼으로,, 어떻게 할 수 있는 방법이 있을 수도 있긴 할텐데

내 머리로는 구현 못했다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

ㅠ

버튼으로 만든거 이거 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

일단 냅다 버튼으로 구현한거 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

이거 보신 한 조원분이

"Picker 사용하시면 될거에요" 

라고 하셨다.. 오 Picker???? 뭔가 예전에 한~번 써본 것 같은데 제대로 써본적은 없는 Picker !!!

왜 그 생각을 못했지??? 역시 천재 조원분 ㅠㅠㅠㅠㅠ 하면서 써보았다

---

Picker

struct Picker<Label, SelectionValue, Content> 
	where Label : View, SelectionValue : Hashable, Content : View

 

그래서 Picker로 어떻게 구현을 했냐면

 

@State private var selectedPickerIndex: Int = 0

먼저 Int 타입의 변수를 하나 생성해 준다. 

이 변수는 Picker 의 selection 파라미터와 바인딩 될 예정이다!

VStack {
         Picker("Select View", selection: $selectedPickerIndex) {
               Text("사용 가능").tag(0)
               Text("사용 완료").tag(1)
        }
         .pickerStyle(.segmented)

body 안에 "Select View" 라는 Picker를 선언해준다. 

여기서 위에서 선언한 selectedPickerIndex 변수가 selection 의 파라미터 값으로 쓰인다. 

그리고 content는 늘 그렇듯 view로 return 되는 클로저가 쓰인다.

이 곳에 Picker에서 보여줄 text view를 작성해준다. 

그리고 여기서 각 selector에 tag 값을 설정해준다. 

Picker에서 보여줄 각 셀렉터에 tag 값을 부여해야 selectedPickerIndex와 view를 이어줄 수 있따!

이건 밑에서 보면 된당!

 

 

그리고 중요한 것!! 여기서 .pickerStyle 수정자로 .segmented로 지정해준다!!!!

segmented!!! 를 써야 내가 하고싶은 저 모양이 나온다는 것

---

이제 조건문을 이용해서 view를 이동해보겠드아

		if selectedPickerIndex == 0 {
                        FirstView()
                    } else if selectedPickerIndex == 1 {
                        SecondView()
                    }

 

selectedPickerIndex 값이 0 일 때,

tag 값으로 0 을 부여한 "사용 가능" 셀렉터를 선택하면 FirstView를 보여주고

selectedPickerIndex 값이 1 이라면

tag 값을 1로 부여한 "사용 완료" 셀렉터 를 선택하면 SecondView를 보여줘라 !!!

하기 때문에 셀렉터마다 tag 값을 설정해줘서 바인딩해서 사용하게 된다!

 

.

.

넘 쉽지 않움..? 이걸 두고 내가 지금 버튼 어쩌구 네비게이션 어쩌구를 하고 있었다니..

역시 애플 만만세,, 나같은 바보가 있을까봐 미리 구현해주는 센스..~

그래서 이렇게 구현할 수가 있었다고 한다..!!

 

전체코드

 

struct PickerView: View. {

  @State private var selectedSegmentIndex = 0
  var body: some View {

	  NavigationStack {
		VStack {
                    Picker("Select View", selection: $selectedSegmentIndex) {
                        Text("사용 가능").tag(0)
                        Text("사용 완료").tag(1)
                    }
                    .pickerStyle(.segmented)
                    .padding()
                    
                    if selectedSegmentIndex == 0 {
                        FirstView()
                    } else if selectedSegmentIndex == 1 {
                        SecondView()
                    }
            }
	 }
     }
}

 

---

ㅎㅎ 엄청 별거 아닌데,, 안잊어버리려고 써봅니다,,

근데 아마 마켓컬리처럼 커스텀해서 쓰려면 뭔가 다른.. 방법이 있겠지? 싶음!!!

이 기회에 Picker도 열심히 써봐야겠당

 

 

📖 reference ♥️

https://developer.apple.com/documentation/swiftui/picker

Picker | Apple Developer Documentation