이 프로젝트는 Xcode 10 및 Swift 4.2에서 테스트되었습니다.
새로운 프로젝트 만들기
단일 뷰 앱일 수 있습니다.
코드 추가
새 Cocoa Touch Class 파일을 작성하십시오 (파일> 새로 작성> 파일 ...> iOS> Cocoa Touch Class). 이름을 지정하십시오 MyCollectionViewCell
. 이 클래스는 스토리 보드에서 셀에 추가 한보기에 대한 아울렛을 보유합니다.
import UIKit
class MyCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var myLabel: UILabel!
}
나중에이 콘센트를 연결하겠습니다.
ViewController.swift를 열고 다음 내용이 있는지 확인하십시오.
import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard
var items = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"]
// MARK: - UICollectionViewDataSource protocol
// tell the collection view how many cells to make
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.items.count
}
// make a cell for each cell index path
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
// get a reference to our storyboard cell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell
// Use the outlet in our custom class to get a reference to the UILabel in the cell
cell.myLabel.text = self.items[indexPath.item]
cell.backgroundColor = UIColor.cyan // make cell more visible in our example project
return cell
}
// MARK: - UICollectionViewDelegate protocol
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
// handle tap events
print("You selected cell #\(indexPath.item)!")
}
}
노트
UICollectionViewDataSource
및 UICollectionViewDelegate
컬렉션 뷰는 다음 프로토콜입니다. UICollectionViewFlowLayout
프로그래밍 방식으로보기의 크기를 변경하기 위해 프로토콜을 추가 할 수도 있지만 반드시 필요한 것은 아닙니다.
- 우리는 그리드에 간단한 문자열을 넣었지만 나중에 이미지를 만들 수 있습니다.
스토리 보드 설정
컬렉션 뷰를 스토리 보드의 뷰 컨트롤러로 드래그하십시오. 원하는 경우 제약 조건을 추가하여 부모보기를 채울 수 있습니다.
속성 관리자의 기본값도
컬렉션 뷰의 왼쪽 상단에있는 작은 상자는 컬렉션 뷰 셀입니다. 프로토 타입 셀로 사용할 것입니다. 레이블을 셀로 드래그하여 가운데에 놓습니다. 원하는 경우 셀 테두리의 크기를 조정하고 제한을 추가하여 레이블을 가운데에 맞출 수 있습니다.
컬렉션 뷰 셀에 대한 속성 관리자의 식별자 상자에 "셀"(따옴표없이)을 씁니다. 이것은 let reuseIdentifier = "cell"
ViewController.swift 와 같은 값 입니다.
셀의 Identity Inspector에서 클래스 이름을 MyCollectionViewCell
우리가 만든 사용자 정의 클래스 로 설정합니다 .
콘센트를 연결
- 에 수집 셀의 라벨을 걸고
myLabel
의 MyCollectionViewCell
클래스입니다. Control- 드래그 할 수 있습니다 .
- Collection View
delegate
와 dataSource
View Controller에 연결하십시오. (문서 개요에서 Collection View를 마우스 오른쪽 단추로 클릭 한 다음 더하기 화살표를 클릭하여 View Controller로 끌어옵니다.)
끝마친
셀에 레이블을 중앙에 배치하기 위해 제약 조건을 추가하고 컬렉션 뷰를 부모의 벽에 고정한 후의 모습은 다음과 같습니다.
개선
위의 예제는 작동하지만 다소 추악합니다. 다음과 같이 연주 할 수있는 몇 가지 사항이 있습니다.
배경색
Interface Builder에서 Collection View> Attributes Inspector> View> Background로 이동하십시오 .
셀 간격
셀 사이의 최소 간격을 더 작은 값으로 변경하면 더 좋아 보입니다. Interface Builder에서 Collection View> Size Inspector> Min Spacing으로 이동 하여 값을 줄이십시오. "셀의 경우"는 수평 거리이고 "라인의 경우"는 수직 거리입니다.
세포 모양
둥근 모서리, 테두리 등을 원하면 셀을 가지고 놀 수 있습니다 layer
. 다음은 샘플 코드입니다. cell.backgroundColor = UIColor.cyan
위 코드에서 직접 입력하십시오 .
cell.layer.borderColor = UIColor.black.cgColor
cell.layer.borderWidth = 1
cell.layer.cornerRadius = 8
레이어로 수행 할 수있는 다른 작업 (예 : 그림자)에 대해서는 이 답변 을 참조하십시오 .
탭했을 때 색상 변경
셀이 탭에 시각적으로 반응 할 때 더 나은 사용자 경험을 제공합니다. 이를 달성하는 한 가지 방법은 셀을 터치하는 동안 배경색을 변경하는 것입니다. 이렇게하려면 ViewController
클래스에 다음 두 가지 방법을 추가하십시오 .
// change background color when user touches cell
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
cell?.backgroundColor = UIColor.red
}
// change background color back when user releases touch
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
cell?.backgroundColor = UIColor.cyan
}
업데이트 된 모양은 다음과 같습니다.
추가 연구
이 Q & A의 UITableView 버전