octodevnet / customcollectionviewlayout

CustomCollectionViewLayout

 

Expected result

Implementation

Prease find full tutorial at the following link. In this tutorial, I'm going to show you, how to create a custom UICollectionView layout.

customcollectionviewlayout's Issues

Implement To Create Layout like Instagram Explore

Hi, I wanna implement your code to create UICollectionView Layout like Instagram Explore. It has to has ability to detect page number. One page consist of 12 items. The default UICollectionView cell's shape is square. But, the UICollectionView cell in odd or even position in odd or even page number has to be 2x bigger than the other cells in the page. To create that came with this algorithm:

       switch (indexPath.item%12, pageNumber/2) {
        case (0, 1), (1,0):
            itemWidth = itemWidth * 2
            itemHeight = itemWidth
        default:
            break
        }

I implement that code in function calculateItemFrame(indexPath: IndexPath, columnIndex: Int, columnYoffset: CGFloat, pageNumber: Int) in OCTGalleryLayout_v1.swift file (I got this file from this repo). I also modified the code in that function to make a square UICollectionView cell. So, the code in that function become like this:

override func calculateItemFrame(indexPath: IndexPath, columnIndex: Int, columnYoffset: CGFloat, pageNumber: Int) -> CGRect {
        //let rowIndex = indexPath.item / totalColumns
        //let halfItemHeight = (_itemSize.height - interItemsSpacing) / 2
        
        //Resolving Item height
        var itemHeight = _itemSize.height
        var itemWidth = _itemSize.width
        
        switch (indexPath.item%12, pageNumber/2) {
        case (0, 1), (1,0):
            itemWidth = itemWidth * 2
            itemHeight = itemWidth
        default:
            break
        }

        // By our logic, first and last items in reduced height column have height divided by 2.
        /*if (rowIndex == 0 && columnIndex == kReducedHeightColumnIndex) || self.isLastItemSingleInRow(indexPath) {
            itemHeight = halfItemHeight
        }*/
        
        return CGRect(x: _columnsXoffset[columnIndex], y: columnYoffset, width: itemWidth, height: itemHeight)
    }

The result is not as expected, yet.

Could you give me some insight how to do this?

Thank you.