AppleAppStore - 12. DetailViewController의 section, cell 구현 1

안녕하세요 Skillist입니다~

이제 우리는 section과 cell을 구현하면 됩니다. 말은 간단한데 어렵고 복잡하고 빡세고 그럴수 있어요.

그래도 해야죠 해ㅑ죠 아ㅏㅏㅏㅏ 하기싫어........ 그래도 해야져ㅕ

 

 

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

 

우리는 앱타이틀 section인 cell을 구현할겁니다!!!!!

 

section 구현부터 볼까요?

DetailViewController에서 구현한 코드입니다.

219라인 : item을 설정합니다.

 

224라인 : group을 설정하는데요, 아이템 개수는 1개이기 때문에 count를 1로 설정했어요.

 

229라인 : 그리고 section을 설정했습니다.

 

item, group, section 설정 시 여백 설정 계산에 신경써야겠더라구요. inset 계산이 은근 필요합니다. 

 

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

 

다음은 cell 구현!

레이아웃은 SnapKit으로 구성했어요.

제가 작성한 코드 보기전에 먼저 시도해보세요.

저는 처음에는 ipad와 아이폰 ui를 구분하여 구현을 했었거든요.

그런데 우선 아이폰 레이아웃을 먼저 구현해야겠다고 생각하여 디바이스에 따른 레이아웃 구현은 나중으로 미뤘습니다.

그래서 중간중간 디바이스별 분기처리하는 코드가 있다는 것을 참고하세요.

포기는 절대 아닙니다. 단호! 레이아웃 배치만 변경하면 되기에 너무 쉽죠?

 

12라인 : 앱 아이콘입니다.

 

22라인 : 앱 메인 타이틀 라벨입니다.

 

29라인 : 타이틀 라벨 아래에 위치하는 앱 간략 설명 라벨입니다.

 

36라인 : 앱 버튼 입니다. 이 버튼이 경우에 따라, 재설치, 설치, 구매 등등으로 변경되죠? 저는 "받기"로만 구현했습니다. 숙제로 드릴테니 해보세요.

 

45라인 : 버튼 옆 조그만한 라벨입니다.

 

52라인 : 좌측 하단의 공유 버튼 입니다. 기능 구현은 안했습니다. 숙제로 드리겠습니다!!! 절대 귀찮아서 미구현한거 아닙니다!!

 

64라인 : 초기화 시 레이아웃을 설정합니다

 

72라인 : 서브뷰를 추가합니다. forEach로 슉 추가합니다.

 

83라 ~ 126라인 : 제약사항을 구성합니다. 스냅킷 짱!!!!!!!! 사랑합니다.

 

129라인 : cell 정보를 세팅합니다.

 

어때요 아주 쉽죠????? 이젠 레이아웃 구성은 귀찮을뿐 어렵진 않습니다~~ 

 

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

 

이렇게 앱 상세화면의 앱 타이틀 section을 구현했습니다. 짜잔~ 고생하셨습니다.

 

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

 

Skillist의 AppleAppStore 프로젝트

https://github.com/DeveloperSkillist/AppleAppStoreCloneCode

GitHub - DeveloperSkillist/AppleAppStoreCloneCode: AppleAppStoreCloneCode

 

 

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

class DetailMainCollectionViewCell: UICollectionViewCell {
    
    private lazy var imageView: DownloadableImageView = {
        var imageView = DownloadableImageView()
        imageView.contentMode = .scaleAspectFill
        imageView.layer.cornerRadius = 15
        imageView.layer.borderWidth = 1
        imageView.layer.borderColor = UIColor.darkGray.cgColor
        imageView.clipsToBounds = true
        return imageView
    }()
    
    private lazy var titleLabel: UILabel = {
        var label = UILabel()
        label.font = .systemFont(ofSize: 20, weight: .bold)
        label.textColor = .label
        return label
    }()
    
    private lazy var infoLabel: UILabel = {
        var label = UILabel()
        label.font = .systemFont(ofSize: 15, weight: .bold)
        label.textColor = UIColor(named: "labelgray")
        return label
    }()
    
    private lazy var appActionButton: UIButton = {
        var button = UIButton()
        button.setTitle("app_download_title".localized, for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .link
        button.layer.cornerRadius = 15
        return button
    }()
    
    private lazy var inAppPurchaseLabel: UILabel = {
        var label = UILabel()
        label.text = "in_app_purchase".localized
        label.font = .systemFont(ofSize: 10)
        return label
    }()
    
    private lazy var shareButton: UIButton = {
        var button = UIButton()
        button.setTitle(nil, for: .normal)
        button.setImage(UIImage(systemName: "square.and.arrow.up"), for: .normal)
        button.tintColor = .link
//        button.backgroundColor = .gray
        return button
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setupLayout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupLayout() {
        [
            imageView,
            titleLabel,
            infoLabel,
            appActionButton,
            inAppPurchaseLabel,
            shareButton
        ].forEach {
            addSubview($0)
        }
        
        imageView.snp.makeConstraints {
            $0.top.leading.bottom.equalToSuperview()
            $0.width.equalTo(imageView.snp.height)
        }
        
        if UIDevice.current.userInterfaceIdiom == .pad {
            shareButton.snp.makeConstraints {
                $0.trailing.equalToSuperview()
                $0.top.equalTo(titleLabel).offset(5)
            }
            
            titleLabel.snp.makeConstraints {
                $0.top.equalTo(imageView)
                $0.leading.equalTo(imageView.snp.trailing).offset(10)
                $0.trailing.equalTo(shareButton.snp.leading).offset(-10)
            }
        } else {
            shareButton.snp.makeConstraints {
                $0.trailing.equalToSuperview()
                $0.centerY.equalTo(appActionButton)
            }
            
            titleLabel.snp.makeConstraints {
                $0.top.equalTo(imageView)
                $0.leading.equalTo(imageView.snp.trailing).offset(10)
                $0.trailing.equalToSuperview().offset(-10)
            }
        }
        
        infoLabel.snp.makeConstraints {
            $0.top.equalTo(titleLabel.snp.bottom).offset(5)
            $0.leading.trailing.equalTo(titleLabel)
        }
        
        appActionButton.snp.makeConstraints {
            $0.leading.equalTo(imageView.snp.trailing).offset(10)
            $0.bottom.equalToSuperview()
            $0.width.equalTo(70)
        }
        
        inAppPurchaseLabel.snp.makeConstraints {
            $0.centerY.equalTo(appActionButton)
            $0.leading.equalTo(appActionButton.snp.trailing).offset(5)
        }
    }
    
    func setupItem(item: SearchItemResult) {
        titleLabel.sizeToFit()
        imageView.downloadImage(url: item.artworkUrl512)
        titleLabel.text = item.trackName
        infoLabel.text = item.resultDescription
    }
}