14일 만에 아이폰 앱 만들기 챌린지(10) - SwiftUI Buttons

14일 만에 아이폰 앱 만들기 챌린지(10) - SwiftUI Buttons

xcode에서 새 프로젝트를 실행 하도록 하자.

새 프로젝트 시작

ContentView의 body 안의 내용을 지워보자.  그리고 그 안에 Button이라고 입력하고 왼 괄호까지 입력해보자. 그럼 다음과 같은 auto complete기능이 실행될 것이다.

Button의 auto complete

 

instance는 어떠한 데이터를 주는가에 따라 달라진다. 그 중 우리는 먼저 title과 action이 있는 button을 만들어보자. title은 버튼의 label로 사용되며, action은 버튼이 눌러졌을 때 실행되는 기능이 들어가게 된다.

action parmeter의 타입을 살펴보면 처음 보는 것임을 알 수 있다. ( () -> Void) 설명하자면 아무것도 return하지 않는 이름 없는 함수 형태라 보면 된다. 이름 없는 함수는 클로저closure라고 부른다.

 

자, 이제 title은 "Click Me", action은 Hello World를 출력하도록 하겠다. 다음 코드를 보도록 하자,

struct ContentView: View {
    var body: some View {
        Button("Click me", action : {
            print("Hello World")
        })
    }
}

 

그리고 시뮬레이이션을 켜보도록 하자.

아이폰 시뮬레이터

 

그리고 xcode의 하단에 콘솔 창을 켜고, 시뮬레이터 상의  버튼을 클릭하면 Hello World가 출력되는 것을 볼 수 있다.

 

Hello World를 출력하는 버튼

 

 

다른 방법으로 버튼을 만들어보도록 하자. trailing closure라는 것을 이용하는 것인데 클로저에 대해서 다음에 한 번 정리해서 올리도록 하겠다. 일단 다음 코드를 보도록 하자.

 

// Button instance with trailing closure
Button("Click me"){
	print("Hello World")
}

마지막 인자로 받는 클로저는 괄호 안에 넣지 않고 ("Click me") 뒤에 입력해서 버튼을 만들 수 있다.

 

다음은 세 번째 방법이다. Button의 auto complete 메뉴를 다시 보도록 하자.

action은 클로저 형태로 받는다. label은 View를 return 하도록 하면 되는데 이 View가 UIButton이 될 것이다.

 

애플에서 제공하는 무료 심볼이 있다.

developer.apple.com/sf-symbols/

Apple Developer

위 페이지서 심볼을 다운로드하여 설치하자.

 

그리고 버튼의 label에 View를 넣어보자.

// Button instance with label view
Button(action: {
   print("Hello World")
}, label: {
    HStack{
        Image(systemName: "pencil")
        Text("Edit")
    }
})

 HStack을 label에 넣어준 것을 볼 수 있다. Image에 pencil이란 값은 symbol의 고유 이름이다. 이제 버튼 세 개를 넣고 시뮬레이션을 돌려보자.

버튼 세개가 표시되고 누를 때마다 텍스트 값이 출력되는 것을 볼 수 있다.

 

예전에 만든 카드게임 UI 기억나시는가.

mangsang.tistory.com/30

14일 만에 아이폰 앱 만들기 챌린지(5) - Card Game UI 만들기

그 프로젝트 파일을 다시 열어보자.

 

예전에 버튼을 몰라서 이미지가 넣었던 것을 버튼으로 만들 차례이다.

저 부분을 버튼으로 만들어보자

 

한번 스스로 해볼 것을 권장한다.

 

 

버튼에 대해서 내용을 제대로 숙지했다면 그렇게 어려운 일이 아니었을 것이다.

다음과 같이 난 변경했다.

Button(action: {print("deal")}, label: {
     Image("dealbutton")
 })

 

디자인상으로는 달라진 것이 없지만 시뮬레이션을 켜거나 canvas에서 라이브 preview모드로  보면 버튼을 터치할 수 있을 것이다.

 

지금까지 버튼을 만드는 법을 알아보았고, 클로저에 대해서도 알아보았다. 그리고 Trailing Colsuer에 대해서도 알아보았다. 오늘은 여기까지 끝!