2016-08-05 2 views
1

私は、このモックアップのように似たような実装しようとしています上のナビゲーションバーの下にそれをスティック:あなたが「週」ビューが下に固執するスクロールダウンした場合http://share.framerjs.com/16hwz94ezflt/(スクロールダウン)のUITableView上のUIViewのオーバーレイスクロール

をナビゲーションバー。 私は同様のUITableViewをヘッダー( "week"ビューの上)に持っています。

この「週」ビューがテーブルビューの一部であるかどうかはわかりません。それは本当に問題ではありませんが、私は本当にこのようなものをどのように実装できるのか不思議です。

答えて

1

ここで私は自動レイアウトの制約に

  1. を使用してどうなるのかだUIScrollViewの/のUITableView内のすべてが、 WeekViewをキープ
  2. は、すべての項目を設定し、スクロールビュー内の
  3. WeekViewを作成します。 UIView(または何かの並べ替え)として、それに次の制約を与える:

    • A:コンテナの余白に設定された先行/後ろのスペース
    • B:静的な高さの制約を指定します。
    • C:WeekViewの先頭を上記のビューに関連付ける制約を追加します(この場合は合計SalesView)、スペースは0に設定されます。この制約は、週ビューをSaleViewの位置に従わせる必要があります。
    • D:WeekViewの上部をView Controllerの祖父母ビューの上部に関連付ける制約を追加します。この制約は今、明らかに、最後の2つの制約が互いに競合し、画面の上部

でWeekViewを維持します。ここであなたがすることは、関係が= 0でなく> 0であるように制約Dを変更することです。次に、制約Cをの優先度に1000(デフォルト)、例えば900未満に設定します。 (この場合制約D)は、それを破る必要があります。

これは、WeekViewが一番下にあるかぎり、大丈夫です。上から上に移動することはできません。また、SalesViewの位置のすぐ下に配置したいと思いますDは "Hey、back off"のようなものですが、私は戻ってきます "

それは意味がありますか?

0

この「週」ビューがテーブルビューの一部であるかどうかはわかりません。それは本当に問題ではありませんが、私は本当にこのようなものをどのように実装できるのか不思議です。

確かに可能性があります!

お客様の実装は、UICollectionViewUITableViewのどちらを使用しているかによって異なる場合があります。

UITableViewの場合、水平スクロールページを含むサンプル内のセクションはUITableViewHeaderです。 「週」ビューを含むスティッキー領域はUITableHeaderFooterViewのカスタムで、tableView:viewForHeaderInSection:で定義します。

UICollectionViewの場合、少し手作業が必要です。アイデアは基本的に同じです.1つのセクションには、コレクションビューのレイアウト定義ごとにナビゲーションに固執するヘッダ(UICollectionElementKindSectionHeader)が含まれています。そのことについては、herehereをご覧ください。


編集:ここ遊び場に評価するために、ラフな例です。

import UIKit 
import Foundation 
import XCPlayground 

class StickyTableViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { 

var tableView: UITableView! 
var items = ["1", 
      "2", 
      "3", 
      "4", 
      "5", 
      "6", 
      "7", 
      "8", 
      "9", 
      "10", 
      "11", 
      "12", 
      "13", 
      "14", 
      "15", 
      "16", 
      "17", 
      "18", 
      "19", 
      "20", 
      "21", 
      "22", 
      "23", 
      "24", 
      "25" 
      ] 


let tableViewHeader = UIView() 

override func viewDidLoad() { 
    super.viewDidLoad() 
    self.tableView = UITableView(frame: self.view!.frame, style: .Plain) 
    self.tableView.delegate = self 
    self.tableView.dataSource = self 
    self.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "TableViewCell") 

    tableViewHeader.frame = CGRectMake(0, 0, self.tableView.frame.width, 300) 
    tableViewHeader.backgroundColor = UIColor.blueColor() 

    self.tableView.tableHeaderView = tableViewHeader 
    self.view.addSubview(self.tableView) 
} 

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { 

    switch section { 
    case 0: 
     return 0 
    default: 
     return items.count 
    } 
} 

func numberOfSectionsInTableView(tableView: UITableView) -> Int { 
    return 2 
} 

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { 

    let headerView = UIView(frame: CGRectMake(0, 0, self.tableView.frame.width, 40)) 
    headerView.backgroundColor = UIColor.grayColor() 

    let headerLabel = UILabel(frame: headerView.frame) 
    headerLabel.text = "Label" 
    headerLabel.textAlignment = .Center 

    headerView.addSubview(headerLabel) 

    switch section { 
    case 0: 
     return nil 
    case 1: 
     return headerView 
    default: 
     return headerView 
    } 

} 

func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? { 


    switch section { 
    case 0: 
     return nil 
    default: 
     return " " 
    } 
} 

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { 
    let cell = tableView.dequeueReusableCellWithIdentifier("TableViewCell", forIndexPath: indexPath) 
    cell.textLabel?.text = "\(self.items[indexPath.row])" 

    return cell 
    } 
} 

let rootViewController = StickyTableViewController() 

let navigationController = UINavigationController(rootViewController: rootViewController) 

let page = XCPlaygroundPage.currentPage 
page.liveView = navigationController.view 
+0

UITableHeaderFooterViewはスクロールするとどのように上にスティックされますか?このデフォルトの動作ですか? – edwardmp

+0

これは、複数のセクションを持つ 'UITableView'のデフォルト動作です。テーブルにセクションが1つしかないと仮定すると、最初のセクションを空[1]と宣言し、ヘッダーを持たない[2]ように強制することができます。 [1]「numberOfRowsInSection」を参照してください。 [2] 'viewForHeaderInSection'を参照してください。 –

+0

@chrisdoukas例のおかげで。しかし、私が望むのは、たとえあなたが他のセクションをスクロールしたとしても、このセクションヘッダーが一番上に留まることです。 – edwardmp

関連する問題