Swift - 如何制作较小版本的 16:9 视频缩略图但保持纵横比不变

Swift -how to make a smaller version of a 16:9 video thumbnail but keep the aspect ratio the same

1080p 高清视频的宽高比是 16:9,要在单元格中设置视频帧以便它完全填满我会使用 view.frame.width * 9 / 16:

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

    // the collection view is pinned to both sides of the vc with no spacing
    let width = collectionView.frame.width

    let videoHeight: CGFloat = width * 9 / 16

    return CGSize(width: width, height: videoHeight)
}

// inside the cell itself:

let videoHeight: CGFloat = self.frame.width * 9 / 16

contentView.addSubview(thumbnailImageView)
thumbnailImageView.topAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
thumbnailImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
thumbnailImageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true

// here is where I set the thumbnail's height
thumbnailImageView.heightAnchor.constraint(equalToConstant: videoHeight).isActive = true

这完全给了我:

问题是我想要一个类似于 youtube 的 thumbnailImageView 的较小版本。我想在屏幕左侧添加较小的 thumbnailImageView,但保持纵横比不变

问题是当我尝试这样做时,我得到了一个正方形而不是矩形。我将单元格的宽度除以 3,然后将其乘以 9 /16,但这不起作用。我使用 (width / 3) 因为我虽然它会保持纵横比相同但会减小 thumbnailImageView 的大小但它不起作用。

我哪里错了?

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

    // the collection view is pinned to both sides of the vc with no spacing
    let width = collectionView.frame.width

    let videoHeight: CGFloat = (width / 3) * 9 / 16

    return CGSize(width: width, height: videoHeight)
}

// inside the cell itself
let videoHeight = (self.frame.width / 3) * 9 / 16

contentView.addSubview(thumbnailImageView)
thumbnailImageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8).isActive = true
thumbnailImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8).isActive = true

// here is where I set the thumbnail's height and width
thumbnailImageView.heightAnchor.constraint(equalToConstant: videoHeight).isActive = true
thumbnailImageView.widthAnchor.constraint(equalToConstant: videoHeight).isActive = true

您可以使用 AVMakeRect(aspectRatio:insideRect:) 函数来获取在边界矩形内保持指定纵横比的缩放矩形。

可以参考API here.

通过使用上述 API,您的 videoHeight 值将如下填充。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // the collection view is pinned to both sides of the vc with no spacing
    let width = collectionView.frame.width
    let rect = AVMakeRect(aspectRatio: CGSize(width: 16, height: 9), insideRect: CGRect(origin: .zero, size: CGSize(width: width / 3, height: CGFloat.infinity)))
    let videoHeight: CGFloat = rect.size.height
    return CGSize(width: width, height: videoHeight)
}

并且在单元格中,您可以简单地具有如下高度。

let videoHeight = self.frame.height