iOS 프로그래밍 실무 12주차 [Open API 앱개발 완성하기]

- 화면 전환

- 탭을 인터넷에 연결하기

- 영화 이름을 누르면 탭 전환

- 마무리 작업

 

 

 

1. 화면 전환

 

 

 

 

1-1. 네비게이션 컨트롤러 추가하기

 

 

 

1-2. 전환시 보여줄 뷰 컨트롤러 하나 더 만들기

(실행시 밑에 크래시가 난거같아 보이지만, 그냥 단순히 뷰 컨트롤러가 연결이 안되어 있어 뜨는거니 무시하셔도 무관)

 

 

 

1-3. 뷰 컨트롤러를 ID를 입력하고 클래스를 지정하기

 

 

 

1-4. 만들고 난 뒤의 파일

 

 

 

2. 클릭한 이름을 불러오기

 

 

 

2-1. 레이블 추가하고 제약 설정하기

 

 

 

2-2. 레이블 추가하고 제약 설정한뒤에 연결하기

저렇게 이름을 지정하면, 뭘 누르더라도 미션 임파서블만 나오는 문제가 존재

 

 

 

2-3. 세그웨이 (Segue) 사용

 

 

화면을 전환할때 보낼값을 세그웨이에 집어넣어주고, 그걸 상수로 저장을 해줍니다.

 

 

이제 가져올값이 있어야하나, 부모 클래스에서 바로 가져올 방법이 없으므로 as!로 부모 클래스를 자식클래스로 변환후 사용합니다.

 

 

 

 

2-4. 이름을 제대로 가져오는 방법

 

 

 

2-4-1. 수정시 주의사항

 

 

 

2-5. 이름을 제대로 가져오는 방법

사진에선 확인이 어렵겠지만, 밑에 콘솔에 뜨는걸 보고 이해하면 이제 클릭한게 불러와진다는걸 알수 있습니다.

(여태까지 잘 왔다면 첫자만 쳐도 대부분 자동완성이 뜨니 코드 작성은 쉬운편입니다.)

 

 

 

2-6. 타이틀 이름 지정하기

 

왼쪽은 문자열로 직접 이름을 지정한것이고, 오른쪽은 영화 이름이 불러와지도록 설정한것 입니다.

 

 

 

3. 영화랑 관련된 웹사이트로 연결하기

 

 

 

3-1. 웹킷 뷰를 끌어다 놓고, 제약조건으로 화면을 가득 채우기

주의 : 반드시 제약조건 설정시 숫자를 입력하는 선이 반드시 진하게 칠해져야 제약조건이 설정된다는 의미입니다.

그러다 보니 기본으로 0으로 잡혀 있더라도 한번더 0을 눌러주어 색이 들어와야 제약조건이 잡힙니다.

이것때문에 결국 사실상 2번에서 한것들은 의미가 반쯤 없어졌습니다 ?

 

 

 

3-2. Assistant editor로 연결하기 

 

연결한 후에, import WebKit를 입력해줘야 오류가 생기지 않습니다.

(실행하고 영화 이름을 누르면 아무것도 안불러와지는건 당연, 홈페이지 연결이 아직 안되어 있기 때문)

 

 

 

3-3. 테스트를 위해 네이버에 연결하기

옵셔널이므로 강제 언래핑을 써도 되나, 홈페이지 연결이 불가능할때를 대비하여 guard let을 사용합니다.

 

 

 

3-4-1. 네이버에 "영화 순위"라고 검색한후 링크 복사후 붙여넣기

 

 

 

3-4-2. Safari를 사용해서 다시 진행하기

 

사진에서 볼수 있듯, 위는 크롬에서 네이버 영화순위를 검색한것을 복붙, 밑은 사파리를 사용한 링크 복사 방식입니다.

 

하지만 저 링크를 그대로 쓰면 뭘 누르든 그냥 영화 순위로만 이동되기에 사용성이 좋지 않습니다.

 

 

게다가 링크 주소에 한글이 있다면 작동하지 않는 문제도 존재합니다.

그래서 AddingPercentEncoding를 사용해 한글을 퍼센트 인코딩을 시켜 3바이트 문자열로 변환시켜줘야 합니다.

(저는 여기서 유튜브로 이동이 되도록 설정해봤습니다.)

 

 

 

3-5. 탭바를 추가하고 설정하기

 

 

 

3-6. 탭바의 이미지 변경

 

 

 

3-7. 뷰 컨트롤러 추가하고 연결하기

 

 

똑같이 이미지를 골라 설정하고 실행하면 이렇게 탭이 2개가 나오는것을 볼수 있습니다.

 

 

 

4. 클래스 파일 하나 새로 만들기

 

 

 

4-1. 파일과 연결해주고 웹킷 뷰로 화면 가득 채우기

 

 

 

4-2. Assistant editor로 연결하기

 

 

 

 

실행한 뒤에 탭을 누르면 근처 영화관을 탐색할수 있음

//필요하신 분들을 위한 코드

override func viewDidLoad() {
        super.viewDidLoad()
        let urlKorString = "https://map.naver.com/p/search/영화관"
        let urlString = urlKorString.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed)!
        guard let url = URL(string:urlString) else { return }
        let request = URLRequest(url: url)
        webView.load(request)
    }

 

 

 

4-3. 모서리 다듬기 , 배경색 변경

 

 

 

4-4. 아이콘 넣기

 

 

바로 안바뀌는 경우가 가끔있는데, 몇번 스와이프 하면서 왔다갔다 하다보면 바뀝니다.