[iOS][12주차] 영화 상세 화면 만들기

 

 

 

 

 

셀을 눌렀을 때 화면이 이동되는 것을 테스트해보기 위해 아무 내용이나 채워 넣고 화면 이동이 잘 되나 확인해 보았다.

Cell을 누르고 우클릭으로 이동할 화면 쪽으로 끌어다놓으면 위와 같은 메뉴가 나타나는데 일단 show를 선택한다.

 

셀을 누르면 화면 전환이 잘 된다.

 

그런데 여기서 문제가 있다. 어떤 셀을 눌렀는지 확인을 못한다는 것이다.

 

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    let dest = segue.destination as! DetailViewController
    let myIndexPath = table.indexPathForSelectedRow!
    let row = myIndexPath.row
    
    dest.movieName = (movieData?.boxOfficeResult.dailyBoxOfficeList[row].movieNm)!
}

 

indexPath는 prepare()에서 그냥 사용하지 못하기 때문에 table.indexPathForSelectedRow를 이용해서 indexPath를 가져올 수 있다. 이제 행 번호를 가져와서 셀을 선택하면 화면에 영화 이름을 표시할 수 있게 되었다.

 

 

class DetailViewController: UIViewController {
    // @IBOutlet weak var nameLabel: UILabel!
    var movieName = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()
        navigationItem.title = movieName
        // nameLabel.text = movieName
    }
}

 

 

다음에는 navigationItem.title = movieName 라고 설정해서 영화제목이 위에 제목 부분에 뜨도록 했다.

 

import UIKit
import WebKit

class DetailViewController: UIViewController {
    @IBOutlet weak var webView: WKWebView!
    var movieName = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()
        navigationItem.title = movieName
        guard let url = URL(string: "https://m.naver.com") else { return }
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

 

 

웹뷰를 배치하고 네이버로 이동하는 코드를 작성했다.

 

 

네이버 화면이 잘 뜬다.

 

 

네이버에서 영화 검색을 하면 쿼리 파라미터를 이용해서 검색이 되므로 위 주소를 복사해서 사용하자.

 

https://search.naver.com/search.naver?
where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=%EC%98%81%ED%99%94%EC%88%9C%EC%9C%84

 

%로 표시된 부분은 URL % 인코딩으로, 주소에는 아스키값만 포함할 수 있으므로 한글을 UTF-8로 인코딩하여 표시하는 것이다.

 

override func viewDidLoad() {
    super.viewDidLoad()
    navigationItem.title = movieName
    
    let urlKorString = "https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=" + movieName
    let urlString = urlKorString.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed)!
    
    guard let url = URL(string: urlString) else { return }
    let request = URLRequest(url: url)
    webView.load(request)
}

 

이렇게 addingPercentEncoding() 메서드를 이용해서 %인코딩을 할 수 있다.

 

 

이제 네이버 검색도 영화 제목에 맞게 할 수 있다.

 

 

 

Tab Bar Controller를 추가해서 탭을 선택할 수 있게 했다.

 

 

추가 View Controller를 만들어서 Tab Bar와 연결해준다.

Relationship Segue의 view controllers를 선택한다.

 

import UIKit
import WebKit

class MapViewController: UIViewController {
    @IBOutlet weak var webView: WKWebView!
    	
    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)
    }
}

 

이번에는 다른 탭에 주변 영화관을 검색할 수 있도록 했다. 앞서 웹뷰에서 작성한 내용과 동일하고 주소만 다르다.

 

 

이런 식으로 지도를 볼 수 있다.

 

 

 

User Defined Runtime Attributes에서

 

Key Path : layer.masksToBounds Type: Boolean, Value : 체크

Key Path : layer.cornerRadius, Type: Number, Value : 7 (숫자는 마음대로)

 

이렇게 설정하면 Label의 모서리를 둥글게 만들 수 있다.

 

 

 

앱 아이콘도 하나 지정해 주었다.

 

 

앱이 실행되는 동안에 보여줄 LaunchScreen도 만들어주었다.