저번 포스팅에 이어서 디테일 화면 구현과 네비게이션바를 추가해보자!
화면 이동을 하기 위해서는 View Controller를 추가해주고 Control을 하여 Present Modaily를 선택한다.
Cell을 클릭했을 때 다음 화면으로 이동하게 만들 것이다.
먼저, 다음 화면 UI를 꾸며준다.
ImageView와 Label을 추가하여 Stack View로 묶어준다.
ImageView와 Label 높이를 설정하고, Stack View로 묶어 위 간격과, Alignment를 Fill로 설정하고, Label 글자크기 설정, X축의 가운데를 설정하면 위치가 조정된다.
View Controller를 코드와 연결하기 위해 Controllers파일에 새로운 파일을 만들어준다.
Assistent를 통해 코드와 연결한다.
하나의 View Controller파일에 연결하기 위해 Control 버튼을 누르고, ImageView와 Label을 연결한다.
ViewDidLoad에서 데이터를 받아오면 데이터를 표시해주면 된다.
setupUI 함수를 만들어 데이터들을 화면에 표시할 수 있게 코드를 설정해준다.
테이블뷰에서 어떤 특정한 셀이 터치가 되면 이 메서드를 실행시키는 것이다.
didSelectRowAt : 유저가 n번째 셀을 선택하면 이 메서드를 호출하게 된다.
func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
<#code#>
}Storyboard에서 세그웨이를 만들었을 때 performSegue를 실행시키면 다음 화면으로 넘어간다.
performSegue(withIdentifier: "toDetail", sender: indexPath)performSegue를 할 때 "toDetail"이라는 문자열을 가진 세그웨이를 실행시킨다.
세그웨이를 통해 다음 화면으로 가는 메서드를 실행하는 것이다.
performSegue(withIdentifier: "toDetail", sender: indexPath)다음화면으로 데이터를 전달하려면?
prepare 세그웨이를 실행시키면 된다.
override func prepare(for: segue: UIStoryboardSegue, sender: Any?) {
}identifier가 "toDetail"이라면 데이터를 전달하고,
타입캐스팅을 통해 UIViewController타입인 구체적인 타입으로 타입캐스팅한 다음 deatilVC 상수에 foodData를 전달하는 것이다.
배열에서 데이터를 전달하기 때문에 foodDataManager.getFoodData()에서 배열을 받아오고,
배열에서 몇번째인지 꺼내기 위해 IndexPath 파라미터를 전달해줘야 한다.
sender 타입을 Indexpath로 타입캐스팅해야 한다.
tableView에 접근해서 delegate 속성에 self를 꼭 설정해야 한다!
tableView.delegate = selftableView에 View Controller인 내가 대리자가 될 것이다 라는 뜻!
Storyboard에서 Selection - Single Selection이라 설정하면 다음화면으로 넘어가게 된다.
다음 화면으로 잘 넘어가는 것을 확인할 수 있다.
이제, 네비게이션바를 만들어보자.
Storyboard에서 View Controller를 선택하고, Navigation Controller를 선택한다.
세그웨이를 누르고, Kind - Show(push)를 선택하면 전체화면으로 변경되고, 전화면으로 돌아갈 수 있다.
Bar Button Item을 선택하면 상단에 버튼이 생긴 것을 확인할 수 있다.
System Item에서 Add를 선택하면 "+"버튼으로 설정할 수 있다.
"+"를 눌렀을 때 Item을 추가할 수 있는 코드를 설정해준다.
음식데이터들을 담고있는 배열에 하나의 데이터를 담는 구조체를 만들어준다.
함수의 이름은 updateFoodData로 설정하였다.
updateFoodData를 호출하면 하나의 음식데이터가 더 추가된다.
reloadData() 메서드를 사용하여 데이터가 늘어난만큼 다시 테이블에 표시하게끔 한다.
앱을 실행하여 "+"버튼을 누르면 데이터들이 추가되는 것을 확인할 수 있다.
데이터가 하나밖에 없기 때문에 데이터가 하나만 추가되고 있다.
또한, 네비게이션바에 title을 설정하고 싶으면
UITableView내부에 title = "텍스트"을 설정하면 네비게이션바에 title이 나타나게 된다.
다음에 할 것
여러 데이터 추가하고, 데이터를 수정하는 방법 구현하기
