2016-04-29 5 views
2

私の質問をかなりうまく構成すれば、わかりません。あなたはそれを改善するために検討した場合、それを行う:)が、まもなくこれは私が何を意味するかです:UICollectionViewを使用してセルの左側にヘッダを含むセクションを作成するにはどうすればいいですか?

enter image description here

  • すべてオレンジボックスは、新しいセクションボックスのヘッダである(幅、高さは静的です) 。
  • これは黄色細胞は常に幅が画面の残りの部分を取り、(テキストの長さに応じて)高さの自動寸法を有するセクション
  • とフェッチ結果コントローラに連結されます。

を教えてください:

  1. それがすべてでUICollectionViewでこれを行うことは可能ですか?
  2. 自動高さ寸法の調整方法黄色セル?
  3. フロートする方法黄色画像のようなものはありますか?

答えて

2

私はあなたと同様のことをするためにUITableViewControllerを使うことができると思います。

enter image description here

考え方は次のとおりです。

  • は2つの部分、左と右のように、細胞をカスタマイズします。
  • セクションの最初の項目の左側がセクションヘッダーに使用されます。がCellViewContentViewの場合はチェックを外す必要があります。
  • セクションの最後の項目の高さは、オーバーラップしないように調整する必要があります。ここで

サンプルコードです:

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 
    } 
} 
+0

私がよく理解すれば...セクションの最後のセルの高さを決定するために、セクション内のセルの高さを推定しようとすると、私にとってこの唯一の問題が発生します。私は正しい? –

+0

実際にはこのように処理する方法がわからないバグがあります。上にスクロールすると、最初のセクションが再レンダリングされ、最初のアイテムが覆われるのが見えます。私はあなたのためのより良い解決策を見つけ出す。編集を参照してください。 – dichen

0

私はあなたがcollectionview cell.Adjustに応じて他のセルの大きさでそれを行うheader.butあなたはそのセクションを行うことができるとは思いません。

+0

フェッチ結果コントローラとそれを動作するように非常に快適ではありません。 –

関連する問題