TableView顶部的iOS视差视图

本篇文章将按步骤详细说明，如何在iOS TableView中实作Parallax的其中一个视觉效果，Demo Project使用XCode 8，Swift 3 ，适合读者为：

1. 了解ScrollView的ContentOffset属性以及委托设计Patten。
2. 熟悉ImageView的ContentMode属性。
3. 对AutoLayout有基本了解。

下图为想要实现的效果，上方的ImageView会跟着拖动的动作产生相对应的变化。

步骤1：从 Dropbox 下载启动项目 。 （按此下载）

下载后，打开ParallaxDemo.xcodeproj ，里面已经有一个写好的TableView，在每一个单元格里面显示每一个各自的行号。

步骤2：透过TableView的ContentInset属性，将TableView往下移，腾出上方的空间，给后续要置入的ImageView使用。

在DemoTableViewController里添加一个imageViewLength属性：

 类DemoTableViewController：UIViewController，UITableViewDelegate，UITableViewDataSource { 

  // 1 
 让imageViewHeight：CGFloat = 200.0 

  ... 

  } 

在DemoTableViewController里面的setUpTableView（）函数中加入以下代码：

  func setUpTableView（）{ 

  // 2 
  tableView.contentInset = UIEdgeInsets（顶部：imageViewHeight，左侧：0，底部：0，右侧：0） 

  // 3 
  tableView.contentOffset = CGPoint（x：0，y：-imageViewHeight） 

  ... 
  } 

以下说明每一段程式码的作用：

1. 设定要留给ImageView的高度，将之存在ImageViewHeight属性中，以供后续使用。
2. 设定TableView的ContentInset，这个属性的资料类型状态是UIEdgeInsets，透过分别设定上，左，下，右，可以调整TableView的内容视图与底下ScrollView的相对距离。这里我们把ImageViewHeight作为UIEdgeInset初始值设定项的top参数，并将这个新生成的UIEdgeInset物件指定给TableView的ContentInset属性。
3. 设置好ContentInset后，为了让一进来App的时候，显示上方的空白，我们还必须设置TableView的ContentOffset，让上方的空白可以被看见。

设定完这些指令之后，跑模拟器就可以看到下方的画面：

步骤3：添加ImageView

在DemoTableViewController里添加setUpImageView函数：

接下来就进到更重要的部分，UIScrollView有相对应的协议：UIScrollViewProtocol，会在发生一些事件的时候通知委派对象，执行相对应的方法，而UITableViewDelegate协议继承自UIScrollViewDelegate，自然也继承了这些方法。我们将会用到scrollViewDidScroll（）这个功能。

将下列的程式码新增到DemoTableViewController中：

3. changeImageViewHeightConstraint（contentOffset：CGPoint）

当TableView已经被滑到最上层的画面，还继续被拖动的时候，我们希望imageView变大，来替换空白，所以我们去修改的imageViewHeightConstraint，让imageView随着拖动的动作高度变大，而因为contentMode设置为ScaleAspectFill的关系，imageView显示的内容就会有所改变，达到我们想要的效果。

进行到这边就完成了Parallax的效果，最后附上Final Project的Github连接，如果此处有任何错误或者未彻底的地方，还请不吝到Github发给我，感谢你/妳。