[iOS] UICollectionView 내의 Carousel UI 수정하기 (1)

앞의 글에서 콜렉션뷰 섹션에 들어가는 캐로셀의 코드를 작성하고, VC에 연결했어요.

 

이제 연결된 캐로셀 UI를 팀에서 협의된 디자인에 맞추어 디테일하게 수정해 봅니다.

---

 

1. TodoCalandarViewController에서 섹션으로 나뉜 뷰의 사이즈 너비를 화면과 동일하게 수정하고, (width 360 -> 393)

   // 셀 크기 설정
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 393, height: 244)
    }

 

 

2. cyan 컬러로 구분지었던 화면을 팀에서 설정한 블랙컬러로 수정하고,

        // 테스트 컬렉션 뷰의 배경색을 청록색 -> challendarBlack90으로 수정
        testCollectionView.backgroundColor = .challendarBlack90

 

 

3. blue 컬러로 구분지었던 뷰 컬러도 팀에서 설정한 블랙컬러로 수정하고,

   // 초기화 메서드
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        // 뷰의 배경색
        backgroundColor = .challendarBlack90

 

 

3. 캐로셀의 배경 컬러도 변경(challengeBlack80)하고, cornerRadius 값도 30을 주어 셀의 네 모퉁이를 둥글게 수정했다. 

class CarouselCell: UICollectionViewCell {
    
    private lazy var container: UIView = {
        let view = UIView()
        view.backgroundColor = .challendarBlack80
        view.layer.cornerRadius = 30.0
        return view
    }()

 

 

여기까지 하면, 아래와 같은 화면이 완성된다. 

상단 컬렉션뷰 캐로셀 디자인 수정(잘 안보이네.. )

 

 

 

다시 정리하면, TodoCalandarViewController 에서 선언한 collectionView가 있고, 여기서 CollectionViewCell을 등록했다. 

class TodoCalandarViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    // 콜렉션뷰 선언 (지연 초기화 사용)
    lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical  // 스크롤 방향을 수직으로 설정
    
    override func viewDidLoad() {
        super.viewDidLoad()

        setup()  // 콜렉션뷰 설정 메서드 호출
        
        // 셀 등록
        collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")

 

 

그 다음 이 CollectionViewCell에서 testCollectionView(collectionView의 첫번째 섹션)를 선언해주고, 그 안에 CarouselCell을 넣어준 상태이다. 

class CollectionViewCell: UICollectionViewCell, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    // 상단 캐로셀 컬렉션 뷰 설정
    var testCollectionView: UICollectionView = {
        let layout = YZCenterFlowLayout()

class CarouselCell: UICollectionViewCell {
    
    private lazy var container: UIView = {
        let view = UIView()
        view.backgroundColor = .challendarBlack80
        view.layer.cornerRadius = 30.0
        return view
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupView() {
        // 내부 셀에 대한 추가 설정이 필요한 경우 여기에 작성
        
        // 모서리를 둥글게 설정
        contentView.addSubview(container)
        container.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }
}

 

 

이제 이 CarouselCell 내에 UI 컴포넌트를 추가해보자. 

 

요일과 날짜 레이블을 추가하고 정해진 폰트와 컬러, cornerRadius를 추가한 후,

class CarouselCell: UICollectionViewCell {
    
    private lazy var container: UIView = {
        let view = UIView()
        view.backgroundColor = .challendarBlack80
        view.layer.cornerRadius = 30.0
        return view
    }()
    
    // 요일 레이블 설정
    private let dayLabel: UILabel = {
        let label = UILabel()
        label.textColor = .white
        label.font = .pretendardSemiBold(size: 24)
        label.textAlignment = .center
        label.text = "화요일"
        return label
    }()
    
    // 날짜 레이블 설정
    private let dateLabel: UILabel = {
        let label = UILabel()
        label.textColor = .black
        label.font = .pretendardSemiBold(size: 58)
        label.textAlignment = .center
        label.backgroundColor = .challendarGreen100
        label.layer.cornerRadius = 34.5
        label.layer.masksToBounds = true
        label.text = "28"
        return label
    }()

 

 

방금 추가한 UI component의 제약을 아래와 같이 잡아준다. 

    private func setupView() {
        // 내부 셀에 대한 추가 설정이 필요한 경우 여기에 작성
        
        // 모서리를 둥글게 설정
        contentView.addSubview(container)
        container.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
        
        // 요일 레이블 추가
        container.addSubview(dayLabel)
        dayLabel.snp.makeConstraints { make in
            make.top.equalToSuperview().offset(30)
            make.leading.trailing.equalToSuperview().inset(16)
        }
        
        // 날짜 레이블 추가
        container.addSubview(dateLabel)
        dateLabel.snp.makeConstraints { make in
            make.top.equalTo(dayLabel.snp.bottom).offset(20)
            make.centerX.equalToSuperview()
        //    make.width.height.equalTo(80)
            make.width.height.equalTo(138) // 높이와 너비를 138 * 138로 설정
        }
    }

 

 

여기까지 하면 아래와 같은 화면이 나오는데 아직 완성된 디자인이 아니다.. ㅠ

 

캐로셀 내 Cell 디자인 수정 중

 

 

글이 너무 길어졌으니 다음 글에서 디테일한 수정을 추가해보자.