缩放图像以适应 - iOS答案

【问题标题】：Scale image to fit - iOS缩放图像以适应 - iOS
【发布时间】：2015-11-18 19:22:40
【问题描述】：

我有一个显示 12 个图像的 UICollectionView。图像不适合单元格，它们正在被裁剪，但我希望它们适合单元格而不被裁剪。

应该使图像比例适合的代码是：

 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!

}

【问题讨论】：

更改 uiimageview 的内容模式。这是链接：stackoverflow.com/questions/14134035/…
@MihirOza 我已经在更改 UIImageView 的 contentMode。所以我尝试添加 UIImageView 的 autoresizingMask 但什么也没做。
这不只是你之前stackoverflow.com/questions/32194205/…的重复吗？
@matt 不，我已经解决了上一个问题，您可以看到我的 CollectionView 中有 6 列。这个问题是关于被裁剪的单元格内的图像，这不是我想要的。
"我已经解决了上一个问题" 其实我相信我解决了它。但是没关系...这里的问题是您不了解图像视图的工作原理，或者您想自己重新绘制原始图像以按比例缩小？

标签： ios image swift uiimageview uicollectionviewcell

【解决方案1】：

从界面构建器放置在 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
    }
}

编辑：我能够通过为高度约束（界面构建器中的控制+拖动高度约束到 viewController swift 文件）创建一个出口来裁剪 UICollectionView 底部的空白空间，并将其称为 heightConstraint，并且然后在 viewDidAppear 的底部添加了这两行代码：

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

因此，为了向您展示 UICollectionView 上的白色背景和 UIImageViews 上的红色背景的结果，下面是结果（也适用于所有其他设备尺寸）：

【讨论】：