粘性表格标题图像始终位于屏幕顶部？

Question

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

当您拉下图像上方顶部的表格时，会出现白色背景。这不应该是这样。标题图像应始终绑定在屏幕顶部。这是我的情况：

它应该是这样的：

之前的截图来自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 Image 始终粘贴在屏幕顶部？

Answer 1

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

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

不想滚动？将 topView 添加到视图控制器的视图，而不是表视图。然后将表格视图放置在 nib/storyboard 中的顶视图下方。

希望表格视图在用户向下滚动时滚动到图像视图上？将image view放在table view后面，让table view透明，让table view的contentInset开始图片下方的第一个单元格。

我猜只是弄乱 contentInset 的最高值会得到你想要的。

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

Answer 2

只需像这样向您的 tableView 添加一个框架：

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

其中 YYY 是您希望放置表格的 Y 位置

更新：

根据您更新的问题，如果您想让图像看起来“卡在”tableview 的顶部，即使用户将桌子拉下，您也需要使用 bounds 的tableView 设置图片的frame。使用类似这样的东西来设置图片框架：

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];

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

“100.0f+”部分只是增加了图像的高度，所以它会显示 进入 headerView，调整它以适合您的图像和 tableView 标题。

更新 2

- (void)viewDidLoad {
    [super viewDidLoad];

    self.myTableView.delegate=self;
    self.myTableView.dataSource=self;

    UIImageView *myImageView=[[UIImageView alloc] initWithFrame:CGRectMake(0.0f, 0.0f - self.myTableView.bounds.size.height, self.view.frame.size.width, 300.0F+self.myTableView.bounds.size.height)];
    [myImageView setClipsToBounds:TRUE];
    [myImageView setImage:[UIImage imageNamed:@"myImage.jpg"]];


    [self.myTableView addSubview:myImageView];

}

Answer 3

您必须在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!)

Answer 4

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

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

Answer 5

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

self.tableView.bounces = false

希望对您有所帮助。

Answer 6

在我的情况下，我所做的是使用 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!

        }

    }

希望这对您的情况有所帮助