如何在 Swift 的 UICollectionViewCell 中将图像显示到中心答案

【问题标题】：How to show image into centre in UICollectionViewCell in Swift如何在 Swift 的 UICollectionViewCell 中将图像显示到中心
【发布时间】：2017-08-28 07:17:18
【问题描述】：

我想将图像显示到中心，在 UICollectionView 第一个项目中，当我移动第二个项目时，该项目不会居中显示图像

  let itemsPerRow:CGFloat = 1
  var sectionInsets =  UIEdgeInsets(top: 20.0, left: 20.0, bottom: 20.0, right: 20.0)
  var productImage = [String]()


 func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return productImage.count
    }

    func collectionView(_ collectionView: UICollectionView,
                        cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ProductInfoDetailCell", for: indexPath)  as! ProductInfoDetailCell
        cell.productLargeImageView.image = UIImage(named: productImage[indexPath.row])
        //cell.productLabel.text = productTitle[indexPath.row]
        return cell
    }




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

        let paddingSpace = (sectionInsets.left ) * (itemsPerRow + 1)
        let availableWidth = collectionView.frame.size.width - paddingSpace
        let widthPerItem = availableWidth / itemsPerRow
        return CGSize(width: widthPerItem , height: 400)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return sectionInsets
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {

        return sectionInsets.left

    }

第一张图片，项目居中-

第二张图片，项目未居中

我也在 UICollectionView 中使用水平滚动和分页

【问题讨论】：

您是否在 collectionView 上启用了分页功能？如果是这样，您需要使您的 collectionivewcell 宽度与屏幕宽度一样大。

标签： swift swift3 uicollectionview

【解决方案1】：

您需要使用自定义UICollectionViewFlowLayout 来实现您的要求。

1.创建UICollectionViewFlowLayout的子类

class CustomCollectionViewFlowLayout: UICollectionViewFlowLayout
{
    override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint
    {
        if let collectionViewBounds = self.collectionView?.bounds
        {
            let halfWidthOfVC = collectionViewBounds.size.width * 0.5
            let proposedContentOffsetCenterX = proposedContentOffset.x + halfWidthOfVC
            if let attributesForVisibleCells = self.layoutAttributesForElements(in: collectionViewBounds)
            {
                var candidateAttribute : UICollectionViewLayoutAttributes?
                for attributes in attributesForVisibleCells
                {
                    let candAttr : UICollectionViewLayoutAttributes? = candidateAttribute
                    if candAttr != nil
                    {
                        let a = attributes.center.x - proposedContentOffsetCenterX
                        let b = candAttr!.center.x - proposedContentOffsetCenterX
                        if fabs(a) < fabs(b)
                        {
                            candidateAttribute = attributes
                        }
                    }
                    else
                    {
                        candidateAttribute = attributes
                        continue
                    }
                }

                if candidateAttribute != nil
                {
                    return CGPoint(x: candidateAttribute!.center.x - halfWidthOfVC, y: proposedContentOffset.y);
                }
            }
        }
        return CGPoint.zero
    }
}

2.在storyboard中将Collection View Flow Layout类设置为CustomCollectionViewFlowLayout。

【讨论】：