第四天:Swift利用ScrollView和CollectionView联动作标签页面滚动

参考链接:https://www.jianshu.com/p/86d2ef245596

由于18号下午发烧了，19号请假一直在家吃药休息，20号和21号周末又特懒，断写了四天，惭愧惭愧。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

import UIKit

extension  UIColor {
    
    convenience init(r: CGFloat, g: CGFloat, b: CGFloat) {
        
        self.init(red: r/255.0, green: g/255.0, blue: b/255.0, alpha: 1.0)
    }
    
    class func arc_random() -> UIColor {
        
        return UIColor(r: CGFloat(arc4random_uniform(256)), g: CGFloat(arc4random_uniform(256)), b: CGFloat(arc4random_uniform(256)))
    }
    
    class func arc_random_light() -> UIColor {
        
        return UIColor(r: CGFloat(arc4random_uniform(128)+128), g: CGFloat(arc4random_uniform(128)+128), b: CGFloat(arc4random_uniform(128)+128))
    }
    
    class func arc_random_dark() -> UIColor {
        
        return UIColor(r: CGFloat(arc4random_uniform(128)), g: CGFloat(arc4random_uniform(128)), b: CGFloat(arc4random_uniform(128)))
    }
}

import UIKit

let cellId = "cellId"
let kChannelMargin: CGFloat = 10

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var scrollView: UIScrollView!
    
    lazy var channels: Array<String> = ["推荐", "资讯", "重庆", "社会", "军事", "娱乐", "明星", "动漫", "音乐", "影视", "政治", "历史", "二次元", "中国足球", "科技", "NBA"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        var offsetX: CGFloat = kChannelMargin

        for model in channels {

            let label = UILabel()

            label.text = model
            label.font = UIFont.systemFont(ofSize: 18)
            label.textColor = UIColor.black

            label.sizeToFit()
            label.font = UIFont.systemFont(ofSize: 14)

            var frame = label.frame
            frame.origin.x = offsetX
            frame.size.height = 35
            label.frame = frame

            let tapGesture = UITapGestureRecognizer(target: self, action: #selector(labelClicked(withGesture:)))
            label.addGestureRecognizer(tapGesture)
            label.isUserInteractionEnabled = true

            self.scrollView.addSubview(label)

            offsetX += label.frame.size.width + kChannelMargin
        }
        
        self.scrollView.contentSize = CGSize(width: offsetX, height: 35)
        
        self.setScale(withScale: 1, forIndex: 0)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

extension ViewController {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1;
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.channels.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath)
        cell.backgroundColor = UIColor.arc_random_light()
        
        let label: UILabel = cell.viewWithTag(100) as! UILabel
        label.text = self.channels[indexPath.item]
        
        cell.sizeToFit()
        
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: UIScreen.main.bounds.size.width, height: self.collectionView.frame.size.height);
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return UIEdgeInsetsMake(0, 0, 0, 0)
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 0.0
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0.0
    }
    
    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)

        if index+1 < self.channels.count {
            self.setScale(withScale: scale, forIndex: index+1)
            self.setScale(withScale: 1 - scale, forIndex: index)
        }
    }
}

//extension ViewController {
//
//    func channelView(_ channelView: MCChannelView, forItemAt index: Int) {
//
//        let indexPath = IndexPath(item: index, section: 0)
//
//        self.collectionView.delegate = nil
//        self.collectionView.scrollToItem(at: indexPath, at: .init(rawValue: 0), animated: false)
//        self.collectionView.delegate = self
//    }
//}

extension ViewController {
    @objc func labelClicked(withGesture gesture: UITapGestureRecognizer) {
        
        print("click click")
        
        // 由于点击了按钮是想让页面变化，故在此应该将点击事件抛给控制器
        
        // 使用守护语句保证操作安全
        // 获取点击的索引值
        guard let view = gesture.view,
            let index: Int = self.scrollView.subviews.index(of: view)
            else { return }
        
//        // 构造要滚动到的位置对应的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

        print("%@", gesture);
        
//        // 点击时，让点击的放大，其他缩小
//        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)
    }
    
    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滑动至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)
    }
}