collectionView의 FlowLayout ( 3*N 나열 )

3*N으로 콜렉션뷰의 cell을 나열하는 방법입니다.

 

첫번째. (셀간 간격 존재o, 마진값 존재x)

 

 

검정색 테두리와 초록색 셀 사이의 간격이 존재하지 않는 좌우로 딱 붙은 나열 방식입니다.

 

 

/ MARK: - FlowLayout

// 마진x, 여백o
extension ViewController: UICollectionViewDelegateFlowLayout {

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

        	let interval:CGFloat = 3
        	let width: CGFloat = ( UIScreen.main.bounds.width - interval * 2 ) / 3
        	return CGSize(width: width , height: width )
    }

	//2
    func collectionView(_ collectionView: UICollectionView, 
    	layout collectionViewLayout: UICollectionViewLayout, 
    	minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        	return 3
    }

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

 

1. 전체 width에서 두칸의 여백을 빼준 뒤 3을 나눠주면 초록색 셀 하나의 width를 구할 수 있습니다.

 

2. minimunLine간격 (첫번째 가로줄과 두번째 가로줄 사이의 간격, 행간) 을 3으로 주면

세로줄 간의 간격이 최소한 3이 됩니다.

 

3. minimunInterItem간격 (첫번째 셀과 두번째 셀 사이의 간격, 자간) 을 3으로 주면

가로줄 간의 간격이 최소한 3이 됩니다.

 

 

 

 

두번째는 전체화면에서 좌우로 마진값을 갖도록 하는 3*N 배열 방식입니다. (마진값o)

 

 

좌우의 검정색 테두리와 초록색 셀 간의 간격이 존재하는 모습.

 

 

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        let interval:CGFloat = 3
        let width: CGFloat = ( UIScreen.main.bounds.width - interval * 4 ) / 3
        return CGSize(width: width , height: width )
    }
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 3
    }
    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 3
    }
    
    //collection VC section 마진값
    func collectionCellUI(){
        let interval:CGFloat = 3
        let flowLayout: UICollectionViewFlowLayout
        flowLayout = UICollectionViewFlowLayout()
        flowLayout.sectionInset = UIEdgeInsets.init(top: interval , left: interval, bottom: 0, right: interval)
        self.collectionView.collectionViewLayout = flowLayout
    }
}

 

collectionCellUI() 에서 마진값을 추가하였습니다. (viewDidLoad에서 collectionCellUI()를 호출)

 

섹션(셀 아니고 섹션)의 위, 아래, 좌, 우에  마진값을 주었고.

마찬가지로 최소 세로 간격, 최소 가로 간격에 3의 여백값을 주었습니다.

 

width의 값으로는 총 가로의 여백이 (마진값 2개, 셀간 여백 2개) 총 4개 이므로 

let width: CGFloat = ( UIScreen.main.bounds.width - interval * 4 ) / 3

 

그리고 셀의 크기로 CGSize( width, width ) 주면

 

화면의 좌우에 여백이 존재하는 3*N 인

collectionView cell의 표현이 가능합니다!!

 

 

감사합니다.

 

추가적인 collectionView cell의 custom layout

https://demian-develop.tistory.com/21