데이터 전달하면서 화면전환하기
모바일 앱은 최소 단일 화면 하나만으로 구성되어 있는 앱도 있지만 대부분 여러개의 화면이 있다. 때에 따라서는 다음 화면으로 데이터를 넘겨줘야 할 때도 있다. 가장 대표적인 방법은 스토리보드(Storyboard)로 연결된 세그웨이(Segue)를 통해서 데이터를 전달하는 방법이다.
이 예제는 간단하게 각 버튼을 터치했을 때, 다른 화면으로 각기 다른 데이터가 전달되어 표시되는 앱이다.
#목차
- 개발환경
- Xcode 프로젝트에 이미지 넣기
- 스토리보드(Storyboard)에 뷰 컨트롤러 배치하기
- 세그웨이(Segue) 연결하기
- 뷰(View)를 코드와 연결하기
- 코딩1 : 데이터 보내기
- 코딩2 : 데이터 받기
(각 목차를 클릭하면 해당 내용을 바로 볼 수 있습니다.)
개발 환경
언어 : 스위프트 4 (Swift 4)
IDE : Xcode 12.2
Xcode 프로젝트에 이미지 넣기
이미지를 표시하고 싶다면 이미지를 프로젝트에 넣어야 한다. 나는 연예인 3명의 이미지를 보여줄 생각이다. Assets.xcassets 에 이미지를 아래와 같이 넣어주면 된다.
스토리보드(Storyboard)에 뷰 컨트롤러 배치하기
스토리보드(Storyboard)에 두 개의 뷰 컨트롤러를 배치한다. 화살표가 있는 왼쪽 화면이 첫 화면이며 각 버튼을 터치할 때마다 그에 해당하는 연예인의 이름과 이미지가 오른쪽 화면에 나타날 것이다.
각각의 뷰 컨트롤러는 각각의 컨트롤러.swift 파일과 연결된다.
세그웨이(Segue) 연결하기
뷰에서 직접 세그웨이(Segue)를 연결할 수도 있지만 이 예제와 같이 3개의 버튼을 연결해야 한다면, 한번에 연결하는 방법이 있다.
위와 같이 컨트롤(Ctrl) + 드래그로 다른화면을 연결할 수 있다.
이 예제에서는 Present Modaliy 를 선택했다.
그럼 두 화면을 연결하는 화살표가 생기는데, 이 화살표를 클릭해서 인스펙터의 Identifier 의 이름을 설정한다. 이제 각 버튼들은 이 화살표를 통해서, 이 Identifier를 통해서 분기처리하게 된다.
뷰(View)를 코드와 연결하기
각 버튼의 터치 이벤트를 담당할 함수를 만든다. 연결된 컨트롤러.swift에 컨트롤(Ctrl) + 마우스 드래그로 만들 수 있다.
이 예제에서는 3개의 버튼을 만들었기 때문에 총 3개의 함수를 만들어 주었다.
코딩1 : 데이터 보내기
버튼이 있는 첫 번째 컨트롤러.swift를 열어 아래와 같이 작성했다. performSegue(withIdentifier: String, sender: Any)는 세그웨이(Segue)로 연결된 뷰 컨트롤러(View Controller) 를 호출하겠다는 의미다. 이때, 센더(sender)의 값으로 데이터를 넘겨준다.
/* ViewController.swift */
class ViewController: UIViewController {
//이미지 파일명과 같은 이름으로 배열 생성
let names = ["han", "bo", "iu"]
override func viewDidLoad() {
...
} //각 버튼마다 names배열 값을 다르게 전달한다.
@IBAction func showHanJimin(_ sender: Any) {
performSegue(withIdentifier: "show", sender: names[0])
}
@IBAction func showPackBoYeong(_ sender: Any) {
performSegue(withIdentifier: "show", sender: names[1])
}
@IBAction func showIU(_ sender: Any) {
performSegue(withIdentifier: "show", sender: names[2])
}
}
이 방식으로 데이터를 전달하기 위해서는 prepare() 라는 함수를 하나 더 오버라이드해야 한다. 위 코드가 세그웨이(Segue)로 연결된 뷰 컨트롤러(View Controller)를 호출하는 작업이었다면, 아래 코드가 데이터를 전달하는 실제적인 부분이다.
스토리보드(Storyboard)에서 설정해준 화살표의 Identifier 이름이 맞다면 데이터를 전달할 것이다.
//====== 데이터를 전달하는 메서드 =====//
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if segue.identifier == "show" {
let profileView = segue.destination as? ProfileImgView
if let fileName = sender as? String {
profileView?.name = fileName
}
}
}
코딩2 : 데이터 받기
데이터를 보낼때 아래와 같이 작성했었다. 이 코드에서 name이 데이터를 받을 변수명이다.
/* 데이터를 보내는 컨트롤러.swift */
profileView?.name = fileName
이제 데이터를 받는 쪽 코딩을 하면, 역시 각 뷰를 연결하고 데이터를 전달 받을 별도의 변수를 만든다. 그리고 화면이 나타남과 동시에 이름과 이미지가 나타날 수 있도록 ViewDidLoad()에서 각 뷰에 셋팅한다.
/* 데이터를 받는 컨트롤러.swift */
class ProfileImgView: UIViewController {
//LableView 및 ImageView 연결
@IBOutlet weak var nameLable: UILabel!
@IBOutlet weak var profileImg: UIImageView!
//데이터를 받을 옵셔널 변수
var name:String?
override func viewDidLoad() {
//옵셔널 변수를 안전하게 열어준다.
if let name = self.name {
profileImg.image = UIImage(named: "\(name).png")
nameLable.text = getHerName(name: name)
}
}
func getHerName(name:String) -> String {
var herName = ""
switch name {
case "han":
herName = "한지민"
case "bo" :
herName = "박보영"
case "iu" :
herName = "아이유"
default :
herName = ""
}
return herName
}
이제 앱을 실행해보면 각 버튼마다 다른 이름과 사진이 잘 나타나는 것을 볼 수 있다.