NETFLIX CLONE 4편 (네비게이션 설정, 각 셀의 머리말 설정)

 

✅ 네비게이션 부분에 좌, 우측에 버튼 설정 

(좌측에는 넷플릭스 로고, 우측에는 재생 버튼, 프로필 버튼)

✅ 화면을 스크롤 내리면 상단에 있는 네비게이션 컨트롤리 밀려 올라가게 설정

✅ 각 셀의 머리말에 글자 설정 

 

---

✅ 네비게이션 부분에 좌, 우측에 버튼 설정 

(좌측에는 넷플릭스 로고, 우측에는 재생 버튼, 프로필 버튼)

 

• 넷플릭스 로고 배경 투명으로 다운로드
• 화면 네비게이션바 버튼으로 넷플릭스 로고 추가 
• 홈뷰컨트롤러 내에 configureNavbar() 함수 선언 

override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .systemBackground
    
    
    view.addSubview(homeFeedTable)
    
    
    homeFeedTable.delegate = self
    homeFeedTable.dataSource = self
    
    configureNavbar()
    
    // homeFeedTable의 헤더 공간 만들기
    let headerView = HeroHeaderUIView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 450))
    homeFeedTable.tableHeaderView = headerView
}


// 테이블뷰 제약조건 설정
override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    homeFeedTable.frame = view.bounds
}

// 네비게이션바에 바버튼 선언
private func configureNavbar() {
    var image = UIImage(named: "netflixLogo")
    navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .done, target: self, action: nil)
}

 

 

 

• 위에서 보이듯이 넷플릭스 로고가 원본으로 나오는게 아니라, 파란색으로 나온다. 
• 화면 왼쪽으로부터 간격이 벌어져 있는 것을 확인했다. 
• 일단 넷플릭스 로고가 파란색인 걸 빨간색으로 변경하기 위해서는 아래 코드를 configureNavbar() 함수에 추가한다. 

private func configureNavbar() {
    var image = UIImage(named: "netflixLogo")
    
    // 아래 코드를 입력할 경우, 이미지 원본 파일을 사용할 수 있다. 
    image = image?.withRenderingMode(.alwaysOriginal)
    

    navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .done, target: self, action: nil)
}

 

• 현재 넷플릭스 로고 사진의 사이즈가 4050 x 4050 이다. 
• 넷플릭스 로고가 벌어져 있는 빈공간을 누르면 버튼이 눌리는 걸 확인할 수 있다. 
• 넷플리스 로고가 화면 좌측에 붙지 않은 이유는 이미지가 너무 커서 이다라고 생각할 수 있다. 
• 이미지 사이즈를 줄이면?

 

• 네비게이션 버튼의 이미지에 맞는 적당한 넷플릭스 로고 크기를 확인하기 어렵다. 
• 따라서 코드로, 이미지에 사이즈를 적용해 네비게이션 바 버튼에 넣고, 이를 네비게이션 왼쪽 버튼에 할당한다. 

