如何使用装饰器视图在 uicollection 视图中实现所需的设计
Posted
技术标签:
【中文标题】如何使用装饰器视图在 uicollection 视图中实现所需的设计【英文标题】：How To Achieve the desired Design in uicollection view using decorator view 【发布时间】：2018-02-24 18:26:23 【问题描述】：请看下面每一项的边框（Border Spacing）
使用集合视图 Header 我能够实现以下输出，但停留在如何将分隔符放在 uicollection 视图中。行内的单元格数量也是动态的。
最后一行不应该是底部分隔符 任何帮助都非常感谢..
为了实现以下布局，我只使用带有节标题的集合视图 我已经完成了以下输出
所有部分都折叠
点击特定部分
每个展开部分只剩下分隔符部分 我不知道如何使用装饰视图来实现相同的效果。
【问题讨论】：
使用装饰器视图？例如，这就是 iBooks 中的那些“书架”是如何实现的。 能否请您发布链接或演示示例 【参考方案1】：你可以这样做，
创建两种不同类型的装饰视图，一种用于位于集合视图中心的垂直线，另一种用于显示在两个单元格下方的水平线 垂直装饰视图只为整个视图创建一次，而水平装饰视图则为出现在每行下方的一对两个创建。对于最后一行，不要创建装饰视图。 子类 UICollectionViewFlowLayout，并覆盖 override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]？ 并返回适当的装饰视图。这是我的布局，
这是用于此的代码，
CollectionViewController，
class ViewController: UICollectionViewController
let images = ["Apple", "Banana", "Grapes", "Mango", "Orange", "Strawberry"]
init()
let collectionViewLayout = DecoratedFlowLayout()
collectionViewLayout.register(HorizontalLineDecorationView.self,
forDecorationViewOfKind: HorizontalLineDecorationView.decorationViewKind)
collectionViewLayout.register(VerticalLineDecorationView.self,
forDecorationViewOfKind: VerticalLineDecorationView.decorationViewKind)
super.init(collectionViewLayout: collectionViewLayout)
required init?(coder aDecoder: NSCoder)
fatalError("init(coder:) has not been implemented")
override func viewDidLoad()
super.viewDidLoad()
collectionView?.backgroundColor = UIColor.white
collectionView?.register(CollectionViewCell.self,
forCellWithReuseIdentifier: CollectionViewCell.CellIdentifier)
extension ViewController: UICollectionViewDelegateFlowLayout
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
return images.count
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CollectionViewCell.CellIdentifier,
for: indexPath) as! CollectionViewCell
let name = images[indexPath.item]
cell.imageView.image = UIImage(named: "\(name).png")
cell.label.text = name
return cell
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets
return .zero
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat
return 10 + DecoratedFlowLayout.horizontalLineWidth
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat
return 0
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
let width = (collectionView.bounds.size.width - DecoratedFlowLayout.verticalLineWidth) * 0.5
return CGSize(width: width,
height: width + 20)
CollectionViewCell，
class CollectionViewCell: UICollectionViewCell
static let CellIdentifier = "CollectionViewCellIdentifier"
var imageView: UIImageView!
var label: UILabel!
override init(frame: CGRect)
super.init(frame: frame)
createViews()
required init?(coder aDecoder: NSCoder)
fatalError("init(coder:) has not been implemented")
func createViews()
imageView = UIImageView(frame: .zero)
imageView.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(imageView)
label = UILabel(frame: .zero)
label.font = UIFont.systemFont(ofSize: 20)
label.textAlignment = .center
label.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(label)
NSLayoutConstraint.activate([
imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
imageView.leftAnchor.constraint(equalTo: contentView.leftAnchor),
imageView.rightAnchor.constraint(equalTo: contentView.rightAnchor),
label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
label.leftAnchor.constraint(equalTo: contentView.leftAnchor),
label.rightAnchor.constraint(equalTo: contentView.rightAnchor),
label.topAnchor.constraint(equalTo: imageView.bottomAnchor),
label.heightAnchor.constraint(equalToConstant: 20)
])
DecoratedFlowLayout,
class DecoratedFlowLayout: UICollectionViewFlowLayout
static let verticalLineWidth: CGFloat = 20
static let horizontalLineWidth: CGFloat = 20
required init?(coder aDecoder: NSCoder)
super.init(coder: aDecoder)
minimumLineSpacing = 40 // should be equal to or greater than horizontalLineWidth
override init()
super.init()
minimumLineSpacing = 40
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]?
guard let attributes = super.layoutAttributesForElements(in: rect) else
return nil
var attributesCopy: [UICollectionViewLayoutAttributes] = []
for attribute in attributes
attributesCopy += [attribute]
let indexPath = attribute.indexPath
if collectionView!.numberOfItems(inSection: indexPath.section) == 0
continue
let firstCell = IndexPath(item: 0,
section: indexPath.section)
let lastCell = IndexPath(item: collectionView!.numberOfItems(inSection: indexPath.section) - 1,
section: indexPath.section)
if let attributeForFirstItem = layoutAttributesForItem(at: firstCell),
let attributeForLastItem = layoutAttributesForItem(at: lastCell)
let verticalLineDecorationView = UICollectionViewLayoutAttributes(forDecorationViewOfKind: VerticalLineDecorationView.decorationViewKind,
with: IndexPath(item: 0, section: indexPath.section))
let firstFrame = attributeForFirstItem.frame
let lastFrame = attributeForLastItem.frame
let frame = CGRect(x: collectionView!.bounds.midX - DecoratedFlowLayout.verticalLineWidth * 0.5,
y: firstFrame.minY,
width: DecoratedFlowLayout.verticalLineWidth,
height: lastFrame.maxY - firstFrame.minY)
verticalLineDecorationView.frame = frame
attributesCopy += [verticalLineDecorationView]
let contains = attributesCopy.contains layoutAttribute in
layoutAttribute.indexPath == indexPath
&& layoutAttribute.representedElementKind == HorizontalLineDecorationView.decorationViewKind
let numberOfItemsInSection = collectionView!.numberOfItems(inSection: indexPath.section)
if indexPath.item % 2 == 0 && !contains && indexPath.item < numberOfItemsInSection - 2
let horizontalAttribute = UICollectionViewLayoutAttributes(forDecorationViewOfKind: HorizontalLineDecorationView.decorationViewKind,
with: indexPath)
let frame = CGRect(x: attribute.frame.minX,
y: attribute.frame.maxY + (minimumLineSpacing - DecoratedFlowLayout.horizontalLineWidth) * 0.5,
width: collectionView!.bounds.width,
height: DecoratedFlowLayout.horizontalLineWidth)
horizontalAttribute.frame = frame
attributesCopy += [horizontalAttribute]
return attributesCopy
override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool
return true
和装饰视图
class VerticalLineDecorationView: UICollectionReusableView
static let decorationViewKind = "VerticalLineDecorationView"
let verticalInset: CGFloat = 40
let lineWidth: CGFloat = 4.0
let lineView = UIView()
override init(frame: CGRect)
super.init(frame: frame)
lineView.backgroundColor = .black
addSubview(lineView)
lineView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
lineView.widthAnchor.constraint(equalToConstant: lineWidth),
lineView.topAnchor.constraint(equalTo: topAnchor, constant: verticalInset),
lineView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -verticalInset),
lineView.centerXAnchor.constraint(equalTo: centerXAnchor),
])
required init?(coder aDecoder: NSCoder)
fatalError("init(coder:) has not been implemented")
class HorizontalLineDecorationView: UICollectionReusableView
let horizontalInset: CGFloat = 20
let lineWidth: CGFloat = 4.0
static let decorationViewKind = "HorizontalLineDecorationView"
let lineView = UIView()
override init(frame: CGRect)
super.init(frame: frame)
lineView.backgroundColor = .black
addSubview(lineView)
lineView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
lineView.heightAnchor.constraint(equalToConstant: lineWidth),
lineView.leftAnchor.constraint(equalTo: leftAnchor, constant: horizontalInset),
lineView.rightAnchor.constraint(equalTo: rightAnchor, constant: -horizontalInset),
lineView.centerYAnchor.constraint(equalTo: centerYAnchor),
])
required init?(coder aDecoder: NSCoder)
fatalError("init(coder:) has not been implemented")
我希望您可以利用它并调整值以满足您自己的需要。某些计算更改到某种程度可能是有意义的。但是，我希望您了解如何实现这一目标。
【讨论】：
让我们continue this discussion in chat. @Sandeep 这个答案是否解决了我在这里提出的问题***.com/questions/53743467/…【参考方案2】：如果列数始终为 2，为什么不向一个单元格添加三个视图（分隔符），两个在侧面，一个在底部。对于右侧的单元格，隐藏最右侧的分隔符，对于左侧的单元格，反之亦然。 隐藏最后一行单元格底部的分隔符。 这有点小技巧，但实现起来要简单得多。
【讨论】：
我知道我已经实现了，但我想使用装饰器视图【参考方案3】：自定义UICollectionviewcell（我想你可能已经这样做了），
现在在自定义UICollectionviewcell 上放两个 UIView -
UIView，宽度为 1 或 2 点（根据
必需）并且高度等于单元格高度，给出黑色背景
给UIView上色。
另一个UIView位于单元格底部，高度为1或2点（根据需要），此时宽度等于单元格宽度，为UIView提供黑色背景色。
并调整空格。
我觉得这个技巧对你有用。
【讨论】：
以上是关于如何使用装饰器视图在 uicollection 视图中实现所需的设计的主要内容，如果未能解决你的问题，请参考以下文章
如何在 UICollection 补充视图中使用 UIButton？