간단한 collectionview - storyboard로 만들기

간단한 collectionview 

소스파일 첨부

StroyBoardCollectionView1.zip

오른쪽 하단에 오브젝트 파레트에서 collecionview를 왼쪽 마우스로 끌어다가 스토리보드에넣고 cell에 imageview를 넣어준다.

cell identifiter는 RowCell로 해준다. 그리고 흰 바탕화면을 오른쪽 드래그 해서 위쪽 노란색 동그라미에 가져다 두면 datasource와 delegate 메뉴가 뜨는데 클릭해준다.

*나중에 소스코드에서 따로 셀을 구성하는 custom class를 만들어서 연결 시켜 줄것임

소스

import UIKit

//필요한 프로토콜 상속 받기

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {

    

    

    let images = ["a.jpg","b.jpg","c.jpg","a.jpg","b.jpg","c.jpg","a.jpg","b.jpg","c.jpg","a.jpg","b.jpg","c.jpg","a.jpg","b.jpg","c.jpg","a.jpg","b.jpg","c.jpg","a.jpg","b.jpg","c.jpg","a.jpg","b.jpg","c.jpg","a.jpg","b.jpg","c.jpg","a.jpg","b.jpg","c.jpg","a.jpg","b.jpg","c.jpg"]

    

    override func viewDidLoad() {

        super.viewDidLoad()

    

    }

    

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

        //이미지 카운터 하는 함수

        return images.count

    }

    

    //셀 구성하기

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "RowCell", for: indexPath) as! CustomCell

        cell.image.image = UIImage(named: images[indexPath.row])

        return cell

    }

    

    

    // 사이즈

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

      let collectionViewCellWithd = collectionView.frame.width / 3 - 1

        return CGSize(width: collectionViewCellWithd, height: collectionViewCellWithd)

    }

    //위아래 라인 간격

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {

        return 1

    }

    //옆 라인 간격

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {

        return 1

    }

    

}

//커스텀 셀 구현

class CustomCell: UICollectionViewCell {

    

    @IBOutlet weak var image: UIImageView!

}