SwiftUI 튜토리얼 [챕터2-그리기1-섹션2: 뱃지 배경 그리기]
섹션2
뱃지의 배경(백그라운드) 그리기
스위프트 유아이 안에 있는 그래픽-APIs를 사용해서 커스텀 뱃지 모양을 만들어 보세요.
스텝1
새로운 파일을 하나 더 만들어요.
File=>New=>File,
이제 SwiftUI View를 선택하세요. 그다음 Next를 클릭하고,
이름은 BadgeBackground.swift 라고 지어요.
스텝2
BadgeBackground.swift 안에서, Path 모양을 뱃지에 더하세요. 그리고 fill( )모디파이어를 적용시켜서
모양을 뷰로 만들어 낼 거예요.
-선,곡선,그리고 다른 형태를 조합하기 위해서 패쓰(path)를 사용해요.
이것은 마치 이 뱃지의 육각형 배경과 같이 더 복잡한 모양을 형성해요.
스텝3
100*100 px(픽셀) 사이즈의 컨테이너라고 가정해서, 시작점의 패쓰를 추가해요.
-마치 상상의 펜이 그림을 그리려고, 그 장소 위를 맴돌 듯이,
move(to: )메써드 는 모양 영역 안에서 그리기 커서를 움직여요.
스텝4
육각형 같은 모양을 만들기 위해서 모양 데이터의 각각의 점에 선을 그려요.
-addLine(to: )메써드는 점 하나를 잡고 그림을 그려요.
addLinne(to: )으로 연속적인 call은 이전의 점에서 시작해서, 새로운 점으로 계속돼요.
*당신의 육각형이 좀 이상해도 걱정 마세요; 도형의 코너에 있는 각각의 세그먼트의 곡선 부분을 무시했기 때문이에요.
다음번에 그것을 처리할 거예요.
스텝5
addQuadCurve(to:control:)메써드 를 사용해서 베지어(bezier) 곡선을 뱃지의 모서리에 그려주세요.
스텝6
GeometryReader 안에 패쓰를 감싸 넣어 주면, 뱃지가 포함하는 뷰의 사이즈를 이용할 수 있어요,
이것은 변경불가 코딩(hard-coding)의 값 (100)을 대신해서 사이즈를 정의 내릴 수 있어요.
-지오메트리(geometry-기하학)의 두 개의 가장 작은 크기를 사용하는 것은 뷰가 사각형이 아닐 때 뱃지의 가로, 세로 비를 지켜 줘요.
스텝7
xScale 을 사용해서 x축 위의 도형 크기를 바꾸고, xOffset을 추가해서 기하학적인 모양 안에서 도형의 중심을 다시 맞추세요.
스텝8
검정 단색의 배경을 그라데이션 시키고 바꾸어서 디자인에 알맞게 해 주세요.
스텝9
aspectRatio(_:contentMode: )모디파이어를 그라데이션 채움에 적용해 주세요.
-1:1 비율을 지키면, 뱃지는 뷰의 중간 위치를 유지해요, 비록 조상뷰가 사각형이 아니라도 말이죠.
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
섹션2 완료
다음 섹션 3