[SwiftUI] UI를 수정할 수 있는 방법 3가지 정리

스위프트UI 프레임워크에서 UI를 수정하는 방법에 대한 정리입니다.

UI 수정 방법

1. 코드상에서 직접 입력하는 방법

• [SwiftUI] ContentView 란 녀석의 특징 및 메서드 체이닝이란?

2. 라이브러리(Library)를 이용하는 방법

3. 인스펙터(Inspector)를 이용하는 방법

라이브러리(Library)를 이용하는 방법

1. Xcode툴바에서 열십자(+) 모양의 Library버튼을 클릭하면 다음과 같이 라이브러리 팝업창이 나타남( 단축키 : Shift + Command + L )

• Xcode 11 이상 부터는 View(뷰)와 수식어, 스니펫, 미디어, 컬러와 관련 항목 라이브러리를 모아 볼 수 있도록 구현된 팝업을 제공함.

하나씩 살펴보죠. 라이브러리 팝업창 상단 오른쪽에 상세보기 버튼을 클릭하면 자세한 정보를 볼 수 있도록 제공하고 있어요

<미디어 팝업창>

2. 2번째 아이콘을 눌러서 수식어(Modifier) 라이브러리를 선택 후 검색창에 “weight”를 검색하면 Font Weight가 검색이 됨

3. Font Weight를 선택 후 엔터키를 치거나 마우스 더블 클릭 또는 마우스 드래그하여 코드를 추가할 수 있음.

• 커서가 위치한 곳에 코드가 추가됨을 확인 할 수 있습니다.

4. 프리뷰에 위로 드래그하여 적용할 수 도 있음

[팁] 라이브러리창을 계속 띄워놓는 방법

• Option키를 누른 상태에서 라이브러리 버튼을 클릭

인스펙터(Inspector)를 이용하는 방법

스토리보드에서 활용하던 방식과 비슷해요.

1. Xcode 툴바에서 인스펙터 아이콘 버튼을 클릭합니다.

2. 마우스 커서를 텍스트 수식어를 클릭 또는 프리뷰에서 텍스트를 크릭하면 텍스트에 대한 속성을 변경할 수 있는 목록이 나타납니다.

3. Text 위에 마우스 커서를 올린 후 Command 키를 누른 상태에서 클릭하면 액션 메뉴가 나타남

4. Show SwiftUI Inspector 메뉴 항목을 선택

5. Control + Option 키를 누른 상태에서 클릭하면 “Show SwiftUI Inspector 팝업창이 나타남.

지금까지 테스트 코딩 샘플코드

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("GOGOn where?")
        + Text("seoul").bold()
        
        VStack {
            Text("Hello, SwiftUI world!")
                .font(.title)
                .multilineTextAlignment(.center)
                .lineLimit(0)
                .padding()
                .foregroundColor(.green)
            HStack {
                Text(/*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/).italic()
                Spacer()
                Text("Merong~~~")
                    .fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
.previewInterfaceOrientation(.portrait)
            ContentView()
        }
    }
}

위 포스팅 내용들은 “스윗한 SwiftUI(이봉원 지음)” 전자책을 보고 스터디 및 실습한 내용들을 기록하였습니다.