效果图
效果图
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
