如何根据屏幕大小在集合视图中调整图像视图?

时间:2017-03-11 13:50:13

标签: ios swift uicollectionview

我有一个图像视图的集合视图,当在iPhone 7上的模拟器中运行时,布局就是我想要的 - 每行显示3个图像,两者之间没有间距。但是,当我在手机(iPhone 6+)上运行时,图像之间会有间距。

这些是设置布局的功能:

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)
}

我在想sizeForItem会重新缩放图像,说明宽度是屏幕宽度除以3,高度等于那个。但我觉得我对此很困惑,也许它只是调整单元格的大小,而不是内部的图像视图。但是我不确定在哪里可以将图像视图大小设置为随屏幕大小动态缩放。

如何更改它,以便集合视图中的图像单元格相应地调整大小,并且无论屏幕大小如何,每行都保持3行,没有间距?

编辑:将cell.postImage.contentMode = UIViewContentMode.scaleAspectFill放入cellForItem方法之后:

enter image description here

编辑2:尝试iOSFreak的解决方案后,问题仍然存在:

enter image description here

3 个答案:

答案 0 :(得分:1)

如果您将图像视图固定到集合视图单元格,使用自动布局单元格0-top,0-bottom,0-leading,0-trailing或autoresizing .flexible height和.flexible width我不会看到为什么它不适用于你的例子。你的方法看起来正确。

您是否在声明示例中有UICollectionViewDelegateFlowLayout?

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {}

答案 1 :(得分:1)

您将“估计大小”更改为“无”。

enter image description here

答案 2 :(得分:0)

请尝试以下代码

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

  let imgWidth = CGRectGetWidth(collectionView.frame)/3.0
  return CGSize(width: imgWidth, height: imgWidth)
}

如果这不起作用,请创建一个UICollectionViewFlowLayout的子类,如下所示

更新为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
}
}

您需要使用自定义布局设置集合视图布局。

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.
}
}

Please find attached image of working code!