SwiftUI : ColorPicker

 ColorPicker에 대해 알아보도록 합시다.

ColorPicker

ColorPicker("some text", selection: $bgColor)

ColorPicker는 현재 선택한 색상을 표시하는 색상저장소를 제공하고, 사용자가 새로운 색상을 선택할 수 있도록 더 큰 팔레트를 표시합니다. 기본적으로 ColorPicker는 불투명한 색상을 지원합니다. 하지만 불투명도를 비활성화 하려면 매개 별수를 설정해야합니다.

ColorPicker("some text", selection: $bgColor, supportsOpacity: false)

왼: ColorPicer 기본값(불투명도 조절 가능) / 오: 불투명도 삭제

TIP

 

 

SwiftUI에서 ColorPicker를 사용하려면 Color를 변경 할 수 있는 @State 속성을 먼저 만들어줘야 합니다.

첫번째 방법

bgColor = Color.White로 첫 배경을 지정해줄 수 있습니다.

struct ContentView: View {
    
    @State private var bgColor = Color.white
    
    var body: some View {
      VStack {
            ColorPicker("배경화면 색상 선택", selection: $bgColor)
                .padding()
        }
        .background(bgColor)
    }
}

두번째 방법

bgColor = Color(.sRGB, red: Double, green: Double, blue: Double, opacity: Double = 1) 으로 배경을 지정해줄 수 있습니다.

    @State private var bgColor =
        Color(.sRGB, red: 0.98, green: 0.9, blue: 0.5)

배경화면 색상을 선택했을 때, frame이 텍스트 주변으로만 설정 되어있어서 전체배경화면으로 적용되지 않는걸 확인 할 수 있습니다. 이럴때는 frame을 infinity로 설정해줘야 한는데, 주의할 점은 반드시 background앞에 코드를 작성해야 합니다.

 

또 .edgesIgnoringSafeArea(.all) 를 사용하여 SafeArea부분 까지 채워주도록 하겠습니다.

struct ContentView: View {
    
    @State private var bgColor = Color.white
    
    var body: some View {
        VStack {
            ColorPicker("배경화면 색상 선택", selection: $bgColor)
                .padding()
        }
        //frame은 반드시 background 앞에 와야 한다.
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(bgColor)
        .edgesIgnoringSafeArea(.all)
    }
}

 

예시

 

Circle하나를 만들고 ColorPicker 를 사용하여 색상이 선택될 때 마다 동그라마의 색상이 변경 되도록 하겠습니다.

struct ContentView: View {
    
    @State var selectedColor: Color = .yellow
    
    var body: some View {
        VStack {
            Circle()
                .frame(width: 300, height: 300)
                .foregroundColor(selectedColor)
                .padding()
            
            ColorPicker("동그라미의 색상을 변경합니다.", selection: $selectedColor )
                .padding(50)
        }
    }
}

Form을 추가하면 더 깔끔해 보일 수 있겠죠?

struct ContentView: View {
    
    @State var selectedColor: Color = .yellow
    
    var body: some View {
        VStack {
            Circle()
                .frame(width: 300, height: 300)
                .foregroundColor(selectedColor)
                .padding()
            Form{
                ColorPicker("동그라미의 색상을 변경합니다.", selection: $selectedColor )
                    .padding()
            }
        }
    }
}

 

 

읽어주셔서 감사합니다🤟

 

본 게시글의 전체코드 GitHub 👇🏻

Seogun95/SwiftUI_ColorPicker_TUT