50天iOS挑战(Swift) - 第5天：模仿网易新闻顶端滑动分类列表

50天，每天一个Swift语言的iOS练手项目，覆盖iOS开发的主要知识。贵在坚持，重在思考

文章列表：http://blog.csdn.net/b735098742/article/category/6978601
Github项目：https://github.com/Minecodecraft/50DaysOfSwift

简介

本Demo模仿网易新闻的顶端分类列表，实现顶端ScrollView与CollectionView的交互，并在滑动或点击时完成字体变大变小等动态元素。
主要知识点: Collection View, UIScrollView，delegate

过程

1、界面搭建
界面采用SB搭建，类似网易新闻即可。建立约束可能稍微复杂些。

2、滚动条的实现
有以下两个操作可以改变滚动条与CollectionViewCell的index：
1. 点击ScrollView上的项目
2. 滚动CollectionView的Cell

前者可以直接在ScrollView中实现，而后者则需要考虑两个View之间的交互问题，我们先谈前者。
进度条为自定义的UIView，其上为列表对应的ScrollView以及Button。列表上的选项采用UILabel，选中时为18号红色字体，未选中时为14号黑色，对其点击的响应通过绑定手势监测器实现。

对列表项目点击的响应
由于我们将列表项对应的Label添加到了ScrollView中，我们可以直接通过其indexOfView方法获得对应的index

guard let view = gesture.view,
　　　let index: Int = self.scrollView.subviews.index(of: view)
else { return }

而后直接放大所选项目和缩小原有项目即可，因为要提供给CollectionView，我们在此封装该方法。

/// 响应设置label比例的方法
///
/// - Parameters:
/// - scale: 变换的比例
/// - index: 当前页面索引
func setScale(withScale scale: CGFloat, forIndex index: Int) {

　　let label = self.scrollView.subviews[index] as! UILabel

　　label.textColor = UIColor.init(red: scale, green: 0, blue: 0, alpha: 1)

　　// 根据比例设置在14-18区间的字号
　　let fontSize = 14 + (18-14) * scale
　　label.transform = CGAffineTransform(scaleX: fontSize / 14, y: fontSize / 14)

　　//将label移动至中央
　　self.scrollToCenter(label)
}

同时，我们要在保持选中标签的居中，同样封装将Label移至中央的方法

/// 将label滑动至scrollView正中的方法
///
/// - Parameter view: 对应的label
func scrollToCenter(_ view: UIView) {

　　var offsetX = view.center.x - self.scrollView.frame.size.width * 0.5

　　// 如果标签旁边没有剩余标签，则不滚动
　　if offsetX < 0 {
　　　　offsetX = 0
　　}
　　
　　self.scrollView.setContentOffset(CGPoint(x: offsetX, y: 0), animated: true)
}

最后处理一下选中后Label样式变化的动画：我们在调用封装好的比例缩放方法时提交一个UIView动画即可

// 点击时，让点击的放大，其他缩小
UIView.animate(withDuration: 0.3) {
　　for i in 0..< self.scrollView.subviews.count {
　　　　let label = self.scrollView.subviews[i]
　　　　if label == gesture.view {
　　　　　　self.setScale(withScale: 1, forIndex: i)
　　　　} else {
　　　　　　self.setScale(withScale: 0, forIndex: i)
　　　　}
　　}
}
self.scrollToCenter(view)

这样我们就实现了滚动条以及点击滚动条的操作。关于选中后如何同步控制CollectionViewCell的问题，在后面讨论。

3、 CollectionViewCell的滚动
我们知道，当我们滚动Cell时，上面新闻分类的列表同样滚动，而与点击列表项目不同的是，滚动时列表项的Label样式是渐变的。逻辑不难理解，我们直接看代码：

// 当滑动的时候的响应
func scrollViewDidScroll(_ scrollView: UIScrollView) {
　　// 计算整体的比例
　　let ratio: CGFloat = scrollView.contentOffset.x / scrollView.frame.size.width

　　// 计算出索引值
　　let index: Int = Int(ratio)

　　// 计算变化的比例
　　let scale: CGFloat = ratio - CGFloat(index)
　　
　　// 修改channelView的大小
　　if index+1 < self.channels.count {
　　　　self.channelView.setScale(withScale: scale, forIndex: index+1)
　　　　self.channelView.setScale(withScale: 1 - scale, forIndex: index)
　　}
}

UICollectionView的代理方法实现不再赘述。

4、顶端滚动条点击时CollectionViewCell的同步响应
上面我们实现了分别创建滚动条和CollectionView，也实现了各自的逻辑。
由于CollectionView在Controller中，在滑动Cell时可以直接调用滚动条的方法控制滚动条选项的缩放等操作。而我们在点击滚动条选项时，如何让CollectionView也随之切换呢？
我们知道，如果在滚动条的类中保存一个指向控制器的强引用，则可以调用其方法来控制CollectionView，但是这样会造成强引用循环。若控制器弱引用View，View强引用控制器，则会在使用前已经释放View，且不遵守“对象不应该持有它的父对象”原则。这个问题可以通过代理来解决，即避免了强引用循环，也实现了代码的解耦。
我们对滚动条类定义如下协议：

protocol MCChannelViewDelegate {
func channelView(_ channelView: MCChannelView, forItemAt index: Int)
}

同时在类中声明代理：

var delegate: MCChannelViewDelegate?

而后在控制器中遵守协议并实现该代理方法即可：

/// 实现频道条操作时collectionView同步切换的方法
///
/// - Parameters:
/// - channelView: 操作对应的channelView
/// - index: 切换到的view的索引值
func channelView(_ channelView: MCChannelView, forItemAt index: Int) {

　　// 构造要滚动到的位置对应的indexPath
　　let indexPath = IndexPath(item: index, section: 0)
　　
　　// 为了让点击的时候按钮能慢慢变大而不调用scrollViewDidScroll直接变大，要先不调用该方法
　　self.collectionView.delegate = nil
　　self.collectionView.scrollToItem(at: indexPath, at: .init(rawValue: 0), animated: false)
　　self.collectionView.delegate = self
}