view Controller 전환과 Controller 사이에 데이터를 전달하는 방식을
적용하여 LEDBoard라는 기초 프로젝트를 실습했다.
프로젝트 내용은 설정 탭에서 텍스트와 텍스트 색상, 배경 색상을
지정하면 root View Conorller에 원하는 내용을 적용하는 방식이다.
이전에 포스팅한 controller 간의 화면 전환과 데이터 전달 방식을 사용한다.
Main View Controller
새로운 프로젝트를 생성하고, 뷰 컨트롤러에 요소를 추가한다.
navigation controller에 root view controller를 연결하고 Setting view controller와 연결한다.
색상을 선택하는 탭에 이미지를 적용해야 하는데, swift에서는 이미지 적용을 에셋 카탈로그에서 진행한다.
에셋 카탈로그에 원하는 이미지를 추가하고 이름을 지정하면 된다.
1x, 2x, 3x 이미지파일을 준비해야 하며, 각각 24픽셀, 48픽셀, 72필셀 사이즈를 담당한다.
기기에 따라서 이미지 크기가 커질 경우 픽셀이 깨지는 현상을 방지하기 위해서 여러 이미지 사이즈를 준비한다.
위와 같이 이미지를 추가하면, 스토리보드에서 뷰에 해당 이미지를 적용할 수 있다.
색상을 적용할 뷰를 클릭하고 attributes 탭에서 image를 적용한다.
이제 뷰에 대한 준비를 끝냈으니, 클릭 이벤트에 관한 속성을 지정해야 한다.
main view controller에서 setting view controller로 화면을 전환하기 위한 코드를 작성한다.
메인 화면에서 설정 버튼을 클릭 시 세팅 뷰로 이동해야 하므로 메인 뷰에서 assistant 창을 연다.
이전에 배운 segue를 통한 화면 전환을 위해서 settingViewController를 인스턴트화 한다.
전환 후 데이터 전달을 위해 prepare 함수를 오버라이드 한다.
// segue로 화면 전환했기 때문에 prepare 오버라이드 진행
// 함수를 사용하기 위해서 다운케스팅 진행
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if let settingViewController = segue
.destination as? SettingViewController{
settingViewController.delegate
= self
// 현재 설정값을 전달해 주어야 함
settingViewController.ledText = self.contentLabel.text
settingViewController.textColor = self.contentLabel.textColor
settingViewController.backgroundColor = self.view.backgroundColor ?? .black
}
}세팅 컨트롤러의 delegate를 사용하기 위해서 다운 캐스팅을 진행한다.
현재 설정값을 넘겨주어야 변경하지 않은 데이터가 유지되므로 text,textcolor,backgroundcolor 값을 넘겨준다.
backgroundColor의 경우 nil 값이 있을수도 있으므로 nil인 경우 black을 전달해야 오류가 발생하지 않는다.
class ViewController: UIViewController ,LEDBoardSettingDelegateMain View Controller를 선언할 때 LEDBoradSettingDelegate를 위임했다.
이 프로토콜은 다음으로 이동할 setting view controller에서 데이터를 전달받을 때의 처리를 담당한다.
프로토콜을 위임받았으므로 해당 프로토콜의 함수를 사용할 수 있다.
// 위임 받은 함수 사용 -> 전달 받은 데이터 세팅
func changedSetting(text: String?, textColor: UIColor, backgroundColor: UIColor) {
if let text = text {
self.contentLabel.text = text
}
self.contentLabel.textColor = textColor
self.view.backgroundColor = backgroundColor
}
setting view controller로 부터 데이터를 전달받아서 현재 뷰에 적용하큰 changedSetting 함수를 사용했다.
Setting View Controller
이제 setting view controller에 대한 동작을 적용한다.
우선 이전 뷰 컨트롤러로 데이터를 전달하기 위한 프로토콜을 선언한다.
protocol LEDBoardSettingDelegate : AnyObject{
func changedSetting(text:String?,textColor:UIColor,
backgroundColor : UIColor)
}
프로토콜을 위임하기 위한 delegate도 선언하고, 전달할 값을 저장할 변수들을 선언한다.
weak var delegate : LEDBoardSettingDelegate?
var ledText : String?
var textColor : UIColor = .yellow
var backgroundColor : UIColor = .black
이제 각 색상을 나타내는 버튼의 액션함수를 지정해야 하는데,
같은 기능을 하는 버튼들을 하나의 함수로 묶은다음 sender를 통해서 어떤 버튼인지 구분할 수 있다.
하나의 버튼을 assistant로 드래그 후 tabTextColorButton으로 이름을 설정한다.
이 후에 나머지 2개의 버튼을 같은 액션 함수로 드래그하여 같은 기능을 하도록 설정한다.
@IBAction func tabTextColorButton(_ sender: UIButton) {
// 3개의 버튼중에 하나에 대한 액션함수를 지정하고
// 드래그 앤 드롭으로 나머지 버튼을 추가하면
// 모든 버튼에 대한 이벤트 처리를 할 수 있음
// sender를 통해서 버튼을 구분
if sender == self.yButton{
self.changeTextColor(color: .yellow)
self.textColor = .yellow
} else if sender == self.pButton{
self.changeTextColor(color: .purple)
self.textColor = .purple
} else if sender == self.gButton{
self.changeTextColor(color: .green)
self.textColor = .green
}
}위와 같이 액션함수를 지정하면, sender에 따라서 어떤 버튼인지 구분하고 해당하는 기능을 실행한다.
background를 변경하는 버튼도 구현하면, 버튼에 대한 액션 함수의 준비가 끝난다.
@IBAction func tabBackGroundColorButton(_ sender: UIButton) {
if sender == self.bButton{
self.changeBackgroundColorButton(color: .black)
self.backgroundColor = .black
}else if sender == self.blueButton{
self.changeBackgroundColorButton(color: .blue)
self.backgroundColor = .blue
} else if sender == self.oButton{
self.changeBackgroundColorButton(color: .orange)
self.backgroundColor = .orange
}
}
text color 이미지나 back ground 에 설정한 이미지를 클릭할 경우
각각 changeTextColor, changeBackgroundColorButton 함수가 실행된다.
private func changeTextColor(color : UIColor){
// 삼항연산자
// true면 button의 alpha 값을 1
// false면 0.2로 설정
self.yButton.alpha = color == UIColor.yellow ? 1 : 0.2
self.pButton.alpha = color == UIColor.purple ? 1 : 0.2
self.gButton.alpha = color == UIColor.green ? 1 : 0.2
}
private func changeBackgroundColorButton(color : UIColor){
// 삼항연산자
// true면 button의 alpha 값을 1
// false면 0.2로 설정
self.bButton.alpha = color == UIColor.black ? 1 : 0.2
self.blueButton.alpha = color == UIColor.blue ? 1 : 0.2
self.oButton.alpha = color == UIColor.orange ? 1 : 0.2
}
해당 함수는 전달 받은 UIColor를 구분하여 클릭 된 이미지의 알파값을 변경한다.
알파값은 진하기를 나타내며, 클릭된 이미지 버튼을 구분하기 위해서 클릭 된 이미지의 값을 증가시킨다.
버튼에 대한 동작이 완료되었으므로 이전의 설정값을 전달 받는 코드를 작성한다.
미리 설정된 값을 전달 받아서 초기값을 세팅한다.
// 이전의 설정값을 전달 받기 위함
private func configureView(){
if let ledText = self.ledText {
self.textField.text = ledText
}
self.changeTextColor(color: self.textColor)
self.changeBackgroundColorButton(color: self.backgroundColor)
}configureView 함수를 뷰가 로드되었을 때 호출한다.
override func viewDidLoad() {
super.viewDidLoad()
// 전달 받은 값 호출
self.configureView()
}
이전의 데이터를 불러오고, 새로운 데이터를 저장하는 방법을 작성하였다.
마지막으로 저장 버튼을 클릭하였을 때 데이터를 전달하는 방법만 명시하면 된다.
// 저장 버튼을 눌렀을 때 Delegate에서 정의한
// chagedSetting 메서드를 호출
// 파라미터로 설정값이 저장된 프로퍼티를 전달
@IBAction func saveButton(_ sender: UIButton) {
self.delegate?.changedSetting(
text: textField.text,
textColor: textColor,
backgroundColor: backgroundColor)
// 이전 화면으로 이동
self.navigationController?.popViewController(animated: true)
}
저장 버튼을 눌렀을 때 Delegate에서 정의한 changedSetting 메서드를 호출하며,
파라미터로 설정값을 저장된 프로퍼티로 전달한다.
앱을 테스팅 하면 텍스트와 텍스트 색상, 배경 색상을 변경하는 기능을 사용할 수 있다.
기초 프로젝트를 통해서 중요한 기능을 배울수 있었다.