[iOS 레이아웃] Swift3 UICollectionView 사용법

안드로이드에 GridView, RecyclerView가 있다면 iOS에는 UICollectionView가 있습니다.

이는 화면에 격자로 아이템을 배치하거나 할때 사용 합니다.

이를 구성하기 위해서는 셀 클래스와 UICollectionView의 셀 속성 그리고, 안드로이드의 아답터에 해당되는것들이 필요합니다.

먼저 UICollectionView의  셀 속성입니다.

let layout : UICollectionViewFlowLayout = UICollectionViewFlowLayout()

layout.itemSize = CGSize(width: self.view.frame.width , height: self.view.frame.height/3)

layout.scrolldirection = .horizontal / . vertical   // 가로 혹은 세로 한가지만 지정 기본값은 세로

세번째 라인은 스크롤의 방향을 설정하는것입니다.

verticaltableview를 생각 하셨다면, UICollectionView에서 스크롤방향을 가로로 설정해서 구현 할수 있습니다.

다음은 UICollectionView를 생성해서 위의 속성을 넣어주는것입니다.

let collection : UICollectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: 0, height: 0), collectionViewLayout: layout)

collection.register(MyCell.self, forCellWithReuseIndentifier : "mycell")

collection.delegate = self

collection.dataSource = self

여기에서는 UICollectionView를 생성해서 위의 속성을 지정해주었고, 사용할 셀과 셀의 식별자를 등록 해주었습니다.

dataSource와 delegate는 클래스 내에서 처리한다는 의미이고, 이를 위해서는 클래스에 UICollectionViewDataSource 와 UICollectionViewDelegate를 상속 해주어야 합니다.

예를들어서 cellectionview가 위치한 화면의 클래스가 

class MyView : UICollectionViewDataSource, UICollectionViewDelegate{}

와 같은형식으로 되어 있어야 합니다.

MyCell은 따로 정의한 셀의 클래스 입니다.

같은 클래스내에 만들어도 되고 따로 파일을 만들어도 됩니다.

다음과 같이 설정합니다.

class MyCell : UICollectionViewCell {

  var view1: UIVIew!

  var view2: UILabel!

  var view3: UILabel!

  override init(frame: CGRect){

     view1 = UIView(frame: CGRect(x: 0, y: 0, width: frame.width - 10, height: frame.height - 10))

     view2 = UILabel(frame: CGRect(x: 10, y: 10, width: 0, height: 0))

     view3 = UILabel(frame: CGRect(x: 10, y: 20, width: 0, height: 0))

     view1.addSubview(view2)

     view1.addSubview(view3)

     contentview.addSubview(view1)

  }

}

위의 클래스는 위에서 지정한 cell의 사이즈를 가지는 frame에 padding을 10씩 지정하기위해 view1을 셀의 서브뷰로 넣었고, 그안에 view2와 view3을 서브뷰로 넣어서 텍스트를 2줄 출력하는 셀 입니다.

셀클래스는 본인이 원하는대로 작성 하시면 됩니다.

다음은 안드로이드에서 아답터 역할을 하는 cellForItemAt부분을 작성합니다.

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

    let cell = cellectionView.dequeueReusableCell(withReuseIndentifier: "mycell", for: indexPath) as! MyCell

    

    cell.view2.text = my_arr[indexPath.row]

    cell.view2.sizeToFit()

    cell.view3.text = my_arr2[indexPath.row]

    cell.view3.sizeToFit()

    return cell

}

sizeToFit()을 하는 이유는 위에 클래스에서 UILabel의 높이 너비를 0으로 설정 해놓고 이후에 text를 넣으면서 사이즈를 조정하기 위함입니다.

다음은 아이템의 갯수를 반환하는 부분입니다.

numberOfRowsInSction section: Int) -> Int{

   return myList.count

}

아이템에 넣을 리스트갯수를 반환 합니다.

이 두가지가 컬렉션뷰를 구성할때 필수로 들어가는 부분입니다.

그리고 다음은 셀을 클릭했을때의 이벤트 처리입니다.

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath){

    //indexPath.row 로 선택된 아이템을 알수 있고, 이에 맞는 처리를 하면 됩니다.

}

저희 위미르에서는 모바일 어플리케이션(Android/iOS), Web 개발을 해드리고 있습니다.

문의 전화 : 070-4177-3962