알림창 커스터마이징 (Customizing AlertController) - II
이번에는 조금 더 깊게 알림창을 다루어 보자.
우선 아래 동영상과 같이 mainView에 알림창에 tableView를 띄우고 tableView에서 이름을 추가하고 임의의 이름이 있는 cell을 선택 후 ok를 클릭하면 mainView에 선택된 이름이 나타나게 하자.
이전 알림창 커스터마이징에서 storyboard를 이용해서 진행하도록 하겠다.
- 순서 -
1. ViewController 생성 (Button / outlet)
2. UIAlertController 구현 및 UIViewController 추가
3. AlertView에 tableView 등록하기 (storyboard 이용함)
4. TableView에 이름을 추가하는 alertView를 생성하자.
5. TableAlertViewController와 ViewController와의 data 연결
-------
1. ViewController 생성 (Button / outlet)

nameLabel과 이름선택 button을 생성하고 viewController에 연결해 준다.
2. UIAlertController 구현 및 UIViewController 추가
buttonClicked(_sender:)에 다음과 같이 code를 작성한다.

알림창 커스터마이징(Custom AlertController) - I 에서 진행한 내용과 동일하다.
알림창 생성 및 contentView를 setValue(_:forKey:) methode로 알림창에 등록 하였다. contentView는 전체 높이의 2/3이 되게 설정하였다.
먼저 storyboard에 View Controller를 추가하고 Table View와 Navigation Bar 및 Navigation Item("+" icon)을 아래 그림과 같이 추가한다. tableViewCell의 identifier는 "cell"로 지정해 주었다.
그리고 나서 UIViewController swift 파일을 하나 생성하고 storyboard에서 만든 view controller와 연결해 준다. 여기서 UIViewController의 이름은 TableAlertViewController로 명명하였다.
그리고 table view는 alertTableView로 @IBOutlet 연결하였고, "+" 아이콘은 addButtonClicked로 @IBAction 연결 하였다. 추가로 tableViewCell에 나타날 이름 목록을 저장하기 위해 name 변수를 설정해 주었다. 아래와 같이 되었다.

여기서 물론 storyboard에서 tableView의 dataSource와 delegate 연결을 해 주었다.
이때 main화면의 UIViewController class에 TableAlertViewController class를 등록하기 위해 다음과 같이 contentView를 등록하기 위한 code를 수정하였다. 이전에 storyboard에서 tableView의 Storyboard ID에 "tableAlert"으로 설정해 주었다.

실행하면 다음과 같다.
4. TableView에 이름을 추가하는 alertView를 생성하자.

앞에서와 같이 커스트마이징된 alertView를 생성한다. 이때 UITextField를 등록하였다.
. UIAlertController 생성 - 앞선 내용과 동일하다.
. contentView로 UITextField를 생성 - contentView를 이번에는 UITextField로 만들었다.
. alertView에 ok/cancel action 등록 - 이때 ok를 눌렀을 때는 변수 name array에 textField에 있는 string을 추가할 수 있도록 하고 tableView에 나타나게 하였다.
. alertView에 contentView 등록 - 앞선 내용과 동일하다.
이렇게 하여 alertView에서 또다른 alertView가 나타나도록 설정 하였다.
tableView에서 이름 항목을 선택하면 ViewController에서 label이 선택된 이름으로 변경되게 하여야 한다. 이렇게 하기 위해서 TableAlertViewController에는 다음을 추가 하고

ViewController에는 다음처럼 code를 추가한다.

물론 delegate라는 이름으로 변수를 설정하지 않아도 되지만 이런 기능을 나타낼 때는 delegate라고 명명하는게 code를 해석하기 쉽다.
data는 TableAlertViewController에서 생성되었지만 이 data를 이용하는건 ViewController이므로 TableAlertViewController에서는 delegate 선언을, ViewController에서는 'contentView.delegate = self' 로 자신을 그 delegate와 연결해 준다.]
아래는 전체 code를 보여준다.

