[SwiftUI fundamental Tutorial] Picker, SegmentedStyle

위 글은 유튜브 정대리님의 SwiftUI fundamental Tutorial 강좌를 보고 작성한 정리글로

자세한 내용은 유튜브를 통해 확인하시길 권장합니다.

 

 

XCode 13버전의 Picker는 내가 알고 있는 Picker랑 달라서 12.5 버전을 따로 깔아서 강의를 들음

이 부분은 찾아봐도 잘 모르겠다...

 

 

Declaration

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

 

 

 

 

Picker 기본형

import SwiftUI

struct ContentView: View {
    
    @State private var select = 0
    
    var body: some View {
        
        VStack(alignment: .center){
            Text("selected? :\(select)")
            
            Picker(selection: $select, label: Text(""), content: {
                Text("0").tag(0)
                Text("1").tag(1)
                Text("2").tag(2)
            })
        }
    }
}

 

 

 

 

PIcker에 .pickerStyle(SegmentedPickerStyle()) 적용

import SwiftUI

struct ContentView: View {
    
    @State private var select = 0
    
    var body: some View {
        
        VStack(alignment: .center){
            Text("selected? :\(select)")
            
            Picker(selection: $select, label: Text(""), content: {
                Text("0").tag(0)
                Text("1").tag(1)
                Text("2").tag(2)
            }).pickerStyle(SegmentedPickerStyle())
                
            
        }
    }
}

 

 

 

 

Picker를 응용하기 1. 해당 변수의 색상을 반환하여 도형 색상 바꾸기

import SwiftUI

struct ContentView: View {
    
    @State private var select = 0
    
    let Colors = ["red", "green", "blue"]
    
    //색을 반환하는 함수, 인덱스가 들어오면 칼라로 반환
    func changeColor(index: Int) -> Color{
        switch index {
        case 0:
            return Color.red
        case 1:
            return Color.green
        case 2:
            return Color.blue
        default:
            return Color.red
        }
    }
    
    var body: some View {
        
        VStack(alignment: .center){
            
            Circle()
                .foregroundColor(self.changeColor(index: select))
                .frame(width: 50, height: 50)
            
            Text("value: \(select)")
            Text("color: \(Colors[select])")
            
            Picker(selection: $select, label: Text(""), content: {
                Text("red").tag(0)
                Text("green").tag(1)
                Text("blue").tag(2)
            }).pickerStyle(SegmentedPickerStyle())
            
            Picker(selection: $select, label: Text(""), content: {
                Text("red").tag(0)
                Text("green").tag(1)
                Text("blue").tag(2)
            })
            .frame(width: 60, height: 100)
            .clipped()
            .padding(10)
            .border(self.changeColor(index: select), width: 10)
            
            
        }.padding(.horizontal, 50)
    }
}

.clipped() 효과

 

 

 

 

 

Picker 응용하기 2. enum을 사용한 Picker

import SwiftUI

enum School : String, CaseIterable{
    case elementary = "초등학교"
    case middle = "중학교"
    case high = "고등학교"
}

// 유효 아이디 고유 값 설정하기
struct MyFriend : Identifiable, Hashable{
    var id = UUID()
    var name : String
    var school : School
}


struct Picker2: View{
    
    @State private var filterValue = School.elementary
    
    @State private var Friends = [MyFriend]()
    
    // State에 값을 넣어주는 방법: 생성자 메소드가 필요함
    init(){
        var newList = [MyFriend]()
        
        for i in 0...20{
            let newFriend  = MyFriend(name: "내 친구\(i)", school: School.allCases.randomElement()!)
            newList.append(newFriend)
            
        }
        _Friends = State(initialValue: newList)
    }
    
    var body: some View{
        VStack{
            Text("선택된 카테고리: \(filterValue.rawValue)")
            // rawValue: enum의 데이터 갖고 오기
            Picker(selection: $filterValue, label: Text(""), content: {
                Text("초등학교").tag(School.elementary)
                Text("중학교").tag(School.middle)
                Text("고등학교").tag(School.high)
            }).pickerStyle(SegmentedPickerStyle())
            
            // 리스트 데이터 필터링
            List{
                ForEach(Friends.filter{ filterTerm in
//                    $0.school == filterValue

                    filterTerm.school == filterValue
                }) { friendItem in
                    GeometryReader{ geometryProxy in
                        HStack{
                            Text("name: \(friendItem.name)")
                                .frame(width: geometryProxy.size.width / 2)
                            Divider()
                            Text("name: \(friendItem.school.rawValue)")
                                .frame(width: geometryProxy.size.width / 2)
                }
            }
        }
    }
     
        }
    }
}

enum에서 랜덤 값을 만들기 위해 CaseIterable 추가

enum School : String, CaseIterable{
    case elementary = "초등학교"
    case middle = "중학교"
    case high = "고등학교"
}

 

 

enum에서 데이터를 가져올 경우

filterVaule.rawValue

 

 

SwiftUI의 Identifiable을 이용하여 아이디 설정하기

UUID(): 고유 값

 

 

데이터 만들기

@State private var Friends = [MyFriend]() MyFriend 배열 만들기

 

State인 경우 바로 적용이 안되기 때문에 생성자 메소드를 만들어 줘야 함

init(){

    var newList = [MyFriend]() // MyFriend 자료형인 새 배열 생성

 

    for i in 0...20{
            let newFriend  = MyFriend(name: "내 친구\(i)", school: School.allCases.randomElement()!)

// School.allCases.randomElement()! : scholl enum에서 돌다가 랜덤 값을 넣어줌

            newList.append(newFriend) // newFriend 붙이기
            
        }

 

// MyFriend 리스트에 접근 해야 하므로 (State에 접근) (언더바) _를 붙여야 함

    _Friends = State(initialValue: newList) // 여기서 값을 newList에 넣게 됨

 

}

 

 

첫번째 요소가 일치하는지

List{

    ForEach(Friends.filter{

        $0.school == filteredValue

})

} 와

List{

    ForEach(Friends.filter{ filterTerm in

        filterTerm.school == filteredValue

})

} 는 같은 의미 임