학습키워드

• UIImageView
• UIImage
• UINavigationBar

1. Building a detail screen

행 클릭했을 때 보여줄 DetailViewController 설정

인터페이스빌더에 있는 뷰컨트롤러를 코드에서 참조하기 위해서는 Storyboard ID를 작성해줍니다.

UIImageView : UIKit의 일부이며, 이미지를 보여주는 뷰입니다.

• 이미지설정 방법 : UIImageView().image = UIImage(named: 앱 번들에서의 파일 이름)

AutoLayout (오토레이아웃)

앱이 실행될 수 있는 iOS기기는 모두 크기가 다양합니다.

따라서 여러가지 화면크기에 대해 규칙을 정하지 않으면 뷰가 다르게 보이는 문제가 발생합니다.

뷰를 레이아웃하는 방법에 대한 규칙을 정의하고 이러한 규칙을 자동으로 준수해줍니다.

• 레이아웃 규칙은 완전해야합니다. (X위치만 지정해서는 안되고 Y위치도 지정해줘야합니다.)
• 레이아웃 규칙은 충돌해서는 안됩니다. (규칙들이 서로 겹치는 문제가 생겨서는 안됩니다.)
• 정확하지는 않지만 가장 간단한 방법

• 추가 강의 링크 : 오토레이아웃 강의 - 야곰아카데미

@IBOutlet

Interface Builder 컨텐츠를 코드로 옮겨서 사용할 수 있습니다. (코드와 스토리보드를 연결)

코드 줄과 Interface Builder 사이에 연결이 있음을 Xcode에 알리는 데 사용됩니다.

class DetailViewController: UIViewController {
    @IBOutlet var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

타입이 IUO인 이유?

타입이 IUO라면 값이 있거나, 없을 수 있지만 사용하는 경우에는 확실히 값이 있다고 확신합니다.

예를 들면, DetailViewController가 생성될 때, 뷰는 아직 로드되지 않았습니다.(단지, CPU에 실행중인 코드)

기본작업이 완료된 후, iOS는 스토리보드에서 레이아웃을 로드하고, 스토리보드에서 코드로 모든 outlet들을 연결합니다.

따라서 DetailViewCOntroller를 만들 때 UIImageView는 아직 생성되지 않았기 때문에 존재는 하지 않지만 메모리에는 여유 공간이 필요합니다. 이 때 값은 nil ,비어있는 메모리입니다. 그러나 뷰가 로드되거나 outlet이 연결될 때 값이 nil이 아니게 됩니다.

2. Loading images with UIImage

행 선택했을 때 동작

테이블뷰 행을 선택했을 때 동작하기 위해서는 UITableViewDelegate 의 tableView(_, didSelectRowAt:) 메서드를 작성합니다.

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {}

• indexPath를 통해 작업하고 있는 행을 알수 있습니다.

네비게이션컨트롤러를 통해 데이터 전달

1. 데이터를 전달받을 뷰컨트롤러에서 같은 타입의 프로퍼티를 설정합니다.

   • 옵셔널타입 : 뷰컨트롤러가 처음 생성될 때 존재하지 않기 때문입니다.

2. 데이터를 전달할 부분에서 뷰컨트롤러 인스턴스를 생성합니다.

   instantiateViewController(withIdentifier:) storyboard ID로 인스턴스를 만든 후 어떤 뷰컨트롤러인지 타입캐스팅을 해줍니다. (왜냐하면 어떤 타입인지 모르기 때문입니다.)

3. 전달받을 뷰컨트롤러 프로퍼티에 값을 저장합니다.

4. 화면을 전환합니다.

3. Final tweaks: hidesBarsOnTap, safe area margins

• 이미지뷰 ContentMode
  • Aspect Fill (확대 이미지 보기)
    • Aspect Fill을 사용하면 이미지가 overspilling넘어갈 수 있기 때문에 Clip To Bounds(경계까지만)를 활성화 시켜줘야 합니다.
  • Aspect Fit (이미지가 모두 보이도록 크기를 조정)
  • Scale to Fill (이미지를 두 축에서 늘려서 공백이 남지 않도록 이미지 크기를 조정)

이미지 풀스크린으로 보기

UINavigationController의 hidesBarsOnTap을 이용하면 화면을 Tap하면 네비게이션바가 숨겨집니다.

⚠️ 사용한 뷰컨트롤러에서 화면이 전환될 때 다시 비활성화해줘야 됩니다. 다른 곳에서 Tap할 때 겹치는 문제가 발생할 수 있기 때문입니다.

테이블뷰 셀의 Accessory옵션을 사용하여 셀의 목적을 명확히 해주는 기호를 추가할 수 있습니다.

• 네비게이션바에 표시되는 타이틀을 큰 제목으로 사용하는 방법

  navigationController?.navigationBar.prefersLargeTitles = true

  • 다른 뷰컨트롤러에서 사용하고 싶지 않은경우

    navigationItem.largeTitleDisplayMode = .never

🌟 뷰컨트롤러 제목이 너무 긴경우에 네비게이션 바 뒤로가기 버튼이 타이틀이 아닌 Back으로 지정됩니다.

링크

100 Days of Swift - Day 17 - Hacking with Swift