iOS : SwiftUI 프로젝트 생성 (기초)

SwiftUI 를 활용한 iOS 앱 프로젝트를 생성하는 단계를 정리해보려고 해.

아래 URL 을 참고한 아주 기초적인 내용의 프로젝트야.

참고: https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

Choose a template for your new project: iOS – App

Choose options for your new project:

Interface: SwiftUI
Language: Swift

앱 메인 파일 : iosdiaryApp.swift

//
//  iosdiaryApp.swift
//  iosdiary
//
//  Created by woohaha on 2024/04/17.
//

import SwiftUI

@main
struct iosdiaryApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

@main 은 앱의 진입점을 의미

main App 에서 참조하는 뷰 : ContentView.swift

//
//  ContentView.swift
//  iosdiary
//
//  Created by woohaha on 2024/04/17.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

ContentView 의 미리보기 : #Preview

Live mode 에서는 코드에 구현된 뷰의 미리보기가 가능

Selectable mode 에서는 배치된 컴포넌트의 속성 설정이 가능

Command+Control 을 누른 상태에서 컴포넌트를 클릭하면 해당 컴포넌트에 대한 Inspector 를 볼 수 있다.

편집기에서 Ctrl 키와 함께 선언을 클릭하고 “Show SwiftUI Inspector…” 를 선택하면 코드뷰에서 인스펙터 팝업메뉴를 볼 수 있다.

VStack, HStack, Spacer

struct ContentView: View {
    var body: some View {
		VStack(alignment: .leading) {
			Text("Turtle Rock")
				.font(.title)
			HStack {
				Text("Joshua Tree National Park")
					.font(.subheadline)
				Spacer()
				Text("California")
					.font(.subheadline)
			}
        }
		.padding()
    }
}

뷰의 중첩

신규 뷰 생성

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Text("Hello, World!")
    }
}

#Preview {
    CircleImage()
}

Text 컴포넌트 지우고 Image 컴포넌트 추가

import SwiftUI

struct CircleImage: View {
    var body: some View {
	Image("turtlerock")
    }
}

#Preview {
    CircleImage()
}

turtlerock 은 Asset 에 추가해둔 이미지 리소스 이름

ContentView 에 CircleImage 뷰를 추가

import SwiftUI

struct ContentView: View {
    var body: some View {
		VStack(alignment: .leading) {
			CircleImage()

			Text("Turtle Rock")
				.font(.title)
			HStack {
				Text("Joshua Tree National Park")
					.font(.subheadline)
				Spacer()
				Text("California")
					.font(.subheadline)
			}
        }
		.padding()
    }
}

#Preview {
    ContentView()
}

글꼴 수정자의 이동

이동 전

			HStack {
				Text("Joshua Tree National Park")
					.font(.subheadline)
				Spacer()
				Text("California")
					.font(.subheadline)
			}

이동 후

			HStack {
				Text("Joshua Tree National Park")
				Spacer()
				Text("California")
			}
			.font(.subheadline)