You can achieve this by creating two separate item groups (one for the first cell which has a half width and second for the rest of the cells). Then combine those two groups and add it to the section.
class ViewController: UIViewController {
@IBOutlet var collectionView: UICollectionView!
let headerId = "headerId"
let categoryHeaderId = "categoryHeaderId"
let colorarray = [UIColor.yellow, UIColor.green, UIColor.green, UIColor.green, UIColor.green, UIColor.green, UIColor.green, UIColor.green]
override func viewDidLoad() {
super.viewDidLoad()
self.navigationItem.title = "My Albums"
collectionView.register(AlbumItemCell.self, forCellWithReuseIdentifier: AlbumItemCell.reuseIdentifer)
collectionView.register(CategoryHeaderView.self, forSupplementaryViewOfKind: categoryHeaderId, withReuseIdentifier: headerId)
collectionView.collectionViewLayout = createCompositionalLayout()
collectionView.reloadData()
}
private func createCompositionalLayout() -> UICollectionViewCompositionalLayout {
return UICollectionViewCompositionalLayout { (sectionNumber, env) -> NSCollectionLayoutSection? in
self.firstLayoutSection()
}
}
private func firstLayoutSection() -> NSCollectionLayoutSection {
let cellWidth : CGFloat = 200
let cellHeight : CGFloat = 200
let smallItemSize = NSCollectionLayoutSize(widthDimension: .absolute(cellWidth/2), heightDimension: .absolute(cellHeight))
let smallItem = NSCollectionLayoutItem(layoutSize: smallItemSize)
let smallGroupSize = NSCollectionLayoutSize(widthDimension: .absolute(cellWidth/2), heightDimension: .absolute(cellHeight))
let smallGroup = NSCollectionLayoutGroup.horizontal(layoutSize: smallGroupSize, subitem: smallItem, count: 1)
smallGroup.contentInsets = .init(top: 0, leading: 8, bottom: 0, trailing: 8)
let largeItemSize = NSCollectionLayoutSize(widthDimension: .absolute(cellWidth), heightDimension: .absolute(cellHeight))
let largeItem = NSCollectionLayoutItem(layoutSize: largeItemSize)
largeItem.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 8)
let largeGroupSize = NSCollectionLayoutSize(widthDimension: .absolute(CGFloat((cellWidth + 8) * CGFloat((colorarray.count - 1)))), heightDimension: .absolute(cellHeight))
let largeGroup = NSCollectionLayoutGroup.horizontal(layoutSize: largeGroupSize, subitem: largeItem, count: colorarray.count - 1 )
let groupSize = NSCollectionLayoutSize(widthDimension: .absolute(cellWidth * CGFloat(colorarray.count)), heightDimension: .absolute(cellHeight))
let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [smallGroup, largeGroup])
let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .groupPaging
return section
}
}
extension ViewController: UICollectionViewDataSource {
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
colorarray.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: AlbumItemCell.reuseIdentifer, for: indexPath) as! AlbumItemCell
cell.configure(color: colorarray[indexPath.row])
return cell
}
}
class AlbumItemCell: UICollectionViewCell {
static let reuseIdentifer = "album-item-cell-reuse-identifier"
let view = UIImageView()
override init(frame: CGRect) {
super.init(frame: frame)
view.layer.cornerRadius = 10
view.layer.masksToBounds = true
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func configure(color: UIColor) {
view.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(view)
NSLayoutConstraint.activate([
view.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
view.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
view.topAnchor.constraint(equalTo: contentView.topAnchor),
view.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
])
view.backgroundColor = color
}
}
Result
