[iOS] 새싹 프로젝트 (BoxOffice STEP3) #2 CollectionView 구현

CollectionView 뷰 구현

안녕하세요! 그놈이에요

이번 프로젝트에서는 CollectionView를 추가하게 되어서 글을 작성하게 되었어요.

거짓말 같겠지만 지금 글을 작성하는것이 처음이 아니에요...

열심히 만들었는데 저장을 안해서 저의 노력이 먼지가 되어버렸네요 ㅋㅋㅋㅋ

하지만 괜찮아 다시 만들면 되니까!! 하하하하

 

 

이제 무조건 노션에 만들어서 완성하면 복붙해서 넣는식으로 하자…

CollectionView 객체 생성

밑에 나오겠지만 우선 SubView가 무엇이냐?

SubView는 MainView라는 사각형 화면에 들어가게 되는 각각의 요소들을 말합니다.

그래서 MainView에 CollectionView를 서브뷰로 넣을 겁니다

그럼 어떻게 넣으면 될까요? 우선 CollectionVIew라는 객체를 만들거에요

private lazy var boxOfficeCollectionView: UICollectionView = {
    let layout = UICollectionViewCompositionalLayout.list(using: .init(appearance: .plain))
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    return collectionView
}()

위 코드에서 몇가지를 설명드리자면 CollectionView의 대표적인 layout으로 아래 2가지를 많이 사용하는데

1. FlowLayout
2. CompositionalLayout

이중에서 저는 2번 CompositionalLayout을 선택했어요

 

FlowLayout은 CollectionView의 기본적인 레이아웃으로 아이템들을 순서대로 배열하고 흐름 방향(수직, 수평)을 설정할 수 있어요

CompositionalLayout은 세션을 여러개 구성하여 더욱 복잡한 디자인을 구현하는데 사용됩니다.

 

BoxOffice의 경우 요구사항에 대한 화면이 여러개의 UIVIew가 사용되는점을 생각해서 코드로 레이아웃을 직접 제어할 수 있는 CompositionalLaout을 사용하게 되었습니다.

CollectionView에 대한 더욱 자세한 점들은 추후 글을 작성해서 올리도록 하겠습니다

 

다음은 UICollectionView 객체 생성에 대해서 말씀드리려고 해요

우선 frame이란 것은 뷰의 위치와 크기를 나타내는 CGRect라는 구조체가 있는데

그 값이 아래 frame에 저장되게 됩니다.

UICollectionView(frame: .zero, collectionViewLayout: layout)  
UICollectionView(frame: CGRect(x: 0, y: 0, width: 0, height: 0), collectionViewLayout: layout)

.zero라는 것은 CGRect에 들어가는 x, y, width, height 값이 모두 0이라는것을 의미하며

처음에는 크기가 0인 빈 프레임을 생성하는데 후에 코드로 컬렉션 뷰의 프레임을 설정할 수 있습니다.

이후 frame 값과 아까 설정한 layout을 추가해서 UICollectionView 객체를 만들어 냅니다

 

아래는 translatesAutoresizingMaskIntoConstraints라는 뷰의 자동 크기 조정 Mask를 false로 설정함에 따라 AutoLayout에 대한 설정을 개발자가 직접 구현하겠다는 표현입니다.

collectionView.translatesAutoresizingMaskIntoConstraints = false

addSubView

view.addSubview(boxOfficeCollectionView)

한줄로 간단하게 사용이 가능합니다.

view라고 하는 화면에 boxOfficeCollectionView라는 작은 뷰를 추가하는 방법이 addSubView라는 메서드를 사용한다라고 생각해주시면 될거 같습니다.

 

여기서 view는 UIViewController를 상속받는 클래스에서 사용이 가능한 프로퍼티로

아래와 같이 open 키워드로 하위 클래스에서 사용이 가능한것을 확인할 수 가 있습니다.

 

 

그럼 view는 뭐냐 공식 문서에서는 UIView는 화면의 사각형 모양을 관리하는 객체라고 해요

즉 우리가 보는 핸드폰의 화면이라고 생각해도 말이 맞는거 같아요.

또한 이 View 객체는 앱이 사용자와 상호작용하는 주요 방법이기 때문에 여러 책임이 있는데

이또한 추후 다른 글에서 자세히 작성해 보도록 하겠습니다.

 

즉 요약하자면 view는 우리가 보는 사각형의 상위(슈퍼) 뷰라고 보면되고 이 뷰의 하위 뷰들을 추가하기 위해서는 addSubView를 사용하게 된다 라고 할 수 있습니다.

SubView Layout 설정

저는 AutoLayout을 통해 레이아웃을 설정할 겁니다.

여기서 NSLayoutConstraint라는 것이 사용되는데 공식 문서를 읽어 보면

제약 조건 기반 레이아웃 이스템이 충족해야하는 두 사용자 인터페이스 개체 간의 관계입니다.

라는 말이 적혀있습니다.

이게 무슨 말이냐면 저도 잘은 모르겠습니다…ㅎㅎ

 

제가 이해 한 내용을 말씀드리자면 각각의 뷰들(label, imageView) 와 같은 것들이 서로의 관계(constraint)의 개체간의 거리(제약조건)에 따라 오토 레이아웃이 설정된다 라고 할 수 있을거 같아요.

 

그래서 저의 경우 CollectionView는 화면 전체에 적용되어야 하기 때문에 아래와 같이 layout을 잡게 되었습니다.

private func setLayout() {
    NSLayoutConstraint.activate([
        boxOfficeCollectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        boxOfficeCollectionView.topAnchor.constraint(equalTo: view.topAnchor),
        boxOfficeCollectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        boxOfficeCollectionView.rightAnchor.constraint(equalTo: view.rightAnchor)
    ])
}

equalTo는 현재 CollectionView의 특정 앵커가 파라미터의 앵커와 일치한다는 말로, 일정 거리를 떨어트리고 싶은경우 아래와 같이 constant 값을 추가로 설정해주면 됩니다.

boxOfficeCollectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20)

여기서 activate는 파라미터로 화면의 상하좌우를 나타내는 프로퍼티의 배열을 전달받기 때문에 특정 뷰에 대한 layout을 설정하기 위해서는 위의 코드처럼 진행해주면 되겠습니다.

 

추가 작업

추가로 진행해야 되는 작업으로는 아래와 같습니다

1. CollectionViewCell 커스텀 클래스 작업
2. CollectionView dataSource 프로토콜 채택 및 데이터 연결 작업
3. BoxOffice 모델 데이터 수신 후 뷰 적용

private func configureView() {
    boxOfficeCollectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "cell")
    boxOfficeCollectionView.dataSource = self
}

 

위 내용까지 추가하게 되면 설명하고자 하는 내용이 너무 길어질거라고 생각이 들어 우선 여기까지 하는 걸로 하겠습니다…

추후 기회가 된다면 #3 CollectionViewCell 작업 및 #4 BoxOffice 모델 데이터 연결 작업도

추가 글을 통해 작성하도록 할게요

출처:

[iOS]

translatesAutoresizingMaskIntoConstraints | Apple Developer Documentation

[Swift / Lazy] 진짜 필요할 때만 씁시다!