private func configureNavbar() {
//        var image = UIImage(named: "netflixLogo")
//        image = image?.withRenderingMode(.alwaysOriginal)
//        navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .done, target: self, action: nil)

    let icon = UIImage(named: "netflixLogo")
    let iconSize = CGRect(origin: CGPoint.zero, size: CGSize(width: 40, height: 40))
    let iconButton = UIButton(frame: iconSize)
    iconButton.setBackgroundImage(icon, for: .normal)
    let barButton = UIBarButtonItem(customView: iconButton)
    iconButton.addTarget(self, action: #selector(foo), for: .touchUpInside)

    navigationItem.leftBarButtonItem = barButton
}

@objc func foo() {
    print("Button Tapped")
}

 

 

 

• 네비게이션의 오른쪽 버튼 설정

private func configureNavbar() {
        
        // 기존 방법 (이럴 경우 이미지 크키 조 어려움)
//        var image = UIImage(named: "netflixLogo")
//        image = image?.withRenderingMode(.alwaysOriginal)
//        navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .done, target: self, action: nil)
        
        
        // 왼쪽 네비게이션 바 버튼 설정
        let icon = UIImage(named: "netflixLogo")
        let iconSize = CGRect(origin: CGPoint.zero, size: CGSize(width: 35, height: 35))
        let iconButton = UIButton(frame: iconSize)
        iconButton.setBackgroundImage(icon, for: .normal)
        let barButton = UIBarButtonItem(customView: iconButton)
        iconButton.addTarget(self, action: #selector(foo), for: .touchUpInside)

        navigationItem.leftBarButtonItem = barButton
        
        
        // 오른쪽 네비게이션 바 버튼 설정
        navigationItem.rightBarButtonItems = [
            UIBarButtonItem(image: UIImage(systemName: "person"), style: .done, target: self, action: nil),
            UIBarButtonItem(image: UIImage(systemName: "play.rectangle"), style: .done, target: self, action: nil),
        ]
        navigationController?.navigationBar.tintColor = .label
    }

 

 

 

 

✅ 화면을 스크롤 내리면 상단에 있는 네비게이션 컨트롤리 밀려 올라가게 설정

• 화면을 내리면 위에 고정된 네비게이션 컨트롤러가 밀려서 올라가게 하는 코드 구현
• 코드 적용 전 (네비게이션 컨트롤러 화면 상단에 고정)

 

 

• extension HomeViewController 내에 scrollViewDidScroll 함수 코드 설정

extension HomeViewController: UITableViewDelegate, UITableViewDataSource {
    
    // 전체 셀 갯수
    func numberOfSections(in tableView: UITableView) -> Int {
        return 20
    }
    
    
    // 각 셀에 들어갈 셀의 갯수 
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        guard let cell = tableView.dequeueReusableCell(withIdentifier: CollectionViewTableViewCell.identifier, for: indexPath) as? CollectionViewTableViewCell else { return UITableViewCell() }
        
        return cell
    }
    
    
    
    // 각 셀 높이 지정
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 200
    }
    
    
    // 각 셀의 머리말 높이 지정
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 40
    }
    
    
    // 화면 상단에 고정된 네비게이션 컨트롤러를 내리면 밀려서 올라가게 하는 코드
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let defaultOffset = view.safeAreaInsets.top
        let offset = scrollView.contentOffset.y + defaultOffset
        
        navigationController?.navigationBar.transform = .init(translationX: 0, y: min(0, -offset))
    }
}

 

 

 

✅ 각 셀의 머리말에 글자 설정 

• Home 에서 각 셀의 제목부분에 대한 코드 구현
• HomeViewController 클래스 내에 아래 코드 구현

// 각 셀의 제목 선언
let sectionTitles: [String] = ["Trending Movies", "Popular" , "Trending TV", "Upcoming Movies", "Top rated"]

 

 

• extension HomeViewController 내에 titleForHeaderInSection 이라는 파라마터를 가진 tableView 메서드를 선언한다.

// 각 셀의 머리말 적용
func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return sectionTitles[section]
}

 

 

 

 

• 머리말 부분의 글자 폰트를 조절한다.
• extension HomeViewController 내에 willDisplayHeaderView 파라미터를 가진 tableView 메서드를 호출한다.
• 머리말 글자의 크기와 굵기를 설정한다.
• 머리말 글자의 프레임 사이즈와 위치를 설정한다.
• 머리말 글자의 색상과 글자를 소문자화 한다.

// 각 셀의 머리말 폰트 적용
func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
    guard let header = view as? UITableViewHeaderFooterView else { return }

    header.textLabel?.font = .systemFont(ofSize: 18, weight: .semibold)
    header.textLabel?.frame = CGRect(x: header.bounds.origin.x + 20, y: header.bounds.origin.y, width: 100, height: header.bounds.height)
    header.textLabel?.textColor = .label
    header.textLabel?.text = header.textLabel?.text!.lowercased()

}

 

 

 

 

https://youtu.be/IhUz6tTT7zI?si=abhJfwBam60jd4KI