우선 아래 동영상과 같이 mainView에 알림창에 tableView를 띄우고 tableView에서 이름을 추가하고 임의의 이름이 있는 cell을 선택 후 ok를 클릭하면 mainView에 선택된 이름이 나타나게 하자.
이전 알림창 커스터마이징에서 storyboard를 이용해서 진행하도록 하겠다.
- 순서 -
1. ViewController 생성 (Button / outlet)
2. UIAlertController 구현 및 UIViewController 추가
3. AlertView에 tableView 등록하기 (storyboard 이용함)
4. TableView에 이름을 추가하는 alertView를 생성하자.
5. TableAlertViewController와 ViewController와의 data 연결
-------
1. ViewController 생성 (Button / outlet)

nameLabel과 이름선택 button을 생성하고 viewController에 연결해 준다.
2. UIAlertController 구현 및 UIViewController 추가
buttonClicked(_sender:)에 다음과 같이 code를 작성한다.

알림창 커스터마이징(Custom AlertController) - I 에서 진행한 내용과 동일하다.
알림창 생성 및 contentView를 setValue(_:forKey:) methode로 알림창에 등록 하였다. contentView는 전체 높이의 2/3이 되게 설정하였다.
<실행 화면>
3. AlertView에 tableView 등록하기 (storyboard 이용함)먼저 storyboard에 View Controller를 추가하고 Table View와 Navigation Bar 및 Navigation Item("+" icon)을 아래 그림과 같이 추가한다. tableViewCell의 identifier는 "cell"로 지정해 주었다.
그리고 나서 UIViewController swift 파일을 하나 생성하고 storyboard에서 만든 view controller와 연결해 준다. 여기서 UIViewController의 이름은 TableAlertViewController로 명명하였다.
그리고 table view는 alertTableView로 @IBOutlet 연결하였고, "+" 아이콘은 addButtonClicked로 @IBAction 연결 하였다. 추가로 tableViewCell에 나타날 이름 목록을 저장하기 위해 name 변수를 설정해 주었다. 아래와 같이 되었다.

여기서 물론 storyboard에서 tableView의 dataSource와 delegate 연결을 해 주었다.
이때 main화면의 UIViewController class에 TableAlertViewController class를 등록하기 위해 다음과 같이 contentView를 등록하기 위한 code를 수정하였다. 이전에 storyboard에서 tableView의 Storyboard ID에 "tableAlert"으로 설정해 주었다.

실행하면 다음과 같다.
<실행 화면>
4. TableView에 이름을 추가하는 alertView를 생성하자.

앞에서와 같이 커스트마이징된 alertView를 생성한다. 이때 UITextField를 등록하였다.
. UIAlertController 생성 - 앞선 내용과 동일하다.
. contentView로 UITextField를 생성 - contentView를 이번에는 UITextField로 만들었다.
. alertView에 ok/cancel action 등록 - 이때 ok를 눌렀을 때는 변수 name array에 textField에 있는 string을 추가할 수 있도록 하고 tableView에 나타나게 하였다.
. alertView에 contentView 등록 - 앞선 내용과 동일하다.
이렇게 하여 alertView에서 또다른 alertView가 나타나도록 설정 하였다.
<실행 화면>
5. TableAlertViewController와 ViewController와의 data 연결tableView에서 이름 항목을 선택하면 ViewController에서 label이 선택된 이름으로 변경되게 하여야 한다. 이렇게 하기 위해서 TableAlertViewController에는 다음을 추가 하고

ViewController에는 다음처럼 code를 추가한다.


물론 delegate라는 이름으로 변수를 설정하지 않아도 되지만 이런 기능을 나타낼 때는 delegate라고 명명하는게 code를 해석하기 쉽다.
data는 TableAlertViewController에서 생성되었지만 이 data를 이용하는건 ViewController이므로 TableAlertViewController에서는 delegate 선언을, ViewController에서는 'contentView.delegate = self' 로 자신을 그 delegate와 연결해 준다.]
아래는 전체 code를 보여준다.


댓글
댓글 쓰기