AppleAppStore - 4. Today 화면의 cell 구현 2

안녕하세요. Skillist입니다~

 

이번엔 지난 글에 이어서 TodayVC에서 사용할 Cell에 대해서 알아볼게요

 

이번엔 다음 cell을 구현해볼게요

section은 다음과 같이 구현돼있습니다.

header와 4개의 item.

따로따로 구현줄 예정이고, collectionview의 섹션에서 활용할거에요.

 

header부터 봐볼게요

 

---------------------------------------------------------------------------------------------------------------------

 

11, 18라인 : 최상위의 labe과 하단의 label을 입니다.

 

37, 44, 49라인 : 뷰를 추가하고, 제약사항을 구성합니다.

 

56라인 : 텍스트를 넘겨받아, 설정합니다.

 

header라서 깔끔하죠???

 

---------------------------------------------------------------------------------------------------------------------

 

이번엔 item을 보겠습니다. 아이템도 뭐 레이아웃 구성하고 제약사항 설정하고 똑같겠죠??

코드 보기전에 혼자 스스로 구현해보세요.

 

12라인 : 앱 아이콘 뷰입니다. 다운로드 가능하도록 커스텀한 이미지뷰를 사용했어요. 또 라운드 추가해줬어요.

DownloadableImageView는 다음 url에서 확인해주세요.

https://skillist.tistory.com/264

Unsplash - 5. 다운로드 가능한 이미지뷰와 이미지 캐싱

그외 textLabel과 button 등을 설정합니다.

 

이번엔 레이아웃 제약사항 구성해볼게요.

 

63라인 : 뷰를 추가합니다.

 

73라인 : 앱 아이콘 뷰를 좌측상단에 구성합니다. size도 70으로 구성합니다.

 

79라인 : 앱 버튼을 우측에 구성합니다. centerY로 버티컬 center를 설정합니다.

 

85라인 : 앱 버튼 하단에, 인앱 구매 text를 위치합니다.  centerX로 버튼을 기준으로 중앙 정렬합니다.

 

92라인 : 앱 아이콘과 앱 버튼 사이에 배치합니다. 생각의 흐름대로 코드를 읽을수 있게끔 코드 순서를 위치했습니다.

 

98라인 : subLabel입니다. mainText의 leading, trailing에 맞춥니다.

 

데이터 설정도 해야겠죠????

데이터를 넘겨받으면, 이미지와 텍스트 등을 설정합니다.

TodaySmallItem은 제가 임의로 구현한 구조체입니다. 

필요한 데이터만 갖도록 구현했어요.

 

---------------------------------------------------------------------------------------------------------------------

 

다음은 section 배경입니다.

 

단순 UIView에다, 컬러 입히고, 그림자를 추가했습니다. 아주 쉽죠???

 

그럼 다음 글에서 collectionView를 구성해볼게요.

 

 

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

 

Skillist의 AppleAppStore 프로젝트

https://github.com/DeveloperSkillist/AppleAppStoreCloneCode

GitHub - DeveloperSkillist/AppleAppStoreCloneCode: AppleAppStoreCloneCode

 

 

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

import UIKit

class TodaySmallItemCollectionHeaderView: UICollectionReusableView {
    private lazy var subText: UILabel = {
        var label = UILabel()
        label.textColor = .darkGray
        label.font = .systemFont(ofSize: 20, weight: .semibold)
        return label
    }()
    
    private lazy var mainText: UILabel = {
        var label = UILabel()
        label.textColor = .label
        label.font = .systemFont(ofSize: 30, weight: .bold)
        label.numberOfLines = 2
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupLayout() {
        [
            subText,
            mainText
        ].forEach {
            addSubview($0)
        }
        
        subText.snp.makeConstraints {
            $0.top.equalToSuperview().inset(36)
            $0.leading.trailing.equalToSuperview().inset(16)
        }
        
        mainText.snp.makeConstraints {
            $0.top.equalTo(subText.snp.bottom).offset(10)
            $0.leading.trailing.equalTo(subText)
            $0.bottom.equalToSuperview()
        }
    }
    
    func setup(mainText: String?, subText: String?) {
        self.mainText.text = mainText
        self.subText.text = subText
    }
}

import UIKit
import SnapKit

class TodaySmallItemCollectionViewCell: UICollectionViewCell {
    private lazy var imageView: DownloadableImageView = {
        var imageView = DownloadableImageView()
        imageView.contentMode = .scaleAspectFill
        imageView.layer.cornerRadius = 10
        imageView.backgroundColor = .label
        imageView.clipsToBounds = true
        return imageView
    }()
    
    private lazy var mainText: UILabel = {
        var label = UILabel()
        label.textColor = .label
        label.font = .systemFont(ofSize: 18, weight: .bold)
        label.numberOfLines = 2
        return label
    }()
    
    private lazy var subText: UILabel = {
        var label = UILabel()
        label.textColor = .darkGray
        label.font = .systemFont(ofSize: 15, weight: .semibold)
        return label
    }()
    
    private lazy var button: UIButton = {
        var button = UIButton()
        button.setTitle("down_title".localized, for: .normal)
        button.setTitleColor(.link, for: .normal)
        button.backgroundColor = UIColor(named: "lightgray,darkgray")
        button.layer.cornerRadius = 15
        return button
    }()
    
    private lazy var inAppPurchaseText: UILabel = {
        var label = UILabel()
        label.textColor = .darkGray
        label.font = .systemFont(ofSize: 13)
        label.textAlignment = .center
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setupLayout() {
        [
            imageView,
            mainText,
            subText,
            button,
            inAppPurchaseText
        ].forEach {
            addSubview($0)
        }
        
        imageView.snp.makeConstraints {
            $0.top.bottom.equalToSuperview().inset(5)
            $0.leading.equalToSuperview().inset(16)
            $0.width.height.equalTo(70)
        }
        
        button.snp.makeConstraints {
            $0.trailing.equalToSuperview().inset(16)
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
        }
        
        inAppPurchaseText.snp.makeConstraints {
            $0.centerX.equalTo(button)
            $0.top.equalTo(button.snp.bottom)
            $0.bottom.equalToSuperview()
            $0.trailing.equalTo(button)
        }
        
        mainText.snp.makeConstraints {
            $0.top.equalTo(imageView).offset(5)
            $0.leading.equalTo(imageView.snp.trailing).offset(10)
            $0.trailing.equalTo(button.snp.leading).offset(-16)
        }
        
        subText.snp.makeConstraints {
            $0.top.equalTo(mainText.snp.bottom).offset(5)
            $0.leading.trailing.equalTo(mainText)
        }
    }
    
    func setup(item: TodaySmallItem) {
        mainText.text = item.mainText
        subText.text = item.subText
        inAppPurchaseText.text = "in_app_purchase".localized
        
        if let url = item.imageURL {
            imageView.downloadImage(url: url)
        } else if let image = item.image {
            imageView.image = image
        }
    }
}

import UIKit

class TodaySmallItemBackgroundView: UICollectionReusableView {
    
    private lazy var backgroundView: UIView = {
        var view = UIView()
        view.backgroundColor = UIColor(named: "white,darkgray")
        view.layer.cornerRadius = 15
        view.clipsToBounds = true
        
        view.layer.shadowColor = UIColor.black.cgColor
        view.layer.shadowOffset = .zero
        view.layer.shadowOpacity = 0.5
        view.layer.shadowRadius = 10
        view.layer.masksToBounds = false
        return view
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupLayout() {
        addSubview(backgroundView)
        
        backgroundView.snp.makeConstraints {
            $0.edges.equalToSuperview()
                .inset(16)
        }
    }
}