Unsplash - 13. Search화면 Cell

안녕하세요. Skillist입니다.

 

어제 너무 머리 아파, 포스팅을 급하게 했는데, Cell 코드 설명이 빠졌더라구요.

그래서 오늘은 Cell에 대해서 알아 봅시다.

 

너무 간단한것들이라 먼저 구현해보세요~~~~~~~~~~~

 

맨 먼저 SearchMainCollectionViewHeader~

 

10라인 : Header이다 보니까 UICollectionReusableView를 사용합니다.

 

11라인 : Header의 text를 보여주는 label입니다.

 

28라인 : SnapKit으로 레이아웃 제약사항을 구성해줬습니다.

 

36라인 : title을 전달 받아, text를 지정합니다.

 

넘 쉽죠???

 

다음은 Category에 대한 cell입니다.

12라인 : 다운로드 가능한 이미지 뷰입니다.

 

19라인 : center text가 잘 보이도록 dimView를 추가합니다.

 

26라인 : center text입니다.

 

34라인 : prepareForReuse인데요, 셀을 재사용할때 호출됩니다.

36라인 : 다운로드 중인 이미지를 취소합니다.

37라인 : 이미지를 nil로 세팅합니다.

50라인 : SnapKit을 활용하여 레이아웃 구성을 합니다.

 

72라인 : 데이터를 전달 받아 , 세팅 합니다.

 

 

쭉쭉 나가봅시다. 다음은 Discover Cell

imageView와 label 입니다.

snapkit을 활용하여, 레이아웃을 구성하고, 데이터를 전달 받아, 데이터를 세팅합니다.

 

이번 글은 간단해서 간단간단하게 작성해봤습니다.

 

잘못되거나 부족한 내용 등, 피드백 감사합니다!

 

Skillist의 Unsplash 프로젝트

https://github.com/DeveloperSkillist/UnsplashCloneCode

GitHub - DeveloperSkillist/UnsplashCloneCode: UnsplashCloneCode

 

 

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓  전체 코드  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

import UIKit

class SearchMainCollectionViewHeader: UICollectionReusableView {
    private lazy var headerLabel: UILabel = {
        var label = UILabel()
        label.font = .systemFont(ofSize: 25, weight: .bold)
        label.textColor = .white
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        addSubview(headerLabel)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        headerLabel.snp.makeConstraints {
            $0.edges.equalToSuperview().inset(10)
        }
    }
    
    func setTitle(title: String) {
        headerLabel.text = title
    }
}

import UIKit
import SnapKit

class SearchCategoryCollectionViewCell: UICollectionViewCell {
    private lazy var imageView: DownloadableImageView = {
        var imageView = DownloadableImageView(frame: .zero)
        imageView.contentMode = .scaleAspectFill
        return imageView
    }()
    
    //label이 잘 보이도록 imageView를 약간 어둡게 만들기 위한 view
    private lazy var dimView: UIView = {
        var view = UIView()
        view.backgroundColor = .black
        view.alpha = 0.3
        return view
    }()
    
    private lazy var label: UILabel = {
        var label = UILabel()
        label.font = .systemFont(ofSize: 13, weight: .bold)
        label.textColor = .white
        label.textAlignment = .center
        return label
    }()
    
    override func prepareForReuse() {
        super.prepareForReuse()
        imageView.isCancel = true
        imageView.image = nil
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setupLayout() {
        [
            imageView,
            dimView,
            label
        ].forEach {
            addSubview($0)
        }
        
        imageView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
        
        dimView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
        
        label.snp.makeConstraints {
            $0.edges.equalTo(imageView).inset(8)
        }
    }
    
    func setup(category: Category) {
        imageView.downloadImage(url: category.coverPhoto.urls.thumb)
        label.text = category.title
        
        //round 설정
        self.layer.cornerRadius = 10
        self.clipsToBounds = true
    }
}

import UIKit
import SnapKit

class SearchCategoryCollectionViewCell: UICollectionViewCell {
    private lazy var imageView: DownloadableImageView = {
        var imageView = DownloadableImageView(frame: .zero)
        imageView.contentMode = .scaleAspectFill
        return imageView
    }()
    
    //label이 잘 보이도록 imageView를 약간 어둡게 만들기 위한 view
    private lazy var dimView: UIView = {
        var view = UIView()
        view.backgroundColor = .black
        view.alpha = 0.3
        return view
    }()
    
    private lazy var label: UILabel = {
        var label = UILabel()
        label.font = .systemFont(ofSize: 13, weight: .bold)
        label.textColor = .white
        label.textAlignment = .center
        return label
    }()
    
    override func prepareForReuse() {
        super.prepareForReuse()
        imageView.isCancel = true
        imageView.image = nil
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setupLayout() {
        [
            imageView,
            dimView,
            label
        ].forEach {
            addSubview($0)
        }
        
        imageView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
        
        dimView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
        
        label.snp.makeConstraints {
            $0.edges.equalTo(imageView).inset(8)
        }
    }
    
    func setup(category: Category) {
        imageView.downloadImage(url: category.coverPhoto.urls.thumb)
        label.text = category.title
        
        //round 설정
        self.layer.cornerRadius = 10
        self.clipsToBounds = true
    }
}