0. TableView 복습하기..

1. CollectionView 란?
컬렉션 뷰를 사용자 인터페이스에 추가하면 앱의 주요 역할은 해당 컬렉션 뷰와 관련된 데이터를 관리하는 것입니다. 컬렉션 뷰는 데이터 소스 객체에서 데이터를 가져옵니다. 이 객체는 컬렉션 뷰의 dataSource 속성에 저장됩니다. 데이터 소스로는 UICollectionViewDiffableDataSource 객체를 사용할 수 있습니다. 이 객체는 컬렉션 뷰의 데이터와 사용자 인터페이스를 간단하고 효율적으로 업데이트하기 위해 필요한 동작을 제공합니다. 또는 UICollectionViewDataSource 프로토콜을 채택하여 사용자 정의 데이터 소스 객체를 생성할 수도 있습니다.
컬렉션 뷰의 데이터는 개별 항목으로 구성되며, 이러한 항목을 섹션으로 그룹화하여 표시할 수 있습니다. 항목은 표시하려는 가장 작은 데이터 단위입니다. 예를 들어, 사진 앱에서 항목은 단일 이미지일 수 있습니다. 컬렉션 뷰는 데이터 소스가 구성하고 제공하는 UICollectionViewCell 클래스의 인스턴스인 셀을 사용하여 항목을 화면에 표시합니다.
1-1) CollectionView의 특징
- 공식문서에 따르면 정렬된 아이템 collection을 관리하고, 그 collection을 커스텀 가능한 layout을 사용해서 화면에 출력한다라고 합니다
- 테이블뷰는 row가 하나의 셀이라면 , 컬렉션뷰는 item이 하나의 셀이 됩니다.
2. CollectionView 만들기

어떤 순서로 만들꺼냐면요!
1️⃣ Cell 을 만들고
2️⃣ ViewController위에 ContentView를 올릴 예정이기때문에 ContentView 만들고
3️⃣ ContentView 에 Cell 연결하고
4️⃣ ContentView를 ViewController위에 올리겠습니다.
3. CollectionViewCell 만들어보기

Cell을 만들면 위에서 알 수 있듯이 경고가 뜨고

fix 눌러주면 됩니다.

그리고 contentView에 들어갈 imageView의 레이아웃을 잡아줍니다.

이렇게 하면 ConfigureCell을 통해 재사용하겠다고 선언한걸 알 수 있습니다.
또한 사진의 경우 PracticeImage에 접근해 가져온 사진을 Cell에 뿌리겠다는것도 알 수 있어요!
4. ContentView 관련해서 만들어보기

flowLayout를 아직 선언해주지 않아서 발생한 코드입니다.
collectionView는 flowLayout을 통해 레이아웃을 잡겠다고 선언해주었습니다.

이렇게 해주면 끝!

여기까지 하면.
ViewController위에 CollectionView를 올린걸 알 수 있습니다.

제대로 올라갔다!!!!!!!!!!!!
5. ContentView 에 Cell 연결을 해보겠습니다! + Delegate

빨간색 박스에서 Cell 연결을 위한 준비를 끝냈습니다!
delegate 부분에서 오류가 발생하는 이유는 아직 정의해주지 않았기 때문입니다.

- UIScreen.main.bounds.width는 현재 장치의 화면 폭을 의미합니다.
- (UIScreen.main.bounds.width - 10) / 3 는 화면 폭에서 10을 뺀 값에 3으로 나눈 결과를 의미해요 이 값은 반환될 이미지의 폭(width)이 됩니다.
- UIScreen.main.bounds.width / 3 는 화면 폭을 3으로 나눈 결과를 의미해요.
- 이 값은 반환될 이미지의 높이(height)가 됩니다.

최소 행 간격을 3으로 설정하고 반환하는 코드입니다.

최소 아이템 간격을 3으로 설정하고 반환하는 코드입니다.
🦁 여기까지가!!! Delegate 관련 속성을 정의한 부분입니다
6. ContentView 에 Cell 연결을 해보겠습니다! + DataSource

