AppleAppStore - 13. DetailViewController의 section, cell 구현 2

안녕하세요 Skillist입니다~~~~~

오늘도 열심히 개발해보죠 아자아자!

 

오늘은 infoShortItemSection을 구현할거에요.

앱 정보를 보여주는 section인데, 저는 api로 받아온 언어 목록으로 구현했습니다.

 

 

카카오톡이 지원 언어 목록이 많아서, 카카오톡을 기준으로 스크린샷을 찍었어요.

 

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

 

section 구현부터 볼게요

241라인 : item 을 설정했습니다.

 

246라인 : group 설정했습니다. .absolute를 사용하여 width, height 사이즈를 지정했습니다.

 

251라인 : section을 구현했습니다. orthogonalScrollingBehavior을 continuous로 설정하였습니다. 페이징 스크롤과는 다르게, 일반 스크롤처럼 동작합니다.

 

256라인 : section에 header를 추가했습니다. 스크린샷을 다시 보면 상단에 line이 보이죠? line을 헤더로 구현했습니다.

 

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

 

cell 부터 구현해볼까요

12라인 : top label 입니다.

 

21라인 : middle label 입니다.

 

29라인 : bottom label 입니다.

 

38, 44라인 : 초기화입니다. 초기화 시 레이아웃을 구성합니다. snapKit으로 구성하겠죠?? 당연하죠~

 

48라인 : 서브뷰를 추가하고, 스냅킷으로 제약사항 구성합니다!!! 스냅킷을 사용할수록 너무 사랑스럽네요.

SwiftUI 공부도 해야하는데;;;;;;; 클론코딩이나 앱 개발 공부를 하다보니, 늦어지고 있네요.

 

72라인 : 아이템을 설정합니다. middle Label의 text만 설정해줬어요.

 

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

 

이번엔 header을 볼까요??

아주 간단합니다!

headerView이다보니, UICollectionReusableView로 구현해주세요.

11라인 : lineView입니다.

 

17라인 : 이니셜라이저 입니다.

 

27라인 : lineView를 추가하고 제약사항을 구성합니다.

 

이렇게 헤더가 끝났습니다. 끝!!!!!!! 참고로 해당 헤더는 나중에 상속할겁니다.

 

이번엔 너무 간단해서 좋았죠???????

고생하셨어요!!!

 

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

 

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

 

Skillist의 AppleAppStore 프로젝트

https://github.com/DeveloperSkillist/AppleAppStoreCloneCode

GitHub - DeveloperSkillist/AppleAppStoreCloneCode: AppleAppStoreCloneCode

 

 

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

 

    private func createInfoShortItemSection() -> NSCollectionLayoutSection {
        let itemMargin: CGFloat = 5
        let sectionMargin: CGFloat = 15
        
        //item
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        item.contentInsets = .init(top: itemMargin, leading: itemMargin, bottom: itemMargin, trailing: itemMargin)
        
        //group
        let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(100), heightDimension: .absolute(100))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
//        group.contentInsets = .init(top: 0, leading: 0, bottom: 0, trailing: 0)
        
        //section
        let section = NSCollectionLayoutSection(group: group)
        section.orthogonalScrollingBehavior = .continuous
        section.contentInsets = .init(top: sectionMargin, leading: sectionMargin, bottom: sectionMargin, trailing: sectionMargin)
        
        //header
        let sectionHeader = createHeader()
        section.boundarySupplementaryItems = [sectionHeader]
        
        return section
    }

import UIKit

class DetailInfoShortItemCollectionViewCell: UICollectionViewCell {
    
    private lazy var topLabel: UILabel = {
        var label = UILabel()
        label.font = .systemFont(ofSize: 10)
        label.textColor = UIColor(named: "labelgray")
        label.textAlignment = .center
        label.text = "app_support_lang".localized
        return label
    }()
    
    private lazy var middleLabel: UILabel = {
        var label = UILabel()
        label.font = .systemFont(ofSize: 20, weight: .bold)
        label.textColor = UIColor(named: "labelgray")
        label.textAlignment = .center
        return label
    }()
    
    private lazy var bottomLabel: UILabel = {
        var label = UILabel()
        label.font = .systemFont(ofSize: 15, weight: .bold)
        label.textColor = UIColor(named: "labelgray")
        label.textAlignment = .center
        label.text = "app_support_lang_bottom".localized
        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() {
        [
            topLabel,
            middleLabel,
            bottomLabel
        ].forEach {
            addSubview($0)
        }
        
        topLabel.snp.makeConstraints {
            $0.top.leading.trailing.equalToSuperview()
        }
        
        middleLabel.snp.makeConstraints {
            $0.top.equalTo(topLabel.snp.bottom).offset(10)
            $0.leading.trailing.equalTo(topLabel)
        }
        
        bottomLabel.snp.makeConstraints {
            $0.top.equalTo(middleLabel.snp.bottom).offset(10)
            $0.leading.trailing.equalTo(topLabel)
        }
    }
    
    func setupItem(item: String) {
        middleLabel.text = item
    }
}

class DetailLineHeaderView: UICollectionReusableView {
    lazy var lineView: UIView = {
        var lineView = UIView()
        lineView.backgroundColor = UIColor(named: "labelgray")
        return lineView
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setupLine()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupLine() {
        addSubview(lineView)
        lineView.snp.makeConstraints {
            $0.top.bottom.equalToSuperview()
            $0.leading.trailing.equalToSuperview().inset(2.5)
            $0.height.equalTo(1)
        }
    }
}