ios - 以编程方式创建 GridView

Question

我正在创建 View (CellView) 的 10x10 网格 (GridView)。

我能够为单一尺寸的屏幕创建此解决方案，但迄今为止无法创建适用于 iPhone 上所有 3 个当前屏幕尺寸的解决方案。

gridView 是在自动布局中创建的，有一些限制:宽度和高度之间的比例相等，并且距离水平边缘 8px。

我有两种方法:

1.) 当调用 init() 来创建 CellView 时，我将它的框架基于父 View 的大小。


让 cellSize = gridView.bounds.width/15
让 cellRect = CGRect(原点:CGPoint(x:x，y:y)，大小:CGSize(宽度:cellSize，高度:cellSize))


这种方法似乎并没有奏效，而且单元格并不完全适合网格。它们要么太大要么太小，具体取决于除数的变化。

2.) 我的第二种方法是对单元格使用自动布局。

在创建 cellView 并将其作为 subview 添加到 gridView 之后，我添加了 2 个约束。


var width = NSLayoutConstraint(item: self,
属性:NSLayoutAttribute.Width，
relatedBy: NSLayoutRelation.Equal,
toItem: self.superview,
属性:NSLayoutAttribute.Width，
乘数:0.0666667，//1/15
常量:0)

var height = NSLayoutConstraint(item: self,
属性:NSLayoutAttribute.Height，
relatedBy: NSLayoutRelation.Equal,
toItem: self.superview,
属性:NSLayoutAttribute.Height，
乘数:0.0666667，//1/15
常量:0)


不幸的是，这导致 cellViews 没有出现在屏幕上。检查后这是由于宽度/高度为 0；然而，它们在运行时也有额外的宽度和高度 >0 低于约束中的 0 值。

我不确定哪种方法最好。我正在以编程方式创建 cellView，并且需要一种适用于所有设备屏幕尺寸的方法。

非常感谢在我当前的方法中出现错误的更好的解决方案或想法。

Answer 1

您可以在 layoutSubviews() 中布置 View :

class GridView {
  // number of rows and columns
  private let rows = 10
  private let cols = 10

  // two-dimensional array of your Cell views. You create them elsewhere and add 
  // all of them to GridView
  private let children: [[UIView]]
  // border, here 8 points on each side
  private let insets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
  // spacing between Cell views (not sure if you want this, and you could change it to have
  // different values for horizontal and vertical spacing)
  private let spacing: CGFloat = 1

  override func layoutSubviews() {
    // available size is the total of the widths and heights of your cell views:
    // bounds.width/bounds.height minus edge insets minus spacing between cells
    let availableSize = CGSize(
      width: bounds.width - insets.left - insets.right - CGFloat(cols - 1) * spacing,
      height: bounds.height - insets.top - insets.bottom - CGFloat(rows - 1) * spacing)

    // maximum width and height that will fit
    let maxChildWidth = floor(availableSize.width / CGFloat(cols))
    let maxChildHeight = floor(availableSize.height / CGFloat(rows))

    // childSize should be square
    let childSize = CGSize(
      width: min(maxChildWidth, maxChildHeight),
      height: min(maxChildWidth, maxChildHeight))

    // total area occupied by the cell views, including spacing inbetween
    let totalChildArea = CGSize(
      width: childSize.width * CGFloat(cols) + spacing * CGFloat(cols - 1),
      height: childSize.height * CGFloat(rows) + spacing * CGFloat(rows - 1))

    // center everything in GridView
    let topLeftCorner = CGPoint(
      x: floor((bounds.width - totalChildArea.width) / 2),
      y: floor((bounds.height - totalChildArea.height) / 2))

    for row in 0..<rows {
      for col in 0..<cols {
        let view = children[row][col]
        view.frame = CGRect(
          x: topLeftCorner.x + CGFloat(col) * (childSize.width + spacing),
          y: topLeftCorner.y + CGFloat(row) * (childSize.height + spacing),
          width: childSize.width,
          height: childSize.height)
      }
    }
  }
}

除了 GridView 太小的一些边缘情况(并且您会得到 childSize.width 或 childSize.height 的负值)这将适用于任何屏幕尺寸。