简体   繁体   中英

Custom layout UICollectionView swift

I am trying to achieve a custom layout like this one :

想要布局

I am trying to implement it via a UICollectionView. First I use this code to have the desired size :

func collectionView(collectionView: UICollectionView,
    layout collectionViewLayout: UICollectionViewLayout,
    sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize{
        return CGSizeMake((collectionView.frame.size.width / 2) - 2 , (collectionView.frame.size.height / 3) - 2)
}

It's working fine.

The problem is that my picture is not properly centered. I did it this way :

情节提要中的约束

Let me explain :

  1. One constraint to align the center of the uiimage on X
  2. One constraint to do the same thing on Y
  3. One constraint to keep the image ratio
  4. One constrain to say that the height of the image is 70% of the cell height

    And the result is very not the one expected :

布局的实际结果

i did it using custom layout.

    let collLayout:UICollectionViewFlowLayout = layout as! UICollectionViewFlowLayout
    collLayout.scrollDirection = .Vertical
    collLayout.minimumInteritemSpacing = 10
    let width = (frame.size.width - 3*collLayout.minimumInteritemSpacing)*0.5

    collLayout.itemSize = CGSizeMake(width, width)

    collLayout.sectionInset = UIEdgeInsetsMake(0, 10, 0, 10)

And then initialize your collection view with this custom layout.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM