網格視圖的編程創建

Question

我創建了10x10網格（GridView）的視圖（CellView）。

我可以爲單個尺寸的屏幕創建此功能，但迄今爲止無法創建適用於iPhone上所有3種當前屏幕尺寸的解決方案。

gridView是在自動佈局中創建的，並且有一些約束：寬度和高度相等，距離水平邊8px。

我有兩種方法：

1）當調用的init（）創建我基地是在上海華盈的大小框的CellView。

let cellSize = gridView.bounds.width/15 let cellRect = CGRect(origin: CGPoint(x: x, y: y), size: CGSize(width: cellSize, height: cellSize))

這種做法似乎並沒有工作，細胞並不都適合網格。根據除數的變化，它們要麼太大，要麼太小。

2.）我的第二種方法是使用自動佈局的細胞。

在創建cellView並將其作爲子視圖添加到gridView後，我添加了2個約束。

var width = NSLayoutConstraint(item: self, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.superview, attribute: NSLayoutAttribute.Width, multiplier: 0.0666667, // 1/15 constant: 0) var height = NSLayoutConstraint(item: self, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: self.superview, attribute: NSLayoutAttribute.Height, multiplier: 0.0666667, // 1/15 constant: 0)

不幸的是，這導致cellViews沒有出現在屏幕上。檢查後是由於寬度/高度爲0;但它們在運行時的約束中還具有低於0值的附加寬度和高度> 0。

我不確定哪種方法最好。我以編程方式創建了cellView，並且需要一種適用於所有設備屏幕尺寸的方法。

非常感謝更好的解決方案或錯誤的想法在我目前的方法。

Answer 1

你可以鋪陳在layoutSubviews（）的觀點：

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）這將工作在任何屏幕尺寸。

Answer 2

也許這是一個練習練習來擴展你的知識，但是如果不是這樣，你可以用UICollectionView來代替，這樣可以節省很多時間和麻煩。

• 蘋果已經從WWDC 2012 when they introduced UICollectionView

• 一些偉大的影片也有一些tutotials out there for getting you started with UICollectionView in Swift。