NETFLIX CLONE 3편 (테이블 헤더 뷰에 이미지, 버튼 할당)

 

✅ 테이블 헤더 뷰 생성 

✅ 테이블 헤더 뷰에 들어간 이미지에 그라디언트 효과 적용 

✅ 테이블 헤더 뷰에 버튼 2개 선언

 

---

✅ 테이블 헤더 뷰 생성 

• Views 폴더 내에 UIView 타입의 파일 생성 

import UIKit

class HeroHeaderUIView: UIView {
    
    // 테이블 헤더 안에 들어갈 이미지 생성
    private let heroImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        imageView.image = UIImage(named: "heroImage")
        return imageView
    }()

    
    override init(frame: CGRect) {
        super.init(frame: frame)
        addSubview(heroImageView)
    }
    
    // 테이블 헤더 안에 들어가는 이미지 제약조건
    override func layoutSubviews() {
        super.layoutSubviews()
        heroImageView.frame = bounds
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

• 홈뷰컨트롤러 내의 헤더 내에 HeroHeaderUIView 클래스의 인스턴스를 받아 할당한다. 

override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        
        
        view.addSubview(homeFeedTable)
        
        
        homeFeedTable.delegate = self
        homeFeedTable.dataSource = self
        
        
        // HeroHeaderUIView 클래스를 할당받아 heroFeedTable의 헤더로 설정한다. 
        let headerView = HeroHeaderUIView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 450))
        homeFeedTable.tableHeaderView = headerView
    }

 

 

 

 

✅ 테이블 헤더 뷰에 들어간 이미지에 그라디언트 효과 적용 

• 헤더 뷰의 이미지에 그라데이션 효과를 적용한다. 
• HeroHeaderUIView 파일 내에 addGradient 함수를 선언한다.

    // 이미지에 그라디언트 효과 적용
    // 아래로 갈수록 좀 어둡게 하는 설정
    private func addGradient() {
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [
            UIColor.clear.cgColor,
            UIColor.systemBackground.cgColor
        ]
        gradientLayer.frame = bounds
        layer.addSublayer(gradientLayer)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        addSubview(heroImageView)
        
        addGradient()
    }

 

 

 

 

✅ 테이블 헤더 뷰에 버튼 2개 선언

• 테이블 헤더 내에 버튼 2개 선언한다. 
• 위에서 선언한 addGradient 함수 다음으로 생성한 버튼을 뷰에 addSubView() 해야 한다. 
• addGradient 함수 전에 버튼을 뷰에 넣으면 그라데이션 효과에 묻혀서 안보인다. 

import UIKit

class HeroHeaderUIView: UIView {
    
    // 테이블 헤더 이미지 위에 삽입할 버튼
    private let downloadButton: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("Download", for: .normal)
        button.layer.borderColor = UIColor.white.cgColor
        button.layer.borderWidth = 1
        return button
    }()
    
    private let playButton: UIButton = {
        let button = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitle("Play", for: .normal)
        button.layer.borderWidth = 1
        button.layer.borderColor = UIColor.white.cgColor
        return button
    }()
    
    
    // 테이블 헤더 안에 들어갈 이미지 생성
    private let heroImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        imageView.image = UIImage(named: "heroImage")
        return imageView
    }()

    
    // 이미지에 그라디언트 효과 적용
    // 아래로 갈수록 좀 어둡게 하는 설정
    private func addGradient() {
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [
            UIColor.clear.cgColor,
            UIColor.systemBackground.cgColor
        ]
        gradientLayer.frame = bounds
        layer.addSublayer(gradientLayer)
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        addSubview(heroImageView)
        
        addGradient()
        
        // 순서를 조심하자 addGradient() 함수 호출 후에 playButton을 view에 넣자
        addSubview(playButton)
        addSubview(downloadButton)
        
        applyConstraints()
    }
    
    // 테이블 헤더 안에 들어가는 이미지 제약조건
    override func layoutSubviews() {
        super.layoutSubviews()
        heroImageView.frame = bounds
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    
    
    private func applyConstraints() {
        
        let playButtonConstraints = [
            playButton.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 80),
            playButton.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -20),
            playButton.widthAnchor.constraint(equalToConstant: 100)
        ]
        
        let downloadButtonConstraints = [
            downloadButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -80),
            downloadButton.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -20),
            downloadButton.widthAnchor.constraint(equalToConstant: 100)
        ]
        
        NSLayoutConstraint.activate(playButtonConstraints)
        NSLayoutConstraint.activate(downloadButtonConstraints)
    }
}

 

 

 

 

https://youtu.be/LPMMVmPuqu0?si=1oY4nhefTPQ3oQZH