Unsplash - 4. 메인 사진 목록에 대한 Cell 구성

안녕하세요. Skillist에요.

 

Unsplash 앱 다운받아 사용해보셨어요???

사용 해봤다고 믿을게요. 사용 안해봤으면 다운받아 사용해보세요~

 

이번엔 메인 화면에 보이는 사진에 대한 Cell을 구현할 거에요.

드디어 SnapKit을 사용합니당??

(제가 구현한 앱이에요.)메인 사진 목록이 이렇게 생겼어요.

햄버거 사진을 살펴볼게요

햄버거 사진 보니 햄버거 땡기네요~~~ 아~~~ 배고파.

1번 사진이 들어가는 영역과 2번 Text가 들어가는 영역으로 보이죠??

ImageView와 UILabel로 구현하면 되겠네요.

아주 간단하네요??

 

cell 클래스 만들어주고, UIImageView와 UILabel을 선언했어요.

DownloadableImageView는 제가 만든 클래스인데, UIImageView를 상속했어요.

지금은 그냥 UIImageView라고 생각해주세요.



그리고 레이아웃 및 제약사항을 구성합니다.

UIImageView와 UILabel을 추가(addSubView)했어요.

ImageView는 Cell 크기에 딱 맞춰 줬어요.

- $0.edges.equalToSuperview()

 

UILabel은 ImageView의 좌측 하단에 여백을 줘서 위치했어요.

- $0.leading.trailing.bottom.equalToSuperview().inset(10)

 

이게 레이아웃 및 제약사항 구성 끝이에요. 엄청 쉽죠?????

SnapKit 코드가 직관적이라 너무 좋아요. 문법을 몰라도 읽으면 이해가 되죠??????

 

아주 간단하게 레이아웃을 구성했습니다. 무야호~~~~~~

 

 

Skillist의 Unsplash 프로젝트

https://github.com/DeveloperSkillist/UnsplashCloneCode

GitHub - DeveloperSkillist/UnsplashCloneCode: UnsplashCloneCode

 

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

 

import UIKit
import SnapKit

class PhotoListCollectionViewCell: UICollectionViewCell {
    var photo: Photo?
    
    //다운로드 이미지
    private lazy var photoImageView: DownloadableImageView = {
        let imageView = DownloadableImageView(frame: .zero)
        imageView.backgroundColor = .black
        imageView.contentMode = .scaleAspectFill
        return imageView
    }()
    
    private lazy var photographerLabel: UILabel = {
        let label = UILabel()
        label.font = .systemFont(ofSize: 20, weight: .bold)
        label.textColor = .white
        label.shadowColor = .black
        label.layer.shadowOpacity = 0.8
        label.layer.shadowRadius = 10
        return label
    }()
    
    //cell reuse할 때, 다운로드 중인 이미지 적용 취소하기
    override func prepareForReuse() {
        photoImageView.isCancel = true
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        layoutLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func layoutLayout() {
        [
            photoImageView,
            photographerLabel
        ].forEach {
            contentView.addSubview($0)
        }
        
        photoImageView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
        
        photographerLabel.snp.makeConstraints {
            $0.leading.trailing.bottom.equalToSuperview().inset(10)
        }
    }
    
    func setup(photo: Photo) {
        photographerLabel.text = photo.user.name
        photoImageView.downloadImage(url: photo.urls.regular)
    }
}