ContentVeiw - 메인화면 디자인을 해주자
NavigationView 안에 ZStack 추가
ZStack { //배경 색 설정
LinearGradient( // LinearGradient 사용
gradient: Gradient(colors: [Color.white, Color.purple]), // 그라데이션 색상
startPoint: .topLeading, // 그라데이션 시작점
endPoint: .bottomTrailing // 그라데이션 끝점
)
.edgesIgnoringSafeArea(.all)
ZStack - 뷰를 겹쳐 쌓는 데 사용하는 레이아웃 ( 배경, 중앙 콘텐츠, 맨 위 요소 등)
LinearGradient - 그라데이션 배경을 만들 때 사용하는 뷰 (선형적으로 색상 변환)
.edgesIgnoringSafeArea(.all) - Swift에서 뷰의 배경 또는 콘텐츠가 안전 영역(Safe area)을 무시하고 화면 전체 영역을 덮도록 설정
CustomNavigationButton 컴포넌트 추가
VStack(spacing: 50) {
// 첫 번째 버튼
CustomNavigationButton(
text: "부산대 ➜ 밀양역",
iconName: "tram.fill",
colors: [Color.blue, Color.purple],
destination: MYS_Dir()
)
// 두 번째 버튼
CustomNavigationButton(
text: "밀양역 ➜ 부산대",
iconName: "graduationcap",
colors: [Color.purple, Color.blue],
destination: PNU_Dir()
)
}
.padding()
.navigationTitle("INOUTY")
.navigationBarTitleDisplayMode(.inline)
.navigationTitle("INOUTY") - 네비게이션 타이틀 INOUTY
.navigationBarTitleDisplayMode(.inline) - 네비게이션 바 제목을 작은 제목으로 표시
.automatic - 기본 동작 / .large - 큰 제목
< CustomNavigationButton >
struct CustomNavigationButton<Destination: View>: View {
let text: String
let iconName: String
let colors: [Color]
let destination: Destination
var body: some View {
NavigationLink(destination: destination) {
HStack {
Text(text)
.font(.system(size: 24))
.fontWeight(.semibold)
Image(systemName: iconName)
.font(.system(size: 24))
}
.frame(width: 300, height: 80)
.background(
LinearGradient(
gradient: Gradient(colors: colors),
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
.foregroundColor(.white)
.cornerRadius(15)
.shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 5)
}
}
}
HStack - 수평으로 뷰를 정렬하는 컨테이너
Image(systemName: iconName) - 버스 아이콘 추가
< 전체 코드 >
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
ZStack {
// 배경 그라데이션
LinearGradient(
gradient: Gradient(colors: [Color.white, Color.purple]),
startPoint: .topLeading,
endPoint: .bottomTrailing
)
.edgesIgnoringSafeArea(.all)
VStack(spacing: 50) {
// 첫 번째 버튼
CustomNavigationButton(
text: "부산대 ➜ 밀양역",
iconName: "tram.fill",
colors: [Color.blue, Color.purple],
destination: MYS_Dir()
)
// 두 번째 버튼
CustomNavigationButton(
text: "밀양역 ➜ 부산대",
iconName: "graduationcap",
colors: [Color.purple, Color.blue],
destination: PNU_Dir()
)
}
.padding()
.navigationTitle("INOUTY")
.navigationBarTitleDisplayMode(.inline)
}
}
}
}
// 공통 버튼 컴포넌트
struct CustomNavigationButton<Destination: View>: View {
let text: String
let iconName: String
let colors: [Color]
let destination: Destination
var body: some View {
NavigationLink(destination: destination) {
HStack {
Text(text)
.font(.system(size: 24))
.fontWeight(.semibold)
Image(systemName: iconName)
.font(.system(size: 24))
}
.frame(width: 300, height: 80)
.background(
LinearGradient(
gradient: Gradient(colors: colors),
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
.foregroundColor(.white)
.cornerRadius(15)
.shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 5)
}
}
}
'Projects > Swift' 카테고리의 다른 글
Swift :: 버스시간표 앱을 만들기 - 완성본 (0) | 2025.02.16 |
---|---|
Swift :: 버스시간표 앱을 만들기 - 5 [ 스플래시 화면 ] (0) | 2024.12.12 |
Swift :: 버스시간표 앱을 만들기 - 3 [ 데이터 추가 ] (2) | 2024.12.03 |
Swift :: 버스시간표 앱을 만들기 - 2 [ 선택창 추가 ] (0) | 2024.12.03 |
(Tip💡)Swift - 파일 이름 변경하기 (0) | 2024.11.28 |