多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
> 原文:http://www.swiftyper.com/Swift/scrollviewpart4.html # ScrollView 学习笔记 - Part4 前一节学了`ScrollView`当中的缩放,不过那个缩放实现得并不完美,因为缩放过后,图片只会静静地呆在屏幕的一边,一般情况,我们希望缩放后的图片能够居中。 要实现居中,其实并不复杂,我们只需要计算出`ScrollView`与`ImageView`的宽与高的差值,然后再除以2就可以算出补白的间距。如图: ![](https://box.kancloud.cn/2015-11-19_564d44665fe40.png) 有了这个补白的间距,我们就可以设置`ImageView`的`frame`来设置它的位置,使其居中。 还有另一个方法是设置`ScrollView`的`ContentInset`,也能实现居中。 ![](https://box.kancloud.cn/2015-11-19_564d44668a29a.png) ## 实现居中 可以实现下面这个方面用来对缩放后的`View`进行居中: ~~~ private func recenterImage() { let scrollViewSize = scrollView.frame.size let imageSize = imageView.frame.size let horizontalSpace = imageSize.width < scrollViewSize.width ? (scrollViewSize.width - imageSize.width) / 2 : 0 let verticalSpace = imageSize.height < scrollViewSize.height ? (scrollViewSize.height - imageSize.height) / 2 : 0 scrollView.contentInset = UIEdgeInsets(top: verticalSpace, left: horizontalSpace, bottom: verticalSpace, right: horizontalSpace) } ~~~ 在`ViewDidLoad`、`viewWillLayoutSubviews`与`scrollViewDidZoom`当中调用这个方法,就能实现缩放后的图片居中了。 ## 屏幕旋转后图片位置发生变化 当我们将图片放大后对屏幕进行旋转,会发现,图片的中心发生了改变,不在原本的位置。这是因为虽然`ScrollView`的`contentOffset`没有变化,但是由于屏幕的大小改变了,会影响到中心位置,所以我们可以看到图片的位置发生了变化。 ![](https://box.kancloud.cn/2015-11-19_564d4466a594f.png) 要解决这个问题,我们需要在屏幕旋转前记录中心点的位置,然后在旋转后,再根据这个中心点的位置来设置`contentOffset`,这样就能保证旋转前后的中心在同一个位置。我们可以在一个方法中完成所有的这些工作: ~~~ override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) { // 计算中心点 let centerPoint = CGPoint(x: scrollView.contentOffset.x + CGRectGetWidth(scrollView.bounds) / 2, y: scrollView.contentOffset.y + CGRectGetHeight(scrollView.bounds) / 2) // 设置旋转后的中心位置 coordinator.animateAlongsideTransition({ (context) -> Void in self.scrollView.contentOffset = CGPoint(x: centerPoint.x - size.width / 2, y: centerPoint.y - size.height / 2) }, completion: nil) } ~~~ `viewWillTrnsitionToSize(_:withTransitionCoordinator:)`是iOS 8中的新方法,这个方法可以让你屏幕旋转的时候对view进行一些操作,其中的`size`参数是旋转后的view的大小。经过这样的处理之后,旋转前后的中心都会在同一个位置了。 ## 总结 这小节主要是对缩放的效果进行了一些小的优化,使它看起来不至于太山寨,主要是一些计算的东西,只要想通了也就不困难了。