[SwiftUI] Button CornerRadius 효과주기 border, stroke, strokeBorder

개발하면서 버튼에 라운드를 적용했고 테두리를 주려고하는데
짤림현상이 나타났어요
삽질좀 한 내용을 공유하려고해요

문제가된 코드입니다

func 문제코드() -> some View {
    Button {
        print("버튼 클릭!")
    } label: {
        Text("테두리 있는 버튼")
            .foregroundColor(.pink)
            .frame(width: 200, height: 60)
    }
    .background(.black)
    .border(.pink, width: 2)
    .cornerRadius(8)
}

코드만 보면 전혀 문제가 없어보이지만
실제로 버튼을보면
모서리쪽에 어색한 부분이 있다는걸 느끼실거에요

이러한 문제가있어서 다른방법으로
border를 줘봤지만 다 실패했었어요
(얇은 테두리시 문제 현상 발생해요 두꺼우면 티가안나요)

이때 발견한게 stroke으로도 테두리를 줄 수 있는데
stroke을 사용한 뷰를 사용하면 테두리가 이쁘게 나오더라구요!



그래서
border와 stroke의 차이를 찾아보려다가
storkeBorder라는것도있어서 함께 정리해볼게요

border는
View타입에 있는속성이고
선을 그릴때 뷰의 안쪽에서부터 그린다고해요
-> Text같은 View에 사용가능

stroke는
Shape타입에 있는속성이고
선을 그릴때 center에서부터 그린다고해요
반은 뷰의 안쪽, 반은 뷰의 바깥쪽을 그리는거죠
-> Rectangle같은 Shape에 사용가능

strokeBorder는
InsettableShape타입에 있는 속성이고
InsettableShape는 Shape를 채택한 프로토콜이에요
뷰의 안쪽으로 선을 그린다고해요
-> Rectangle같은 Shape에 사용가능

글로 잘 이해가 안가지만 사진을 보면 바로이해가 가요

 

stroke는 테두리가 뷰의 반에 걸친게 보이죠

lineWidth의 반반이 걸쳐져서 보여지는 효과에요

 

border와 strokeBorder차이는 타입에서 차이가나요

border와 strokeBorder는 테두리가 뷰영역 내부에 그려지는 부분(inner)은 같고

 

border는 View에 사용할 수 있고

strokeBorder는 Shape에 사용할 수 있어요(Circle, Rectangle)

strokeBorder는 Shape에맞는 테두리를 정확하게 그려주고 

border는 해당 뷰가 포함된 영역의 frame을 나타내는 테두리를 그려줘요

지금은 green을 줫지만 만약에 그냥 border만 사용하면

Shape의 기본 색이 검정색이라 검정색 원이 뜨는걸 볼 수 있어요

HStack {
    Circle()
        .strokeBorder(lineWidth: 5, antialiased: true)
        .foregroundStyle(.blue)
        .frame(width: 100, height: 100)
        .overlay { Text("storkeBorder") }
        .background(.yellow)
    
    Circle()
        .stroke(.indigo, lineWidth: 5)
        .frame(width: 100, height: 100)
        .overlay { Text("stroke") }
        .background(.yellow)
    
    Circle()
        .foregroundStyle(.green)
        .border(.red, width: 5)
        .frame(width: 100, height: 100)
        .overlay { Text("border") }
        .background(.yellow)
}

 

 

상황에 맞게 잘 골라쓰면 좋을 것 같네요!