如何在 swift 中的每个单元格附近显示 Collectionview 单元格
How to show Collectionview cells near to each cell in swift
我需要一个相邻的单元格,如下所示
但我越来越像这样:在短手机中它们彼此相距很远
对于集合视图,我在故事板中给出了这样的约束:
height = 80, leading = trailing = 0, top = 20
并且在 viewdidload 中:
override func viewDidLoad() {
super.viewDidLoad()
//services collectionview cell
let serviceLayout = UICollectionViewFlowLayout()
serviceLayout.minimumInteritemSpacing = 0
serviceLayout.minimumLineSpacing = 0
serviceLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
self.servicesCollectionView.collectionViewLayout = serviceLayout
servicesCollectionView.contentInsetAdjustmentBehavior = .always
servicesCollectionView.addObserver(self, forKeyPath: "contentSize", options: .new, context: nil)
}
除此之外我没有给出更多信息.. 请帮忙.. 让 collectionview 单元格靠近每个单元格
编辑:
对于 servicesCollectionView
我已经评论了 didload 中的所有内容并像这样添加..然后它的工作
servicesCollectionView.addObserver(self, forKeyPath: "contentSize", options: .new, context: nil)
对于这个单元格,我需要显示彼此靠近,如何做到这一点..请建议
galleryCollectionView.collectionViewLayout = LeftAlignCellCollectionFlowLayout()
let galleryLayout = UICollectionViewFlowLayout()
galleryLayout.scrollDirection = .horizontal
self.galleryCollectionView.collectionViewLayout = galleryLayout
self.galleryCollectionView!.contentInset = UIEdgeInsets(top: 0, left: 0, bottom:0, right: 0)
let heightGallery = 120
let widthGallery = view.frame.size.width
if let galleryLayout = self.galleryCollectionView.collectionViewLayout as? UICollectionViewFlowLayout {
galleryLayout.minimumInteritemSpacing = 0
galleryLayout.minimumLineSpacing = 0
galleryLayout.itemSize = CGSize(width: widthGallery * 0.7, height: CGFloat(heightGallery))
}
您需要继承 UICollectionViewFlowLayout
才能获得此行为。
import UIKit
class LeftAlignCellCollectionFlowLayout: UICollectionViewFlowLayout {
private(set) var cellHeight: CGFloat = 36
init(cellHeight: CGFloat) {
super.init()
self.cellHeight = cellHeight
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
guard let attributes = super.layoutAttributesForElements(in: rect) else { return nil }
guard let collectionView = self.collectionView else { return nil }
self.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
self.minimumLineSpacing = 0
self.minimumInteritemSpacing = 2
var newAttributes = attributes
var leftMargin = self.sectionInset.left
var maxY: CGFloat = -1.0
let availableWidth: CGFloat = collectionView.frame.width
let layout = collectionView.collectionViewLayout
for attribute in attributes {
if let cellAttribute = layout.layoutAttributesForItem(at: attribute.indexPath) {
if cellAttribute.frame.width > availableWidth {
cellAttribute.frame.origin.x = 0
cellAttribute.frame.size = CGSize(width: availableWidth, height: cellHeight)
}
else {
if cellAttribute.frame.origin.y >= maxY {
leftMargin = self.sectionInset.left
}
var frame = cellAttribute.frame
frame.origin.x = leftMargin
frame.size.height = cellHeight
cellAttribute.frame = frame
leftMargin += cellAttribute.frame.width + self.minimumInteritemSpacing
maxY = max(cellAttribute.frame.maxY , maxY)
}
newAttributes.append(cellAttribute)
}
}
return newAttributes
}
}
下面是您的使用方法。
collectionView.collectionViewLayout = LeftAlignCellCollectionFlowLayout(cellHeight: 40)
我需要一个相邻的单元格,如下所示
但我越来越像这样:在短手机中它们彼此相距很远
对于集合视图,我在故事板中给出了这样的约束:
height = 80, leading = trailing = 0, top = 20
并且在 viewdidload 中:
override func viewDidLoad() {
super.viewDidLoad()
//services collectionview cell
let serviceLayout = UICollectionViewFlowLayout()
serviceLayout.minimumInteritemSpacing = 0
serviceLayout.minimumLineSpacing = 0
serviceLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
self.servicesCollectionView.collectionViewLayout = serviceLayout
servicesCollectionView.contentInsetAdjustmentBehavior = .always
servicesCollectionView.addObserver(self, forKeyPath: "contentSize", options: .new, context: nil)
}
除此之外我没有给出更多信息.. 请帮忙.. 让 collectionview 单元格靠近每个单元格
编辑:
对于 servicesCollectionView
我已经评论了 didload 中的所有内容并像这样添加..然后它的工作
servicesCollectionView.addObserver(self, forKeyPath: "contentSize", options: .new, context: nil)
对于这个单元格,我需要显示彼此靠近,如何做到这一点..请建议
galleryCollectionView.collectionViewLayout = LeftAlignCellCollectionFlowLayout()
let galleryLayout = UICollectionViewFlowLayout()
galleryLayout.scrollDirection = .horizontal
self.galleryCollectionView.collectionViewLayout = galleryLayout
self.galleryCollectionView!.contentInset = UIEdgeInsets(top: 0, left: 0, bottom:0, right: 0)
let heightGallery = 120
let widthGallery = view.frame.size.width
if let galleryLayout = self.galleryCollectionView.collectionViewLayout as? UICollectionViewFlowLayout {
galleryLayout.minimumInteritemSpacing = 0
galleryLayout.minimumLineSpacing = 0
galleryLayout.itemSize = CGSize(width: widthGallery * 0.7, height: CGFloat(heightGallery))
}
您需要继承 UICollectionViewFlowLayout
才能获得此行为。
import UIKit
class LeftAlignCellCollectionFlowLayout: UICollectionViewFlowLayout {
private(set) var cellHeight: CGFloat = 36
init(cellHeight: CGFloat) {
super.init()
self.cellHeight = cellHeight
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
guard let attributes = super.layoutAttributesForElements(in: rect) else { return nil }
guard let collectionView = self.collectionView else { return nil }
self.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
self.minimumLineSpacing = 0
self.minimumInteritemSpacing = 2
var newAttributes = attributes
var leftMargin = self.sectionInset.left
var maxY: CGFloat = -1.0
let availableWidth: CGFloat = collectionView.frame.width
let layout = collectionView.collectionViewLayout
for attribute in attributes {
if let cellAttribute = layout.layoutAttributesForItem(at: attribute.indexPath) {
if cellAttribute.frame.width > availableWidth {
cellAttribute.frame.origin.x = 0
cellAttribute.frame.size = CGSize(width: availableWidth, height: cellHeight)
}
else {
if cellAttribute.frame.origin.y >= maxY {
leftMargin = self.sectionInset.left
}
var frame = cellAttribute.frame
frame.origin.x = leftMargin
frame.size.height = cellHeight
cellAttribute.frame = frame
leftMargin += cellAttribute.frame.width + self.minimumInteritemSpacing
maxY = max(cellAttribute.frame.maxY , maxY)
}
newAttributes.append(cellAttribute)
}
}
return newAttributes
}
}
下面是您的使用方法。
collectionView.collectionViewLayout = LeftAlignCellCollectionFlowLayout(cellHeight: 40)