SwiftUI의 ButtonStyle

SwiftUI는 스타일 지정 프로토콜을 사용하여 보기를 만들고 사용자 지정하는 강력한 방법을 제공합니다. 이러한 프로토콜을 사용하면 한 줄의 코드로 보기의 모양과 느낌을 정의할 수 있습니다.

결과적으로 보기가 시각적으로 일관되어 앱을 더 사용하기 쉽고 매력적으로 만듭니다.

ButtonStyle 없이 버튼 스타일 지정

다른 수정자를 적용하여 버튼 인라인 스타일을 지정할 수 있습니다. 다음 예를 고려하십시오.

Button("Tap me") {}
    .font(.system(.callout, weight: .bold))
    .foregroundColor(.white)
    .frame(maxWidth: .infinity, maxHeight: 48)
    .background(.blue)
    .cornerRadius(8)

이 접근 방식은 단일 버튼을 디자인하는 경우 완전히 적합합니다. 그러나 동일한 스타일의 여러 버튼을 개발해야 하는 경우 프로토콜을 사용해야 합니다 ButtonStyle. 앱 전체에서 동일한 스타일을 다른 버튼에 공유하고 적용하는 데 도움이 됩니다.

ButtonStyle로 버튼 스타일 지정

이름이 지정된 사용자 지정 버튼 스타일을 만들어 보겠습니다 PrimaryButtonStyle. 이는 애플리케이션 전체에서 기본 버튼에 사용되는 스타일입니다.

이 예를 살펴보겠습니다.

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(.blue)
            .cornerRadius(8)
    }
}

생성된 버튼 스타일을 적용하려면 다음과 같이 작성해 보십시오.

Button("Tap me") {}
    .buttonStyle(PrimaryButtonStyle())

ButtonStyle구성

버튼의 구성 개체에는 isPressed버튼이 현재 눌려 있는지 여부를 나타내는 부울 값을 포함하여 여러 속성이 있습니다. 사용자가 버튼을 누를 때 버튼 스타일을 변경하는 데 사용할 수 있습니다. 이를 위해 다음과 같이 작성할 수 있습니다.

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(configuration.isPressed ? .blue.opacity(0.75) : .blue)
            .cornerRadius(8)
    }
}

프로 팁

에 다음 확장을 추가하여 코드를 더 깨끗하고 읽기 쉽게 만들 수 있습니다 PrimaryButtonStyle.

extension ButtonStyle where Self == PrimaryButtonStyle {
    
    static var primary: PrimaryButtonStyle {
        PrimaryButtonStyle()
    }
}

Button("Tap me") {}
    .buttonStyle(.primary)

를 사용하여 ButtonStyle버튼의 모양, 레이아웃 및 상호 작용을 정의하고 전체 애플리케이션에서 일관성을 보장할 수 있습니다.

또한 버튼 관련 로직과 스타일을 재사용 가능한 구성 요소로 캡슐화하는 방법을 제공합니다. 이렇게 하면 코드베이스를 보다 유지 관리하고 확장할 수 있습니다.

읽어 주셔서 감사합니다!

이 기사가 도움이 된다면 다른 사람들이 더 쉽게 찾을 수 있도록 박수를 치십시오.