SwiftUI에서 CustomColor 사용하기

SwiftUI에서 CustomColor 사용하기

처음에 swiftUI로 코딩을 했을 때 색깔을 지정하는 데 있어서 꽤 애를 먹었다. swiftUI에서 지정한 컬러만 사용하나 되기도 싶고. 저번 포스팅에서 rgb컬러를 사용하는 것을 보여주었지만 매번 이렇게 하는 거는 좋지 않은 것 같아서 방법을 더 찾아보니 더 좋은 방법이 있었다. 웹에서 개발할 때 자주 사용하는 컬러를 테마 컬러로 지정해서 이름을 정해주면 이름만 적으면 해당 컬러를 불러올 수 있었다. 그와 비슷한 방법이 swiftUI에 있었다.

 

우선 프로젝트를 만들면 네비게이션 영역에 Assets.xcassets라는 폴더처럼 생긴 파일이 있을 것이다.

Assets.scassets

저 빨간 부분에 오른쪽 마우스를 클릭하면 메뉴가 뜨는데 Color Set을 클릭하자.

Color Set 클릭

그러면 다음과 같은 화면이 나온다.

Color 추가

중간에 Any Apearance는 기본 색상이고, Dark Appearance는 다크 모드일 때 나오는 색상인 듯하다.(아직 확인해보지는 않았다.) 그리고 오른쪽 인스펙터 영역에 보면 이름(Name)을 지정할 수 있다. 나 같은 경우에는 배경 컬러로 쓸 색상을 지정하려고 BackgroundColor라는 이름을 지었다. Any Apearance든 Dark Apearance든 클릭하면 오른쪽 인스펙터 부분이 다음과 같이 바뀐다.

 

색상 지정하기

주로 손 댈 부분은 색상 지정을 하는 부분일 텐데 지금 1 이하의 소수점으로 적게 해 놓았지만 Input Method를 8-bit(0-255)로 하면 0에서 255 값을 넣는 형태로 변경된다. Any Apearance와 Dark Appearance 두 색상 모두 지정해주면 컬러가 하나 세팅이 되는 것이다.

 

그리고 코드상에서 추가로 해주어야 할 것이 있다.

struct ColorManager {
    // create static variables for custom colors
    static let BackgroundColor = Color("BackgroundColor")

    //... add the rest of your colors here
}

 

이제 ContentView에서 색상을 사용하는 것을 보여주겠다.

struct ContentView: View {
    var body: some View {
        ZStack{
            ColorManager.BackgroundColor.ignoresSafeArea()
        }
    }
}

결과물

 

이렇게 배경색을 custom해서 바꾸어 보았다.