[iOS 앱 개발 기초] 버튼 클릭으로 팝업창 띄우기

raywenderlich Your First iOS and SwiftUI App part 1 학습 내용 정리

 

- 스크린에 버튼 만들기

 _버튼 스크린 위에 놓기, 버튼 색깔 선정

-버튼 누르면 콘솔 창에 결과 값 출력으로 작동 확인하기

-버튼 누르면 스크린에 팝업창 뜨게 하기

  _팝업창 제목, 팝업창 내용, 팝업창 닫힘 버튼 내용 채우기

---

1. 스크린 위에 버튼 만들기

화면의 오른쪽 상단의 + 표시가 된 버튼을 클릭하면 캔버스 에디터(여러 오브젝트들을 추가하고 정렬하는 등 캔버스를 조정할 수 있는 도구들이 담겨 있는 일종의 팔레트)가 띄워진다. 

목록을 스크롤하며 원하는 것을 찾을 수도 있고 Views라고 쓰여있는 검색창을 활용하여 직접 찾아낼 수도 있다.

 

버튼을 놓기 위해선 버튼이라고 쓰여있는 것을 선택하고 드래그하여 캔버스 위에 둔다. (원하는 도구를 선택하면 우측에 이에 관한 설명이 제시된다.)

캔버스 위에 둘 때 이미 다른 오브젝트가 있을 경우 파란색 선이 생겨 그 위에 둘 것인지 아래에 둘 것인지 등 명확하게 눈으로 확인하며 위치를 조절할 수 있다.(더 자세한 배치 방법은 이후에 padding과 함께 다룬다.

 

버튼을 두고 이 글 초반 부분에서 배운 시뮬레이션 실행 버튼을 눌러 다음 사진과 같이 버튼이 잘 생성되었음을 확인할 수 있다.

하지만 캔버스 위에 버튼의 형태를 놓았을 뿐 아직 어떠한 코드 수정을 하지 않았기에 버튼을 클릭하여도 아무 변화가 일어나지 않는다.

버튼의 글자 내용, 굵기, 색상, 정렬은 이전 글인 '스크린 위 글씨(텍스트) 속성 변경하기'에서 다룬 방법 세 가지 방법 중 자신에게 편한 한 가지 방법 그대로 행하여 변경하면 된다. 

---

2. 버튼 누르면 콘솔 창에 결과 값 출력으로 작동 확인하기

 

이제 버튼을 클릭하였을 때 변화가 일어나도록 만들 차례이다.

Button(action: Action) {Content}의 Action과 Content 부분을 채울 것이다.

 

Action 자리에는 말 그대로 button이 어떤 액션을 취할 것인지에 대해 명령하는 부분으로 Action 자리에 중괄호를 넣고 코드를 작성하면 된다. 지금 경우 콘솔 창에 글자를 출력하도록 만들 것이기에

print("(콘솔에 프린트할 내용)")라는 코드를 쓴다. 이 경우 Button pressed를 출력할 것이기에 print("Button pressed.")라고 작성하였다.

 

그리고 시뮬레이션 실행 버튼을 부르고 버튼을 세 번 누른 뒤 다시 코드 화면으로 돌아오면

화면 아래 콘솔창에 Button pressed가 세 번 출력된 것을 확인할 수 있다.

 

콘솔창에 출력하는 것은 실제 앱을 실행했을 때는 사용자에게 변화가 나타나지 않으며 코딩하는 동안에만 확인할 수 있는 기능이다.

이는 데이터 연산이나 여러 단계를 거치는 복잡한 코드들을 점검할 때, 버그를 찾을 때 사용하는 방법이다. 

이 경우 버튼을 누르면 이후 어떤 변화가 일어나도록 하는 기능이 잘 수행될 것임을 확인할 수 있는 것이다.

---

3. 버튼 누르면 스크린에 팝업창 뜨게 하기

struct 안에, body 밖에 @State var alertIsVisible : Bool = false를 쓴다.

(Boolean 타입의 alertIsVisible이라는 이름인 변수를 선언하고 그 값을 false로 지정한다.)

그리고 Button의 Action 부분에 self.alertIsVIsible =true 라고 쓴다.

콘솔 창에 Button Pressed를 출력하는 것과 더불어 alertIsVisible이라는 변수의 값을 false에서 true로 바꾸는 일도 시키는 것이다.

 

변수 이름 앞의 self.은 이 경우 쓰지 않아도 정상 작동한다. 그럼에도 불구하고 이를 붙인 이유는 있다. 그 내용은 이후 복잡한 코드를 다루게 되었을 때 정리하겠다.

 

글의 위 부분에서 Button의 Action과 Content를 언급했지만 지금까지 Action 부분만 채웠다.

이제 Content 부분에 Text("(버튼 위에 표시되었으면 하는 글자 내용)")을 입력한다. 

이를 수정하는 방법은 이외에도 저번 글에서 언급한 방법대로 캔버스 상에서 수정하는 방법 또한 있다. 

방금 소개한 방법은 캔버스의 오브젝트에 표현되는 글자 내용을 바꿀 수 있는 여러 방법 중 두 번째 방법을 소개한 것이다.

 

이제 Button에 해당하는 중괄호에서 벗어나 다음 줄에 .alert(isPresented: $alertIsVisible) { ()->Alert}를 입력한다.

.alert(isPresented: ){ () -> Alert}은 이미 알려진 함수의 한 형태로 외워 쓰는 코드이다.

(캔버스의 텍스트와 버튼의 속성 중 글자를 바꾸기 위해 Text("")를 외워 쓰는 것과 같은 맥락이다.)

 

.alert(isPresented: ☆)의 ☆ 자리에는 true 혹은 false를 입력하는 칸이다.

true라면 alert 즉 팝업 창을 띄우는 것이고 false라면 팝업창을 띄우지 않는 것이다.

나는 항상 팝업창이 뜨거나 혹은 항상 뜨지 않게 정하는 것이 아니라

버튼이 눌렸을 때만 팝업창이 띄워지도록 하는 게 목표이기에 true와 false 값이 변할 수 있는 변수 alertIsVisible을 선언한 것이며 ☆ 자리에 이를 넣은 것이다. 이때 이 변수의 값을 받는다는 의미에서 변수 이름과 함께 앞에 $를 써줘야 한다. 

 

 초기값을 false로 지정함으로서 버튼이 눌리지 않았을 땐 false가 ☆ 자리에 들어가기에 팝업창이 뜨지 않는 것이고

버튼을 눌러 true 값으로 바꿔주었을 때만 true가 ☆자리에 들어와 팝업창이 뜨게 되는 것이다. 

 

그 옆의 () ->Alert 는 이후 다른 형태가 나왔을 때 이들의 역할에 대해 정리하겠다.

in return 뒤에는 이제 ☆자리에 true가 들어왔을 때 무엇을 반환할 지에 대한 코드를 작성하면 된다. 긴 코드이지만 모두 옮겨 적는 것이 아니라 in return Alert (라고 쓰면 위 사진들처럼 선택지가 나온다. 그 중 title, message, dismissButton에 대해 입력할 수 있는 것을 선택한다. (자신이 원하는 타입에 맞게 선택하면 된다.)

선택하면 위 사진과 같이 형태가 모두 입력되고 Text, Alert.Button 부분에만 원하는 글자를 입력하면 된다. 

-Title: 팝업창에 뜨는 큰 제목

-message: 팝업창의 큰 제목 아래 뜨는 설명/세부 내용

이 둘은 모두 이전에 텍스트와 버튼에 표시되는 글자를 정해온 방법과 똑같이 Text("") 형식에 맞춰 ""안에 원하는 텍스트를 작성하면 된다.

 

-dismissButton: 팝업창을 닫을 때 누르는 버튼에 뜨는 글자의 내용을 무엇을 할 것인지 정하는 것이다. 

형태는 .default(Text(""))형태에 맞춰 작성하면 된다.

 

이제 resume 버튼과 시뮬레이션 툴 실행 버튼을 누르면 각각의 방법으로 제대로 작동하는지 확인할 수 있다. 

시뮬레이션 툴을 이용해 버튼을 눌러 팝업창의 결과를 확인한 사진이다. 

---

 

1. 스크린에 버튼 만들기☑️

 _버튼 스크린 위에 놓기, 버튼 색깔 선정☑️

2. 버튼 누르면 콘솔 창에 결과 값 출력으로 작동 확인하기☑️

 3. 버튼 누르면 스크린에 팝업창 뜨게 하기☑️

  _팝업창 제목, 팝업창 내용, 팝업창 닫힘 버튼 내용 채우기☑️