CollectionView 사용법

https://www.boostcourse.org/mo326/lecture/16906?isDesc=false 야곰부스트코스

https://developer.apple.com/documentation/uikit/uicollectionview

컬렉션뷰 구조

컬렉션뷰 셀

컬렉션뷰의 셀은 냉장고 속에 있는 반찬통으로 생각할 수 있습니다. 컬렉션뷰라는 냉장고가 있고, 냉장고 안에는 실제 반찬(콘텐츠)을 담고 있는 컬렉션뷰 셀이라는 반찬통이 있다고 생각할 수 있습니다. 컬렉션뷰 셀에 특징에 대해서 알아볼까요?

• 컬렉션뷰 셀은 데이터 아이템을 화면에 표시합니다.
• 하나의 셀은 하나의 데이터 아이템을 화면에 표시합니다.
• 컬렉션뷰 셀은 두 개의 배경을 표시하는 뷰와 하나의 콘텐츠를 표시하는 뷰로 구성되어 있습니다. 두 개의 배경뷰는 셀이 선택되었을 때 사용자에게 시각적인 표현을 제공하기 위해 사용됩니다.
• 셀의 레이아웃은 컬렉션뷰의 레이아웃 객체에 의해 관리됩니다.
• 컬렉션뷰 셀은 뷰의 재사용 메커니즘을 지원합니다.
• 일반적으로 컬렉션뷰 셀 클래스의 인스턴스는 직접 생성하지 않습니다. 대신 특정 셀의 하위 클래스를 컬렉션뷰 객체에 등록한 후, 컬렉션뷰 셀 클래스의 새로운 인스턴스가 필요할 때, 컬렉션의 dequeueReusableCell(withReuseIdentifier:for:) 메서드를 호출합니다.
  • 스토리보드를 사용하여 셀을 구성하면 컬렉션뷰에 따로 셀 클래스를 등록할 필요는 없습니다.

UICollectionViewCell 클래스

컬렉션뷰 셀의 구성요소 관련 프로퍼티

• var contentView: UIView : 셀의 콘텐츠를 표시하는 뷰입니다.
• var backgroundView: UIView? : 셀의 배경을 나타내는 뷰입니다. 이 프로퍼티는 셀이 처음 로드되었을 경우와 셀이 강조 표시되지 않거나 선택되지 않을 때 항상 기본 배경의 역할을 합니다.
• var selectedBackgroundView: UIView? : 셀이 선택되었을 때 배경뷰 위에 표시되는 뷰입니다. 이 프로퍼티는 셀이 강조 표시되거나 선택될 때마다 기본 배경 뷰인 backgroundView를 대체하여 표시됩니다.

 

컬렉션뷰 셀의 상태 관련 프로퍼티

• var isSelected: Bool : 셀이 선택되었는지를 나타냅니다. 셀이 선택되어있지 않다면 이 프로퍼티의 값은 false입니다.
• var isHighlighted: Bool : 셀의 하이라이트 상태를 나타냅니다. 하이라이트 되어있지 않다면 기본 값은 false입니다.

 

컬렉션뷰 셀의 드래그 상태 관련 메서드

• func dragStateDidChange(_:) : 셀의 드래그 상태가 변경되면 호출됩니다.
  • 드래그의 상태는 UICollectionViewCellDragState의 열거형으로 표현되고 none, lifting, dragging의 3가지 상태를 갖습니다.

컬렉션뷰 셀 vs 테이블뷰 셀

컬렉션뷰를 학습하면서 앞서 배웠던 테이블뷰와 비슷한 점이 많지 않았나요? 그렇다면 컬렉션뷰 셀과 테이블뷰 셀에는 어떠한 차이점이 있는지 알아볼까요?

• 테이블뷰 셀의 구조는 콘텐츠 영역과 액세서리뷰 영역으로 나뉘었지만, 컬렉션뷰 셀은 배경뷰와 실제 콘텐츠를 나타내는 콘텐츠뷰로 나뉘었습니다.
• 테이블뷰 셀은 기본으로 제공되는 특정 스타일을 적용할 수 있지만 컬렉션뷰 셀은 특정한 스타일이 따로 없습니다.
• 테이블뷰 셀은 목록형태로만 레이아웃 되지만, 컬렉션뷰 셀은 다양한 레이아웃을 지원합니다.

컬렉션뷰 사용법

1. 메인스토리보드에서 ViewController를 추가한다.

2.

를 끌어다가 놓고, 오토레이아웃 설정한다.( 셀 따로 추가안해도됨 -스토리보드로추가시 )

컬렉션뷰 안의 cell을 클릭하고, identifier이름을 cell로 설정한다.

 

컬렉션뷰와 뷰컨트롤러간에 델리게이트, 데이터소스를 연결해준다.

셀클릭시 셀이 하나씩 늘어남

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
    
    //셀갯수
    var numberOfCell: Int = 10
    // 셀이름
    let cellIdentifier:String = "cell"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    // 반환하는 셀값
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.numberOfCell
    }
    
    // 셀이름, index 
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell: UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: self.cellIdentifier, for: indexPath)
        
        return cell
    }
    
    // 셀클릭시 셀추가
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath){
       
        self.numberOfCell += 1
        collectionView.reloadData()
    }
}

---

https://www.boostcourse.org/mo326/lecture/16911/?isDesc=false 셀커스터마이징

