[SwiftUI] 둥근 테두리 버튼 만들기

정의

struct RoundedButton: View{
    
    let color: Color
    let text: String
    let fontSize: CGFloat
    let icon: String?
    let action: () -> Void

    init(color: Color,
         text: String,
         fontSize: CGFloat,
         icon: String?,
         action: @escaping () -> Void){
        self.color = color
        self.text = text
        self.fontSize = fontSize
        self.icon = icon ?? nil
        self.action = action
    }
    
    var body: some View {
        Button(action: { action() }){
            if let icon = icon {
            Image(systemName: icon)
                .foregroundColor(color)
            }
            Text(text)
                .font(.system(size: fontSize, weight: .medium))
                .foregroundColor(color)
        }
        .padding(8)
        .padding(.horizontal, 10)
        .overlay(
            RoundedRectangle(cornerRadius: 100)
                .stroke(Color(.white), lineWidth: 1))
    }
}

중요한 부분은

.overlay(
    RoundedRectangle(cornerRadius: 100)
        .stroke(Color(.white), lineWidth: 1))

입니다.

그냥 .border와 .conerRadius 를 쓰면 동시에 적용이 안됩니다.

그래서 overlay를 통해 테두리 모양대로 도형을 그리고 테두리를 적용해줍니다.

 

인스턴스

HStack(spacing: 20) {
    RoundedButton(color: .white, text: "지하철", fontSize: 16, icon: nil, action: { print("first button click")})
    RoundedButton(color: .white, text: "지도", fontSize: 16, icon: "map", action: {})
    RoundedButton(color: .white, text: "⭐️", fontSize: 16, icon: nil, action: {})
}

결과

icon을 nil로 주면 첫번째 아이콘이고 아이콘을 입력하면 아이콘이 나옵니다.

해당 아이콘은 애플 내장 아이콘 모음입니다. (SF Symbols beta)

아이콘이 정말 많으니 데스크탑 앱 다운받으셔서 구경해보세용