如何使用UICollectionView在單元格左側創建部分以及標題？

Question

我不確定，如果我寫得很好的話。如果你考慮對其進行改進，做到這一點:)但不久這就是我的意思是：

• 每橙色箱是新剖面框的標題（寬度和高度是靜態的） 。
• 這將被鏈接到讀取的結果控制器部分
• 的黃色細胞始終以在寬度屏幕的其餘部分，並具有用於自動高度尺寸（取決於文本的長度）。

請告訴我：

1. 是否有可能做到這一點與UICollectionView呢？
2. 如何安排黃色電池的自動高度尺寸？
3. 如何浮動黃色像這樣的圖像？

Answer 1

我認爲你可以使用UITableViewController來做類似的事情。

的理念是：

• 定製單元格爲兩個部分，左，右。
• 該部分的第一項左側用於部分標題，請注意的CellView和ContentView應該是未選中的。
• 部分的最後一項的高度需要調整，以免重疊。

下面是示例代碼：

class ViewController: UITableViewController { 

    struct Item { 
     var height: CGFloat = 0 
    } 

    var itemDic: [Int: [Item]]! 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     // Do any additional setup after loading the view, typically from a nib. 

     itemDic = [0 : [Item(height: 10), Item(height: 30), Item(height: 50)], 
       1 : [Item(height: 20), Item(height: 10)], 
       2 : [Item(height: 40), Item(height: 30), Item(height: 20)]] 
    } 

    override func didReceiveMemoryWarning() { 
     super.didReceiveMemoryWarning() 
     // Dispose of any resources that can be recreated. 
    } 


    override func numberOfSectionsInTableView(tableView: UITableView) -> Int { 
     return itemDic.count 
    } 

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 
     return itemDic[section]!.count 
    } 

    let sectionHeaderHeight: CGFloat = 100 

    override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { 

     let section = indexPath.section 
     let row = indexPath.row 
     let items = itemDic[section]! 

     var height = items[row].height 
     if (row == items.count - 1) { 

      var total: CGFloat = 0 
      for i in items { 
       total += i.height + 10 
      } 

      if(sectionHeaderHeight + 10 > total){ 
       height += (sectionHeaderHeight + 10 - total) 
      } 
     } 

     return height + 10 
    } 

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { 

     let section = indexPath.section 
     let row = indexPath.row 
     let items = itemDic[section]! 

     let cell = tableView.dequeueReusableCellWithIdentifier("Cell")! 

     let orangeView = cell.viewWithTag(100)! 
     let yellowView = cell.viewWithTag(101)! 

     if(row == 0){ 
      let orangeFrame = orangeView.frame 
      orangeView.frame = CGRect(origin: orangeFrame.origin, size: CGSize(width: orangeFrame.width, height: sectionHeaderHeight)) 
     } 

     let yellowFrame = yellowView.frame 
     let height = items[row].height 
     yellowView.frame = CGRect(origin: yellowFrame.origin, size: CGSize(width: yellowFrame.width, height: height)) 

     return cell 
    } 

    override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) { 
     let orangeView = cell.viewWithTag(100)! 
     let yellowView = cell.viewWithTag(101)! 

     let orangeFrame = orangeView.frame 

     print(orangeFrame) 

     let yellowFrame = yellowView.frame 

     print(yellowFrame) 
    } 
} 

更新： 其實有在上述溶液中的錯誤，滾動到頂部，直到首節消失的時候，然後你會看到它得到重新渲染和佈局將被打破。

有一個更好的方法來做到這一點。

在headerView中添加一個內部視圖（橙色），該視圖將顯示在tableCells上。請記住設置標題的高度> 0.在這種情況下，單元格只需包含正確的部分（黃色）。 不過，您需要調整最後一項的高度。

示例代碼：

class ViewController: UITableViewController { 

    struct Item { 
     var height: CGFloat = 0 
    } 

    var itemDic: [Int: [Item]]! 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     // Do any additional setup after loading the view, typically from a nib. 

     itemDic = [0 : [Item(height: 10), Item(height: 30), Item(height: 50), Item(height: 20)], 
       1 : [Item(height: 20), Item(height: 10)], 
       2 : [Item(height: 40), Item(height: 30), Item(height: 20), Item(height: 30)]] 
    } 

    override func didReceiveMemoryWarning() { 
     super.didReceiveMemoryWarning() 
     // Dispose of any resources that can be recreated. 
    } 


    override func numberOfSectionsInTableView(tableView: UITableView) -> Int { 
     return itemDic.count 
    } 

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 
     return itemDic[section]!.count 
    } 

    let sectionHeaderHeight: CGFloat = 100 
    let innerViewOffset: CGFloat = 10 
    override func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { 

     // Must > 0 
     return innerViewOffset 
    } 

    override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { 
     let view = UIView(frame: CGRect()) 

     view.backgroundColor = UIColor.blueColor() 

     let innerView = UIView(frame: CGRect(x: 0, y: innerViewOffset, width: 100, height: 100)) 
     innerView.backgroundColor = colorForSection(section) 
     view.addSubview(innerView) 

     return view 
    } 

    func colorForSection(section: Int) -> UIColor { 
     let colors = [UIColor.greenColor(), UIColor.redColor(), UIColor.purpleColor()] 

     return colors[section] 
    } 

    override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { 

     let section = indexPath.section 
     let row = indexPath.row 
     let items = itemDic[section]! 

     var height = items[row].height 
     if (row == items.count - 1) { 

      var total: CGFloat = 0 
      for i in items { 
       total += i.height + 10 
      } 

      if(sectionHeaderHeight + 10 > total){ 
       height += (sectionHeaderHeight + 10 - total) 
      } 
     } 

     return height + 10 
    } 

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { 

     let cell = tableView.dequeueReusableCellWithIdentifier("Cell")! 

     return cell 
    } 
} 

Answer 2

我不認爲header.but你的CollectionView cell.Adjust其他細胞相應的大小做它，你可以做到這一點部分。