Day5 - UICollectionView、VisualEf

效果图

效果图

1、布局

布局如下

包含

• 1 一个占全屏的ImageView，并设置好图片

• 2 一个占全屏VisualEffectView，搜索时选择第一个
• 3 在VisaulEffectView中的View里面添加一个CollectionView
• 4 设置CollectionVIew中的cell样式，上部分为图片，下部分为一个Label

2、创建类、数据、进行关联

创建三个类：

CollectionViewCell: UICollectionViewCell
CellModel: NSObject
ScreenView: UIView 

创建数据:进入CellModel中

• 定义属性

//定义属性
    var title : String = ""
    var descriptionStr: String = ""
    var image :UIImage!

• 构造方法

//初始化方法
    init(title:String, descriptionStr : String , image :UIImage!) {
        self.title = title
        self.descriptionStr = descriptionStr
        self.image = image
    }

• 创建数据，返回一个数组

static func createCellModel() -> [CellModel]{
        return [
            CellModel(title: "离离原上草", descriptionStr: "离离原上草，撩妹我最屌", image: UIImage(named:"c1.jpg" )),
            CellModel(title: "一岁一枯荣", descriptionStr: "一岁一枯荣，把老子撩穷", image: UIImage(named:"c2.jpg" )),
            CellModel(title: "野火烧不尽", descriptionStr: "野火烧不尽，撩妹要尽兴", image: UIImage(named:"c3.jpg" )),
            CellModel(title: "春风吹又深", descriptionStr: "春分吹又深，切莫太认真", image: UIImage(named:"c4.jpg" )),
            CellModel(title: "若是君中意", descriptionStr: "若是君中意，往下点喜欢", image: UIImage(named:"c5.jpg" )),
            CellModel(title: "倘若无用处", descriptionStr: "倘若无用处，请把文章关", image: UIImage(named:"c6.jpg" )),
        ]
    }

在Main.storyboard，选择Cell，进行与类关联

就是这样子

然后把属性拖到CollectionViewCell中

创建一个对象，并设置其setter方法

var cell :CellModel!{
        didSet{
            createUI()
        }
    }

func createUI(){
        imageV.image = cell.image
        titleLabel.text = cell.title
    }

设置圆角

override func layoutSubviews() {
        super.layoutSubviews()
        
        imageV.layer.cornerRadius = 5
        imageV.layer.masksToBounds = true
    }

3、然后在ViewController中得到数据、Collectionview，设置代理，实现代理方法

得到数据

let data : Array = CellModel.createCellModel()

CollectionView：拖线到ViewController中即可

设置代理

collectionView.delegate = self
collectionView.dataSource = self

实现代理方法

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return data.count
    }
    
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell{
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! CollectionViewCell
        
        cell.cell = data[indexPath.row]
        
        return cell
        
    }

完成上述步骤便可显示了！

4、监听Cell点击事件、创建View并显示（动画效果）、闭包使用

监听Cell点击事件

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) { 
    }

创建View:进入ScreenView中添加如下代码，分别申明属性、构造方法、创建UI并添加到当前View中、监听touchesBegan事件

var image : UIImageView!
    var title : UILabel?
    var desTitle :UILabel?
    var block:(view : ScreenView) -> ();

    init(frame: CGRect, model : CellModel,tapBlock : (view : ScreenView) -> ()){
        block = tapBlock
        super.init(frame: frame)
        createUI(model)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func createUI(model : CellModel){
        image = UIImageView(frame: CGRect(x: 0, y: 0, width: self.frame.width, height: self.frame.height - 50))
        image.image = model.image
        title = UILabel(frame: CGRect(x: 0, y: self.frame.height - 45, width: self.frame.width, height: 20))
        title?.text = model.title
        desTitle = UILabel(frame: CGRect(x: 0, y: self.frame.height-25, width: self.frame.width, height: 20))
        desTitle?.text = model.descriptionStr
        
        self.addSubview(image)
        self.addSubview(title!)
        self.addSubview(desTitle!)
    }
    
    
    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        super.touchesBegan(touches, withEvent: event)
        

完成对View的创建后在Cell点击事件的方法中

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        let cell = collectionView.cellForItemAtIndexPath(indexPath) as! CollectionViewCell
        
        showView = ScreenView(frame: view.bounds, model: data[indexPath.row], tapBlock: { (view : ScreenView) -> () in
            UIView.animateWithDuration(0.6, delay: 0, usingSpringWithDamping: 0.45, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveLinear, animations: {
                self.showView!.frame = cell.frame
                self.showView!.alpha = 0
                self.showView!.layer.cornerRadius = 30
                }, completion: { (finished) in
                    self.showView!.removeFromSuperview()
            })
        })
        
        
        showView?.frame = cell.frame
        showView!.alpha = 0.1
        UIView.animateWithDuration(0.8, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveLinear, animations: {
                self.showView?.frame = CGRect(x: 0, y: 0, width: UIScreen.mainScreen().bounds.width, height: UIScreen.mainScreen().bounds.height)
                self.showView!.alpha = 1
            }, completion: nil)
        
        self.view.addSubview(showView!)
        
    }

至此功能全部完成

关于VisualEffectView有三种模式可以选择，代表不同的模糊效果：

Extra Light

Light

Dark

其中Dark最黑，Extra Light最亮，Light则是两者之间

Demo地址-CollectionViewAndVisualEffectView