[英]How can I have image views in a collection view resize themselves depending on the screen size?
I have a collection view of image views, and when run in the simulator on an iPhone 7, the layout is how I want it - images displayed 3 per line, with no spacing in between.我有一个图像视图的集合视图,当在 iPhone 7 上的模拟器中运行时,布局是我想要的 - 每行显示 3 个图像,中间没有间距。 However when I run it on my phone (iPhone 6+), there is spacing between the images.
但是,当我在手机(iPhone 6+)上运行它时,图像之间存在间距。
These are the functions that set up the layout:这些是设置布局的函数:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsetsMake(0,0,0,0)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let imgWidth = view.bounds.width/3.0
let imgHeight = imgWidth
return CGSize(width: imgWidth, height: imgHeight)
}
I was thinking that sizeForItem
would re-scale the images by stating that the width would be the screen width divided by three, and the height equal to that.我在想
sizeForItem
会通过声明宽度是屏幕宽度除以三,高度等于它来重新缩放图像。 But I think I'm confused about that and perhaps it's only resizing the cell, and not the image view within.但我想我对此感到困惑,也许它只是调整单元格的大小,而不是其中的图像视图。 However I'm not sure where I can set the image view size to scale dynamically with the screen size.
但是,我不确定在哪里可以设置图像视图大小以随屏幕大小动态缩放。
How can I change it so the image cells in the collection view resize themselves accordingly, and remain 3 per line with no spacing, regardless of screen size?如何更改它以便集合视图中的图像单元格相应地调整自己的大小,并且无论屏幕大小如何,每行保持 3 个没有间距?
EDIT: After putting cell.postImage.contentMode = UIViewContentMode.scaleAspectFill
into cellForItem
method:编辑:将
cell.postImage.contentMode = UIViewContentMode.scaleAspectFill
放入cellForItem
方法后:
EDIT 2: After trying iOSFreak's solution, problem still persists:编辑 2:尝试 iOSFreak 的解决方案后,问题仍然存在:
Provided you have the imageview pinned to the collection view cell using autolayout cell 0-top,0-bottom,0-leading, and 0-trailing or autoresizing of .flexible height and .flexible width I don't see why it would not work in your example.如果您使用自动布局单元格 0-top,0-bottom,0-leading 和 0-trailing 或 autoresizing of .flexible height 和 .flexible width 将 imageview 固定到集合视图单元格,我不明白为什么它不起作用在你的例子中。 Your methods look right.
你的方法看起来是正确的。
Do you have UICollectionViewDelegateFlowLayout in the declarations example?你在声明示例中有 UICollectionViewDelegateFlowLayout 吗?
class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {}
Please try the below code请尝试以下代码
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let imgWidth = CGRectGetWidth(collectionView.frame)/3.0
return CGSize(width: imgWidth, height: imgWidth)
}
if this doesn't work, Create a subClass of UICollectionViewFlowLayout
as shown below如果这不起作用,请创建
UICollectionViewFlowLayout
,如下所示
Updated to swift 3.0
更新到 swift 3.0
class CustomImageLayout: UICollectionViewFlowLayout {
var numberOfColumns:CGFloat = 3.0
override init() {
super.init()
setupLayout()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupLayout()
}
override var itemSize: CGSize {
set { }
get {
let itemWidth = (self.collectionView!.frame.width - (self.numberOfColumns - 1)) / self.numberOfColumns
return CGSize(width: itemWidth, height: itemWidth)
}
}
func setupLayout() {
minimumInteritemSpacing = 1 // Set to zero if you want
minimumLineSpacing = 1
scrollDirection = .vertical
}
}
You need set collection views layout with custom layout.您需要使用自定义布局设置集合视图布局。
class ViewController: UIViewController {
@IBOutlet weak var colleciton: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
colleciton.collectionViewLayout = CustomImageLayout()
// Do any additional setup after loading the view, typically from a nib.
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.