[SwiftUI Project] 프로젝트 셋업, 컬러세팅, Header View 만들기

바이낸스 Lite 클론 프로젝트를 시작하며 에셋에 컬러를 추가하고 헤더뷰를 만들었다.

 

프로젝트 생성과 함께 Assets에서 라이트/다크모드의 색을 지정해준다.

 

Color.swift

import Foundation
import SwiftUI

extension Color {
    
    static let theme = ColorTheme()
    
}

struct ColorTheme {
    
    let accent = Color("AccentColor")
    let background = Color("BackgroundColor")
    let green = Color("GreenColor")
    let red = Color("RedColor")
    let secondaryText = Color("SecondaryTextColor")
    let arrowButton = Color("ArrowButtonColor")
}

이렇게 익스텐션으로 만들어두면 원하는 색상을 Color.theme.accent 같은 형식으로 간편하게 불러올 수 있다.

 

앱에서 반복해서 사용되는 아이콘의 형식이 있다.

그런 경우 재사용 가능한 아이콘 형식을 만들어두면 간편하게 사용가능하다.

 

IconView.swift

import SwiftUI

struct IconView: View {
    let iconName: String
    
    var body: some View {
        Image(systemName: iconName)
            .padding()
            .foregroundColor(Color.theme.accent)
            .font(.headline)
            .frame(width: 50, height: 50)
    }
}

struct IconView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            IconView(iconName: "magnifyingglass")
                .previewLayout(.sizeThatFits)
            
            IconView(iconName: "magnifyingglass")
                .preferredColorScheme(.dark)
                .previewLayout(.sizeThatFits)
        }
    }
}

IconView.swift의 프리뷰 예시

만들어둔 재사용 가능한 아이콘을 사용할 때는 IconView(imageName: "이미지 네임") 형식으로 간편하게 사용가능하다!  

 

Person 아이콘을 누르면 헤더뷰의 아이콘이 바뀌도록 설정하고, 왼쪽에서 사이드바가 나오게 하기 위해 

showSidebar.toggle()을 onTapGesture에 설정해준다. 

 

왼쪽 Person 아이콘을 누르면 showSidebar.toggle()

헤더뷰가 추가된 HomeView의 모습

import SwiftUI

struct HomeView: View {
    
    @State private var showSidebar: Bool = false
    
    var body: some View {
        ZStack {
            // Background layer
            Color.theme.background
                .ignoresSafeArea()
            
            // content layer
            VStack {
                homeHeader
                
                Spacer(minLength: 0)
            }
        }
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            HomeView()
                .navigationBarHidden(true)
        }
        .preferredColorScheme(.dark)
    }
}

extension HomeView {
    private var homeHeader: some View {
        HStack {
            IconView(iconName: showSidebar ? "arrow.left" : "person.circle")
                .onTapGesture {
                    showSidebar.toggle()
                }
            
            Spacer()
            
            if showSidebar == false {
                HStack {
                    IconView(iconName: "magnifyingglass")
                        .padding(.trailing, -20)
                    
                    IconView(iconName: "qrcode.viewfinder")
                }
            } else {
                IconView(iconName: "sun.min.fill")
                    .padding(.trailing, 18)
            }
        }
    }
}