[ Swift UI 강좌 ] 1. 스위프트 iOS - 버튼 이벤트 만들기

스위프트 UI 가 나온지 벌써 1년이 넘어갑니다. 계속 스위프트와 오토레이아웃으로 업무를 하다보니까 배울 시간이 없었는데요. 이제 조금씩 배워보려고합니다. 개인 정리차 오늘 부터 계속 스위프트 UI를 공부하여 블로그에 올려보려고 합니다. 아이폰 개발은 오브젝티브 - C 의 처참한 개발 환경부터 인터페이스 빌더 그리고 오토레이아웃과 스토리보드까지 iOS 개발툴인 Xcode 는 정말 많은 변화가 있었습니다. 정말 빠르게 변하기 때문에 잘 주류를 잘 따라가야 하겠습니다. 

 

오늘은 간단하개 Swift UI 프로젝트를 만들어서 버튼 이벤트를 주는 것 까지 해볼게요.

 

 프로젝트 생성 

 

1. 먼저 프로젝트를 하나 만듭니다. Single View App 프로젝트이며 다음 버튼을 눌러줍니다.

1. Swift UI 프로젝트 생성

---

 

2. SwiftUITest 라고 이름을 만들었습니다. Language(언어)는 당연히 Swift로 선택하고, User Interface는 Swift UI로 선택합니다.

2. Swift UI 프로젝트 설정

---

 

3. 프로젝트가 생성되면 ContentView.swift 라는 파일이 먼저 노출됩니다. 저기서 Resume 버튼을 눌러줍니다.

3. 화면 갱신

---

4. 간단하게 Hello, world! 라는 텍스트가 노출됩니다.

4. Preview 실행

---

 

 배경색 지정 

 

1. Hello, World 텍스트를 지우고 다음 코드를 입력해서 배경색을 채웁니다.

ZStack {
    Color.blue
}

5. 배경색 채우기

---

 

2. 상단 스태이터스 바에도 배경을 채우려면 edgesIgnoringSafeArea .all 옵션을 줘야 합니다.

 

• ZStack의 Color.blue뒤에 구두점(.) 을 입력합니다.
• edegesI.edgesIgnoringSafeArea(.all) 코드만 추가로 붙여줍니다.

ZStack {
    Color.blue.edgesIgnoringSafeArea(.all)
}

6. 스태이터스 바 색상 채우기

---

 

 타이틀 텍스트 만들기 

 

1. 다음 코드를 추가해서 텍스트 필드를 하나 만들어줍니다.

• VStack안에 텍스트를 만듭니다.
• font는 .title 크기의 사이즈입니다.
• padding() 은 텍스트의 여백을 지정합니다. 인자로 값을 넣을 수도 있습니다.
• foregroundColor는 텍스트의 색상을 지정합니다.

VStack {
    Text("SwiftUI")
        .font(.title)
        .padding()
        .foregroundColor(.white)
}

1. VStack 텍스트 추가

---

2. 다음 코드를 클래스 하단에 추가해 버튼 뷰를 만들어보겠습니다.

• View 타입의 struct를 만듭니다.
• title, iconName을 변수로 만듭니다.
• body 변수에 Button을 만듭니다.
• action 클로저가 이벤트 영역입니다. 간단하게 print() 함수를 하나 넣었습니다.
• 위에서 선언한 변수로 이미지와 타이틀을 설정합니다.
• cornerRadius는 버튼의 라운드(R) 값을 지정합니다.
• background에 컬러를 지정합니다.

struct MyButton: View {
    var title: String
    var iconName: String
    
    var body: some View {
        Button(action: {
            print("tapped!")
        }) {
            HStack {
                Image(systemName: iconName)
                    .font(.title)
                Text(title)
                    .fontWeight(.semibold)
                    .font(.title)
            }
            .padding()
            .foregroundColor(.white)
            .background(Color.red)
            .cornerRadius(40)
        }
    }
}

 

3. 이제 버튼을 ZStack 안에 실제 랜더링합니다.

• MyButton 객체를 생성하고 타이틀과 아이콘 값을 넣어줍니다.
• padding으로 여백을 줍니다.

MyButton(title: "Click Me", iconName: "paperplane.circle").padding()

3. 버튼 생성하기

---

4. 마지막으로 Spacer를 이용해서 타이틀과 버튼을 분리합니다.

Spacer()

4. Stack 공간 만들기

---