충남대학교 컴퓨터공학과 동아리 GROW에서 주최한 iOS 기초교육에서 학습한 내용을 정리한 글입니다.
(1) iOS의 View 시스템과 입출력
1회차 2021.09.11.(토)
첫 교육에서는 자주 써본 기능을 위주로 해서 잘 따라할 수 있었는데 항상 그냥 Constraints만 설정해주다가 Alignment Constraints는 처음 써봤다!! 맨날 삽질해서 맞추던 중심이 원래는 한번에 해결되는 것이었던 것🥺
말고는 기본 뷰 컨트롤러에 View 추가하고 배치(frame과 bounds), 제약조건, 간단한 클릭 모션(버튼 클릭시 View 배경색 변화) 구현해보기
(2) ViewController 화면 전환과 MVC
2회차 2021.09.12.(일)
여러 개의 View Controller를 추가해주어 각 화면 중앙에 button을 띄우고 Segue 방식으로 Show하도록 한다.
Segue?
영화나 음악에서 중단없이 이뤄지는 전환. "세그웨"
여기서 실행하게 되면 화면 전환이 아래에서 위를 향하는데, 우리가 평소 사용하는 iOS 어플과 달리 화면 전환이 부자연스럽다. 새로운 모달창은 계속 뜨지만 뒤로가기도 없는 상태.
현재 어플의 가장 첫 뷰 컨트롤러가 선택된 상태에서 Editor - Embed in - Navigation Controller를 누르면 자동으로 네이게이션 컨트롤러가 첫 화면으로 추가되고, 각각의 뷰컨트롤러에 네비게이션 바가 생성된다! 이것도 맨날 하나하나 추가하던 나.. 신기해🥺🥺
이렇게 하면 오른쪽에서 왼쪽으로 화면 전환이 이뤄지고, 뒤로 갈때는 반대로 전환된다. 뒤로가기 버튼이 생겨서 이전화면으로 되돌아갈수도 있음
Navigation Controller는 Nav bar를 가지고, 그 아래공간에는 View Controller를 갖고있는 특이한 구조. 그래서 Container View Controller라 하기도
Stack처럼 하위 뷰 컨트롤러를 처리함
// 스택에 있는 뷰 컨트롤러를 콘솔에 출력하는 코드
print(self.navigationController?.viewControllers)이번에는 Editor - Embed in - Tab Bar Controller를 클릭
이번에는 탭바컨트롤러 아래에 Nav, 그 하위에 나머지 뷰컨트롤러가 속한다. 현재 이 구조(Tab bar - Nav - View)가 애플에서 권장하는 디자인이라고 한다.
Tab bar 컨트롤러에서 새로 만들어준 뷰컨트롤러에 Relationship Segue방식으로 연결해주면 Tab이 추가된다!
Tab bar에 가장 왼쪽에 있는 것이 처음으로 띄워지는 것이 맞고, 서로 다른 탭끼리는 연관이 없고 영향도 주지않는다. 그래서 현재 상태에서 실행해보고 오른쪽 탭을 클릭해보면 Teal color의 컨트롤러가 띄워지지만 Nav bar는 안보임!
MVC
Model View viewController
view -> controller : view를 통해 데이터/이벤트를 입력받음
controller -> model : 입력된 데이터를 model에 반영
model -> controller : model에 변화가 생기면 controller에게 알림
controller -> view : model의 변화를 view에 표시
유저의 정보(이름, 성별, 생일)를 입력받고, segue하며 데이터를 전달하는 실습을 해보자(っ◔◡◔)っ
객체는 스위프트 파일(User.swift)
스토리보드, 뷰 컨트롤러는 코코아터치로 생성 (RedViewController.swift - red 뷰 컨트롤러에 커스텀,
SignupViewController.swift - yellow 뷰 컨트롤러에 커스텀)
위처럼 각각의 컴포넌트들을 추가하고 배치하면 된당,, iOS 14부터 date picker의 방식이 캘린더형으로 바꼈더라 근데 처음 써봐서 몰랐음 무튼 Preferred Style에서 휠 방식으로 바꿀 수 있다.
SignupViewController.swift
각각의 컴포넌트들을 컨트롤러 코드 내에 변수로 추가해주고, 데이터를 전달해주는 시점이 될 segue를 할때 호출되는 함수인 prepare(for segue: ...)를 선언한다.
함수 안에서는 redViewController로 전환될 때, User 객체를 생성하며 컴포넌트에 입력된 데이터를 담아 전달한다.
(구현한 코드는 허락구하고 업로드하깅)RedViewController.swift
마찬가지로 컴포넌트를 변수로 추가하고 레이블에 데이터를 띄워줄 viewWillAppear()를 구현해주면 끝!
마무리
마무리는 교육 인트로에서 보여주셔서 인상깊게 본 XCode의 구조와 관련된 무비클립으로! 🎥
If I want to tell you there's a spot in your shirt, I point the spot.
I don't say there's a spot 14 centimeters down from the collar, three centimeters to the right of the second button while I try to remember what the command is for club soda.
That's not how a person's mind works.
- Steve Jobs (2015)