보시죠! 바로 에러가 발생합니다.
에러를 수정해도!

또 에러가 발생합니다!!

그러면! 이렇게 완성이 됩니다^^

dummy를 넣을거니까! 일단 값을 넣어두겠습니다!
코드를 보자면, 아이템의 개수를 반환하기 위해 사용하고, dummyCase 배열에 있는 요소의 개수를 반환합니다.

여기도 똑같이 dummy 넣어서 진행하겠습니다!
7. dummy 를 채워보러 가시죠!
이미지의 배열을 우선적으로 만들고 만든 배열을 ViewController에 넣겠습니다..
구조체를 위한 하나의 파일을 만들겠습니다.

이렇게!!!
8. dummy 를 연결하러 가보겠습니다.
이미지의 배열을 우선적으로 만들고 만든 배열을 ViewController에 넣겠습니다..
구조체를 위한 하나의 파일을 만들겠습니다.


어라 된거 같은데.. 어디가 잘못된걸까?
9. 어라 된거 같은데.. 어디가 잘못된걸까?? - 해결


이렇게 바꿨더니!! 해결했어요~!

command + option + 0 을 누르면 특정 셀의 크기를 직접 확인할 수 있다! -익범이형-
10. TableView에서 배웠던 Delegate 관련 Logic를 추가해볼까요?
UICollectionViewDelegate의 didSelectItemAt 관련하여 코드를 작성해보려 합니다.
이미지를 눌렀을때! 다른 이미지로 바뀌어다가, 바뀐 이미지를 또 누르면 이전의 이미지로 돌아오게 해보겠습니다.

위의 부분에서 indexPath에 해당하는 셀을 컬렉션 뷰에서 가져오고, 그 셀을 ImageCollectionViewCell 타입으로 다운캐스트하려는 것을 알 수 있습니다. ImageCollectionViewCell은 UICollectionViewCell의 하위클래스로 정의해두었고. UICollectionViewCell 내부에 changeImage에 관한 함수를 적어두었기에 강제로 다운캐스트하여 changeImage 함수에 접근하려는 것을 알 수 있었습니다!
바로 아래에서!
cell?.changeImage(): 이 줄은 ImageCollectionViewCell의 changeImage() 메소드를 호출합니다. 위에서 말한것과 같이! “changeImage 함수에 접근하려는 것을 알 수 있었습니다!”
change함수는 cell 부분에서 정의했습니다!

⛔️ 여기서 잠깐!! 다운 캐스팅이란??

하지만! 여기까지만 코드를 작성한다면??

터치한 이미지를 다시 눌렀을 때 이전의 이미지로 돌아오지 않는다는 것을 알 수 있습니다!
⛔️ 다운 캐스팅은 언제언제 될까요?
6월13일, 19시01분 새로 알게된 사실!

다운캐스팅의 대상? 이 된 부분은 ImageCollectionViewCell 인데요.
Jump to Definition을 해서 찾아가면

클래스로된 걸 확인할 수 있습니다!!
즉, 다운 캐스팅은 클래스에서만 가능하고 구조체에서는 불가능하다고 합니다!!! -규철이형-
11. Delegate 관련 Logic를 추가해서 재밌게 해볼께요


위의 코드를 추가해서! 다른 Cell을 클릭하면 이미지를 바꿀 생각입니다.
마찬가지로 다운캐스팅과 함수 만들기? 를 통해 원하는대로 하면!!!

이렇게!! 완성~~
'iOS > UIKit' 카테고리의 다른 글
[iOS] Image contentmode의 모든 것 (2) | 2023.06.25 |
---|---|
[iOS] Initializer의 모든 것 (2) | 2023.06.16 |
[iOS] Toggle() 을 활용한 버튼 클릭 이벤트 (0) | 2023.06.08 |
[iOS] TableView의 모든 것 (4) | 2023.06.06 |
[iOS] Scroll View : 쌓고 넣고! (0) | 2023.05.23 |