Hike (1)
1. 기본 세팅
1. Asset에 이미지 파일 추가
설명은 생략한다.
그냥 드래그 앤 드롭으로 끝.
2. 이미지 로드
1
2
3
4
5
6
7
struct ContentView: View {
var body: some View {
Image("image-1")
.resizable()
.scaledToFit()
}
}
이렇게 파일 명만 적어도 로드가 된다.
작동 사진은 생략.
3. CardView 생성
새로운 SwiftUI File을 만들고 image 관련코드를 넣어준다.
LinearGradient를 사용하여 그라데이션 효과를 줄 수 있다.
Extension으로 오타 방지
1
2
3
4
5
6
7
8
9
extension Color {
static let customGreenLight = Color("ColorGreenLight")
static let customGreenMedium = Color("ColorGreenMedium")
static let customGreenDark = Color("ColorGreenDark")
static let customGrayLight = Color("ColorGrayLight")
static let customGrayMedium = Color("ColorGrayMedium")
static let customIndigoMedium = Color("ColorIndigoMedium")
static let customSalmonLight = Color("ColorSalmonLight")
}
Asset에 추가한 색을 사용하는데 문자열로 이렇게 입력하다보면 오타가 날 수 있다.
Extension을 활용하여 오타를 방지한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
struct CustomBackgroundView: View {
var body: some View {
ZStack {
// MARK: - 3. Depth
Color.customGreenDark
.cornerRadius(40)
.offset(y: 12)
// MARK: - 2. Light
Color.customGrayLight
.cornerRadius(40)
.offset(y: 3)
.opacity(0.85)
// MARK: - 1. Surface
LinearGradient(
colors: [
.customGreenLight,
.customGreenMedium],
startPoint: .top,
endPoint: .bottom
)
.cornerRadius(40)
}
}
}
사용 예시
3. HeaderView 생성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
struct CardView: View {
var body: some View {
ZStack {
CustomBackgroundView()
VStack {
// MARK: - Header
VStack(alignment: .leading) {
HStack {
Text("Hiking")
.fontWeight(.black)
.font(.system(size: 52))
.foregroundStyle(
LinearGradient(colors: [
.customGrayLight,
.customGrayMedium],
startPoint: .top,
endPoint: .bottom)
)
Button {
// Action: Show a Sheet
print("The button was pressed")
} label: {
Text("Button")
}
}
Text("Fun and enjoyable outdoor activity for friends and families")
.multilineTextAlignment(.leading)
.italic()
.foregroundColor(.customGrayMedium)
} //: Header
.padding(.horizontal, 30)
// MARK: - Main content
ZStack {
Circle()
.fill(
LinearGradient(
colors: [
Color("ColorIndigoMedium"),
Color("ColorSalmonLight")
],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
.frame(width: 256, height: 256)
Image("image-1")
.resizable()
.scaledToFit()
}
// MARK: - Footer
} //: Vstack
} //: Card
.frame(width: 320, height: 570)
}
}
크게 언급할만한 부분은 없어보인다.
포인트는 어떤 UIComponent에서 특정 StackView를 상위로 할때는 Embed하면 된다는 것.
즉
이렇게 우클릭을 해서 Embedded 하여 Stack을 계속 쌓아가면 된다.
4. Button Design
새로운 ButtonView를 하나 만들어준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
struct CustomButtonView: View {
var body: some View {
ZStack {
Circle()
.fill(
LinearGradient(
colors: [
.white,
.customGreenLight,
.customGreenMedium],
startPoint: .top,
endPoint: .bottom)
)
Circle()
.stroke(
LinearGradient(
colors: [
.customGrayLight,
.customGrayMedium],
startPoint: .top,
endPoint: .bottom),
lineWidth: 4
)
Image(systemName: "figure.hiking")
.fontWeight(.black)
.font(.system(size: 30))
.foregroundStyle(
LinearGradient(
colors: [
.customGrayLight,
.customGrayMedium
],
startPoint: .top,
endPoint: .bottom)
)
} //: Zstack
.frame(width: 58, height: 58)
}
}
크게 언급할만한 내용은 없다 단지 보통 우리가 icon을 추가하려고할때 SF Symbol을 사용하는데
간단하게 할 수 있는 방법이 있다.
유용하게 쓰일듯
이렇게 디자인한 버튼뷰를 적용할때는 Button의 Label에 하면 된다.
1
2
3
4
5
6
Button {
// Action: Show a Sheet
print("The button was pressed")
} label: {
CustomButtonView()
}
적용완료.
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.