将图像缩放以适应 - iOS

Question

我有一个UICollectionView，其中显示了12张图片。这些图片没有适应单元格，被裁剪了，但我希望它们适应单元格而不被裁剪。

应该使图像自适应的代码是：

 cell.imageView.contentMode = UIViewContentMode.ScaleAspectFit
 cell.imageView.image = UIImage(named: name)

这是整个viewController类和屏幕截图的代码：

import UIKit

class DressingRoomViewController:
        UIViewController,
        UICollectionViewDelegateFlowLayout,
        UICollectionViewDataSource {

    @IBOutlet weak var collectionView: UICollectionView!

    let identifier = "cellIdentifier"
    let dataSource = DataSource()

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.dataSource = self
    }

    override func viewDidAppear(animated: Bool) {
        //  Notes on the equation to get the cell size:
        //  cells per row = 6
        //  cell spacing = 10
        //  collectionView.layout.inset = 20 (10 left, 10 right)
        let cellSize = (collectionView.collectionViewLayout
            .collectionViewContentSize().width - 20) / 6 - 10

        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()

        layout.sectionInset = UIEdgeInsets( top: 20,
                                            left: 10,
                                            bottom: 10,
                                            right: 10)

        layout.itemSize = CGSize(width: cellSize, height: cellSize)

        collectionView.collectionViewLayout = layout
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    override func prepareForSegue(  segue: UIStoryboardSegue,
                                    sender: AnyObject?) {
        if (segue.identifier == "dressingRoom2MyOutfits") {
            let myOutfitsViewController = segue.destinationViewController
                as! MyOutfitsViewController
        }
    }
}



// MARK:- UICollectionViewDataSource Delegate
extension DressingRoomViewController : UICollectionViewDataSource {

    func numberOfSectionsInCollectionView(
        collectionView: UICollectionView) -> Int {
            return 1
    }

    func collectionView(collectionView: UICollectionView,
        numberOfItemsInSection section: Int) -> Int {
            return 12
    }

    func collectionView(collectionView: UICollectionView,
        cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(
            identifier,forIndexPath:indexPath) as! FruitCell

        let fruits: [Fruit] = dataSource.fruits
        let fruit = fruits[indexPath.row]

        let name = fruit.name!

        cell.imageView.contentMode = UIViewContentMode.ScaleAspectFit
        cell.imageView.image = UIImage(named: name)

        return cell
    }
}

编辑：以下是FruitCell类，以防您想知道。

    class FruitCell: UICollectionViewCell {

    @IBOutlet weak var imageView: UIImageView!

}

- BeniaminoBaggins

---

更改UIImageView的内容模式。这是链接：https://dev59.com/qGYq5IYBdhLWcg3w30Tc - Mihir Oza

@MihirOza 我已经在更改UIImageView的contentMode。因此，我尝试添加UIImageView的自动调整大小掩码，但没有任何作用。 - BeniaminoBaggins

这难道不是你早先在http://stackoverflow.com/questions/32194205/uicollectionview-cells-do-not-take-up-width-of-uicollectionview中的重复问题吗？ - matt

@matt 不，我已经解决了之前的问题，正如你所看到的，我的CollectionView有6列。这个问题是关于单元格内部的图像被裁剪，这不是我想要的。 - BeniaminoBaggins

@matt 我想将图像按比例缩小。保持单元格大小不变。会改变大小的是图像，以适应单元格的大小。 - BeniaminoBaggins

Answer 1

如果从界面构建器（interface builder）中放置了一个UIImageView在一个UICollectionViewCell中，那么UIImageView将不会知道已经通过编程方式初始化的UICollectionViewFlowLayout。因此，我设置的layout.sectionInset会使UICollectionViewCells变小，即使在将从界面构建器中创建的UIImageView限制为UICollectionViewCell的边距时，UIImageView也不会调整大小以变小。

解决方案是通过编程方式初始化UIImageView并将其大小设置为考虑到单元格间隔的单元格大小。

这是代码：

import UIKit

class DressingRoomViewController:
        UIViewController,
        UICollectionViewDelegateFlowLayout,
        UICollectionViewDataSource {

    @IBOutlet weak var collectionView: UICollectionView!

    let identifier = "cellIdentifier"
    let dataSource = DataSource()
    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    let cellSpacing: CGFloat = 2
    let cellsPerRow: CGFloat = 6


    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.dataSource = self
    }

    override func viewDidAppear(animated: Bool) {
        let cellSize = (collectionView.collectionViewLayout
            .collectionViewContentSize().width / cellsPerRow) - (cellSpacing)

        layout.itemSize = CGSize(width: cellSize, height: cellSize)
        layout.minimumInteritemSpacing = cellSpacing
        layout.minimumLineSpacing = cellSpacing
        collectionView.collectionViewLayout = layout
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    override func prepareForSegue(  segue: UIStoryboardSegue,
                                    sender: AnyObject?) {
        if (segue.identifier == "dressingRoom2MyOutfits") {
            let myOutfitsViewController = segue.destinationViewController
                as! MyOutfitsViewController
        }
    }
}



// MARK:- UICollectionViewDataSource Delegate
extension DressingRoomViewController : UICollectionViewDataSource {

    func numberOfSectionsInCollectionView(
        collectionView: UICollectionView) -> Int {
            return 1
    }

    func collectionView(collectionView: UICollectionView,
        numberOfItemsInSection section: Int) -> Int {
            return 12
    }

    func collectionView(collectionView: UICollectionView,
        cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(
            identifier,forIndexPath:indexPath) as! FruitCell

        let fruits: [Fruit] = dataSource.fruits
        let fruit = fruits[indexPath.row]

        let name = fruit.name!

        var imageView :UIImageView
        imageView = UIImageView(frame:CGRectMake(   0,
                                                    0,
            (collectionView.collectionViewLayout
                .collectionViewContentSize().width / cellsPerRow)
                - (cellSpacing),
            (collectionView.collectionViewLayout
                .collectionViewContentSize().width / cellsPerRow)
                - (cellSpacing)))

        imageView.contentMode = UIViewContentMode.ScaleAspectFit
        imageView.image = UIImage(named: name)
        imageView.backgroundColor = UIColor.redColor()
        cell.addSubview(imageView)

        return cell
    }
}

编辑：我成功地通过创建一个高度约束的outlet（在interface builder中使用control + drag height constraint到viewController swift文件中）并将其称为heightConstraint来裁剪UICollectionView底部的空白空间，然后在viewDidAppear的底部添加了以下两行代码：

self.heightConstraint.constant = collectionView.contentSize.height
self.view.layoutIfNeeded()

下面是在UICollectionView上显示白色背景，在UIImageView上显示红色背景的效果（在所有其他设备尺寸上也有效）：

- BeniaminoBaggins