Unsplash - 15. 검색화면 Cell

안녕하세요. skillist입니다.

 

코로나가 심해지고 있는데, 다들 조심하세요 ㅠㅜㅜㅠ

코로나가 하루 빨리 끝나면 좋겠어요.

 

바로 시작해볼게요.

 

검색화면에서 Photo Cell은 PhotoListViewController에서 사용한 PhotoListCollectionViewCell을 그대로 사용했어요.

그래서 설명은 생략할게요.

 

collection Cell입니다. 이런 모양을 가지고 있어요.

imageView와 label을 사용합니다.

또한, SnapKit을 활용하여 레이아웃 구성 및 데이터를 설정합니다.

 

다음은 User입니다.

앞선 글에서 말한적이 있지만, user의 cell은 row값에 따라 상이합니다.

이를 구현해볼게요.

 

11라인 : imageview를 구현했습니다.

 

17라인 : stackView를 구현했어요. statiview에는 title과 subLabel을 추가하여, vertical로 구현했어요.

 

SnapKit으로 레이아웃 구성합니다.

 

Cell 레이아웃 구성인데요, 셀프 코드리뷰를 하면서 놓쳤던 부분을 찾았습니다.

바로바로, cell이 단 1건인 경우에요.

 

87라인 : cell이 1건인 경우 모든 모서리를 round 처리 합니다.

 

94라인 : cell이 여러건인 경우의 첫번째 cell이면, 위쪽 모서리를 round처리 합니다.

 

101라인 : 중간 cell은 모서리 처리하지 않습니다.

 

107라인 : cell이 여러건인 경우의 마지막 cell이면, 아래쪽 모서리를 round처리 합니다.

 

짜짠~~ 이렇게 구현 완료했습니다.

 

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

 

Skillist의 Unsplash 프로젝트

https://github.com/DeveloperSkillist/UnsplashCloneCode

GitHub - DeveloperSkillist/UnsplashCloneCode: UnsplashCloneCode

 

 

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

 

import UIKit

class SearchUserCollectionViewCell: UICollectionViewCell {
    private lazy var imageView: DownloadableImageView = {
        var imageView = DownloadableImageView(frame: .zero)
        imageView.contentMode = .scaleAspectFill
        return imageView
    }()
    
    private lazy var stackView: UIStackView = {
        var stackView = UIStackView()
        stackView.axis = .vertical
        [
            titleLabel,
            subLabel
        ].forEach {
            stackView.addArrangedSubview($0)
        }
        stackView.distribution = .equalSpacing
        stackView.spacing = 5
        return stackView
    }()
    
    private lazy var titleLabel: UILabel = {
        var label = UILabel()
        label.font = .systemFont(ofSize: 23, weight: .bold)
        label.textColor = .white
        return label
    }()
    
    private lazy var subLabel: UILabel = {
        var label = UILabel()
        label.font = .systemFont(ofSize: 18)
        label.textColor = .white
        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")
    }
    
    private func setupLayout() {
        [
            imageView,
            stackView
        ].forEach {
            addSubview($0)
        }
        
        imageView.snp.makeConstraints {
            $0.top.bottom.equalToSuperview().inset(10)
            $0.leading.equalToSuperview().inset(15)
            $0.width.equalTo(imageView.snp.height)
        }
        imageView.layer.cornerRadius = 40
        imageView.clipsToBounds = true
        
        stackView.snp.makeConstraints {
            $0.leading.equalTo(imageView.snp.trailing).offset(15)
            $0.trailing.equalToSuperview().inset(15)
            $0.centerY.equalTo(imageView)
        }
        
        self.backgroundColor = .darkGray
        self.clipsToBounds = true
    }
    
    func onlySingleIndexSetup(user: User) {
        setup(user: user)
        
        self.layer.cornerRadius = 20
        self.layer.maskedCorners = CACornerMask(arrayLiteral: .layerMinXMinYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMaxYCorner)
    }
    
    func firstIndexSetup(user: User) {
        setup(user: user)
        
        self.layer.cornerRadius = 20
        self.layer.maskedCorners = CACornerMask(arrayLiteral: .layerMinXMinYCorner, .layerMaxXMinYCorner)
    }
    
    func middleIndexSetup(user: User) {
        setup(user: user)
        
        self.layer.cornerRadius = 0
    }
    
    func lastIndexSetup(user: User) {
        setup(user: user)
        
        self.layer.cornerRadius = 20
        self.layer.maskedCorners = CACornerMask(arrayLiteral: .layerMinXMaxYCorner, .layerMaxXMaxYCorner)
    }
    
    private func setup(user: User) {
        imageView.downloadImage(url: user.profileImage.medium)
        titleLabel.text = user.name
        subLabel.text = user.username
    }
}