에셋에 제이슨 넣어서 가져와서 컬렉션뷰에 뿌리기

1.뷰컨트롤러 생성

2.뷰컨트롤러에 컬랙션뷰 넣기 - 셀이름 = cell

3.셀클래스 생성 - 아이비 아울렛 연결

4.뷰컨트롤러와 컬랙션뷰 델리게이트, 데이터소스연결

5.제이슨 Asset에 넣기

6.제이슨 Codable클래스 생성 

 

7.뷰컨트롤러에서 제이슨데이터담을 빈배열 생성 

8. 컬렉션뷰 아이비아울렛 연결

9. 컬렉션뷰 메소드작성

10.뷰디드로드에서 제이슨 디코딩, 제이슨 파싱 , 리로드데이터

 

전체소스

ViewController.swift

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
    
    
//    var numberOfCell: Int = 10
    let cellIdentifier:String = "cell"
    var friends: [Friend] = []
    // 콜렉션뷰 연결
    @IBOutlet weak var collectionView: UICollectionView!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 제이슨가져오기
        let jsonDecoder: JSONDecoder = JSONDecoder()
        guard let dataAsset: NSDataAsset = NSDataAsset(name: "friends") else {
            return
        }
        
        do{
            self.friends = try jsonDecoder.decode([Friend].self, from: dataAsset.data)
        }catch {
            print(error.localizedDescription)
        }
        self.collectionView.reloadData()
        
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
//        return self.numberOfCell
        return self.friends.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell: FriendCollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: self.cellIdentifier, for: indexPath) as! FriendCollectionViewCell
        
        let friend: Friend = self.friends[indexPath.item]

        cell.nameAgeLabel.text = friend.nameAndAge
        cell.adressLabel.text = friend.fullAddress
        
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath){
        // 컬랙션뷰의 데이터를 먼저 삭제 해주고, 데이터 배열의 값을 삭제해줍니다!! , '반대로할시에 데이터가 꼬이는 현상이 발생합니다.'
//        self.numberOfCell += 1
        // 선택한 번호에 해당하는 셀지우기 어떻게????
        print(indexPath.row)

        // 섹삭제
        if let selectedCells = collectionView.indexPathsForSelectedItems {
            // 1
            let items = selectedCells.map { $0.item }.sorted().reversed()
            // 2
            for item in items {
                friends.remove(at: item)
            }
            // 3
            collectionView.deleteItems(at: selectedCells)
            collectionView.reloadData()
        }
    }

}

FriendCollectionViewCell.swift

import UIKit

class FriendCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet var nameAgeLabel: UILabel!
    @IBOutlet var adressLabel: UILabel!
}

 

Friend.swift

import Foundation

struct Friend: Codable{
    
    struct Adderess: Codable{
        let country: String
        let city: String
    }
    
    let name: String
    let age: Int
    let addressInfo: Adderess
    
    var nameAndAge: String{
        return self.name + "(\(self.age)"
    }
    
    var fullAddress: String {
        return self.addressInfo.city + ", " + self.addressInfo.country
    }
    
    enum CodingKeys: String, CodingKey {
        case name
        case age
        case addressInfo = "address_info"
    }
}

friends.json

[
	{
		"name":"하나",
		"age":22,
		"address_info": {
			"country":"대한민국",
			"city":"울산"
		}
	},
	{
		"name":"주현",
		"age":34,
		"address_info": {
			"country":"대한민국",
			"city":"김해"
		}
	},
	{
		"name":"영선",
		"age":26,
		"address_info": {
			"country":"대한민국",
			"city":"부천"
		}
	},
	{
		"name":"미정",
		"age":16,
		"address_info": {
			"country":"대한민국",
			"city":"부산"
		}
	},
	{
		"name":"은희",
		"age":36,
		"address_info": {
			"country":"대한민국",
			"city":"성남"
		}
	},
	{
		"name":"현국",
		"age":54,
		"address_info": {
			"country":"프랑스",
			"city":"파리"
		}
	},
	{
		"name":"현진",
		"age":34,
		"address_info": {
			"country":"미국",
			"city":"LA"
		}
	},
	{
		"name":"은지",
		"age":45,
		"address_info": {
			"country":"영국",
			"city":"런던"
		}
	},
	{
		"name":"재명",
		"age":24,
		"address_info": {
			"country":"인도네시아",
			"city":"발리"
		}
	},
	{
		"name":"민지",
		"age":42,
		"address_info": {
			"country":"중국",
			"city":"북경"
		}
	},
	{
		"name":"종명",
		"age":14,
		"address_info": {
			"country":"일본",
			"city":"도쿄"
		}
	},
	{
		"name":"진성",
		"age":16,
		"address_info": {
			"country":"베트남",
			"city":"하노이"
		}
	},
	{
		"name":"완복",
		"age":24,
		"address_info": {
			"country":"미국",
			"city":"하와이"
		}
	},
	{
		"name":"미진",
		"age":27,
		"address_info": {
			"country":"대한민국",
			"city":"울산"
		}
	}
]

---

​

참고

 

Collection View

https://www.ioscreator.com/tutorials/delete-item-collection-view-controller-ios-tutorial

Delete Items from Collection View Controller iOS Tutorial - iOScreator

https://green1229.tistory.com/52

Collection View