Question

我在这里创建了一个示例应用：https://github.com/steffimueller/LTNavigationBar-TestProject

当您向下拉动图像顶部的表格时，会出现白色背景。情况并非如此。标题图像应始终绑定在屏幕顶部。以下是我的观点：

enter image description here

以下是它的样子：

enter image description here

前截图来自this app，使用git repo的parallax分支。它是视差演示中的第一个具有我想要效果的标签。

以下是我用来创建表格的代码：

class Page1ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

  @IBOutlet weak var tableView: UITableView!
  var topView:UIView!
  var topImageView: UIImageView? 

 override func viewDidLoad() {
    super.viewDidLoad()


    self.navigationItem.setLeftBarButtonItem(UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Cancel, target: self, action: "sdfsdf"), animated: true)

    self.tableView.delegate = self
    self.tableView.dataSource = self
    self.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: cellIndentifier)
    self.navigationController?.navigationBar.lt_setBackgroundColor(UIColor.clearColor())

    tableView.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleWidth

    topView = UIView(frame: CGRectMake(0, 0, 320, 212))
    topView.contentMode = UIViewContentMode.ScaleToFill
    topView.autoresizesSubviews = true
    topView.backgroundColor = UIColor.yellowColor()
    topView.clipsToBounds = true

    tableView.tableHeaderView = topView

    let img = UIImage(named: "bg")
    topImageView = UIImageView(image: img)
    topImageView?.frame = CGRectMake(0, -89, UIScreen.mainScreen().bounds.size.width, 307)
    topImageView?.contentMode = UIViewContentMode.ScaleToFill
    topView.addSubview(topImageView!)
  }


  func scrollViewDidScroll(scrollView: UIScrollView) {
    let color: UIColor = UIColor(red: 0/255, green: 175/255, blue: 240/255, alpha: 1)
    let offsetY:CGFloat = scrollView.contentOffset.y
    if offsetY > NAVBAR_CHANGE_POINT {
      let alpha:CGFloat = 1 - ((NAVBAR_CHANGE_POINT + 64 - offsetY) / 64)
      self.navigationController?.navigationBar.lt_setBackgroundColor(color.colorWithAlphaComponent(alpha))
    }
    else {
      self.navigationController?.navigationBar.lt_setBackgroundColor(color.colorWithAlphaComponent(0))
    }

    if offsetY < 0 {
      let progress:CGFloat = fabs(offsetY) / 300
      self.topImageView?.transform = CGAffineTransformMakeScale(1 + progress, 1 + progress)

    }
  }


  override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()

    tableView.snp_makeConstraints { (make) -> Void in
      make.top.equalTo(self.view).offset(-64)
    }

  }
}

修改：我不想设置tableView.bounces = false。

如何将TableHeader图像始终放在屏幕顶部，就像我的第二个屏幕截图一样？

Answer 1

有很多方法可以做到这一点。

你想让topView滚动表格视图吗？如果是这样，不要将topView添加为子视图，只需将其分配给表视图的tableHeaderView属性。

不要滚动吗？将topView添加到视图控制器的视图，而不是表视图。然后将表格视图放在笔尖/故事板中的顶视图下方。

当用户向下滚动时，是否希望表格视图在图像视图上滚动？将图像视图放在表视图后面，使表视图透明，并使表视图的contentInset启动图像下方的第一个单元格。

我猜测只是搞乱了contentInset的最高价值会让你得到你想要的东西。

目前尚不清楚为什么需要topView和topImageView。看起来只是topImageView就足够了。

Answer 2

只需在tableView中添加一个框架，如下所示：

self.tableView.frame=CGRectMake(0, YYY, 320, 307)

其中YYY是您希望表位于

的Y位置

<强>更新

根据您更新的问题，如果您希望图片看起来“卡在”tableview的顶部，即使用户拉下桌子，您也需要使用{{1 bounds设置图片的tableView。请使用以下内容设置图片框架：

frame

您需要确保您的图片比可见的headerView大，以便在用户拉下桌子时继续显示。

“100.0f +”部分只是为图像增加高度以便显示进入headerView，调整它以适合您的图像和tableView 报头中。

更新2

UIImageView *myImage = [[UIImageView alloc] initWithFrame:CGRectMake(0.0f, 0.0f - self.tableView.bounds.size.height, self.view.frame.size.width, 100.0f+self.tableView.bounds.size.height)];

[self.tableView addSubview:myImage];

Answer 3

尝试在UITableView下面添加一个ImageView（背景颜色应该是clearColor）并设置

yourTableView.contentInset = UIEdgeInsetsMake(100.0, 0.0, 0.0, 0.0).

Answer 4

如果要将UIImage绑定到屏幕顶部，请执行以下操作。禁用Bounce的{{1}}属性。您可以从xib或以编程方式禁用该属性。在这里，我以编程方式在swift中编写disable UITableView属性的代码。

Bounce

希望这对你有所帮助。

Answer 5

我在我的情况下做的是使用tableHeaderView而不是像myTableView.tableHeaderView = myImageView这样的节标题然后在scrollViewDidScrollMethod中，

func scrollViewDidScroll(scrollView: UIScrollView) {

        if scrollView.contentOffset.y < 0
        {
        scrollView.layoutIfNeeded()
            var headerFrame = myTableView.tableHeaderView?.frame
            headerFrame?.origin.y = scrollView.contentOffset.y
            headerFrame?.size.height = headerHeight-scrollView.contentOffset.y //headerHeight is a constant for actual height of header on storyboard
            myTableView.tableHeaderView?.frame = headerFrame!

        }

    }

希望这有助于您的情况

Answer 6

您必须在viewDidLoad()中使用以下内容：

topView = UIView(frame: CGRectMake(0, 0, 320, 300))

let testView = UIView(frame: CGRectMake(0, 0, 320, 200))
testView.backgroundColor = UIColor.clearColor()
tableView.tableHeaderView = testView

let img = UIImage(named: "bg")
topImageView = UIImageView(image: img)

topImageView?.frame = CGRectMake(0, 0, 320, 180)
topView.addSubview(topImageView!)
topImageView?.contentMode = UIViewContentMode.ScaleToFill
tableView.addSubview(topView!)
tableView.sendSubviewToBack(topView!)

Stick TableHeader Image始终位于屏幕顶部？

6 个答案: