最終效果
day20.gif
時間過得挺快的！一下子就寫到了Day20了
在開始之前先了解一個東西：
guard：guard 語句谣沸，類似于 if 語句刷钢，基于布爾值表達式來執(zhí)行語句。使用 guard 語句來要求一個條件必須是真才能執(zhí)行 guard 之后的語句乳附。與 if 語句不同内地， guard 語句總是有一個 else 分句—— else 分句里的代碼會在條件不為真的時候執(zhí)行。
代碼說明：
var name : String? = "小明"
func printName(){
// if (name != nil) {
// NSLog(@"%@",name);
// }else{
// print("名字都沒有赋除，你搞什么呢")
// }
// Swift1
// if name != nil {
// print(name)
// }
// else{
// print("名字都沒有瓤鼻，你搞什么呢？")
// }
// Swift2
// if let xiaoming = name {
// print(xiaoming)
// }
// else{
// print("名字都沒有贤重，你搞什么呢茬祷？")
// }
// guard - 單個參數，單個條件
// 結果是輸出小明
// guard let xiaoming = name else {
// print("名字都沒有并蝗，你搞什么呢祭犯？")
// return
// }
//
// print(xiaoming)
//
// // guard - 單個參數，多個條件
// //結果是輸出 名字都沒有滚停，你搞什么呢沃粗？
// guard let xiaoming1 = name where name == "小2明" else {
// print("名字都沒有，你搞什么呢键畴？")
// return
// }
// print(xiaoming1)
// guard - 多個參數
//結果 小紅最盅、小明 這里參數必須都滿足，否則就會執(zhí)行 else {... return}
let hong : String? = "小紅"
guard let xiaohong = hong , xiaoming2 = name else {
print("調價不滿足")
return
}
print(xiaohong)
print(xiaoming2)
}
<br />
在了解了上面的知識后起惕，就開始完成這個效果吧
1涡贱、UI布局
之前很多次都是使用了storyboard，這次使用代碼
<br />
1.1 先創(chuàng)建一個collectionview
var collectionView: UICollectionView! = {
let flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = CGSize(width: UIScreen.mainScreen().bounds.width, height: 260 )
let coll = UICollectionView(frame: UIScreen.mainScreen().bounds, collectionViewLayout: flowLayout)
coll.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
return coll
}()
<br />
1.2 使用xib創(chuàng)建Cell
填入名字惹想，創(chuàng)建XIB
<br />
1.3 設置Xib內容
設置如下效果
到這里位置问词，UI部分已經完成了，接下來就是代碼實現
<br />
2嘀粱、代碼實現
2.1 創(chuàng)建一個模型激挪，加載圖片 類名：AnimationCellModel
import UIKit
struct AnimationCellModel {
let imagePath :String
init(imagePath : String?){
self.imagePath = imagePath ?? ""
}
}
<br />
2.2 創(chuàng)建一個數組辰狡，加載模型 類名：AnimationImageCollection
import UIKit
struct AnimationImageCollection {
private let imagePaths = ["1","2","3","4","5"]
var images : [AnimationCellModel]
init(){
images = imagePaths.map { AnimationCellModel(imagePath: $0) }
}
}
<br />
2.3 在剛才創(chuàng)建的cell中把背景圖片，和button垄分，拖入到文件中宛篇，實現下面方法，都有注釋
import UIKit
class AnimationCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var backButton: UIButton!
@IBOutlet weak var textLabel: UILabel!
@IBOutlet weak var backImage: UIImageView!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
/// 定義一個閉包
var backButtonTapped : (() -> ())?
func prepareCell(viewModel : AnimationCellModel){
// 設置背景圖片
backImage.image = UIImage(named: viewModel.imagePath)
// 設置按鈕默認隱藏
backButton.hidden = true
// 為按鈕添加點擊事件
addTapEventHandler()
}
// 當選中cell的時候調用方法
func handleCellSelected() -> Void {
backButton.hidden = false
self.superview?.bringSubviewToFront(self)
}
// 按鈕的點擊事件
private func addTapEventHandler(){
backButton.addTarget(self, action: #selector(AnimationCollectionViewCell.backButtonClick), forControlEvents: .TouchUpInside)
}
@objc private func backButtonClick(){
guard let back = backButtonTapped else {
print("閉包是空的")
return
}
back()
// if 的寫法
/*
if let back = backButtonTapped{
back()
}
else{
print("閉包是空的")
}
*/
}
}
<br />
<br />
2.4 通過上面的方法薄湿，我們已經設置了好數據源叫倍，并且設置好了cell，接下來把collectionview加載到ViewController中嘿般，然后在設置代理段标，實現代理，監(jiān)聽點擊炉奴，然后開始動畫
//
// ViewController.swift
// CollectionViewAnimation
//
// Created by ios on 16/9/27.
// Copyright ? 2016年 ios. All rights reserved.
//
import UIKit
// MARK: - category方法
extension Array {
//判斷是否在下標區(qū)間內逼庞，在就返回值 否則返回空
func safeIndex(i: Int) -> Element? {
return i < self.count && i >= 0 ? self[i] : nil
}
}
//Xib
private struct Storyboard{
static let CellIdentifier = String(AnimationCollectionViewCell)
static let NibName = String(AnimationCollectionViewCell)
}
//動畫
private struct Constans {
static let Duration : Double = 0.5
static let Delay : Double = 0.0
static let SpringDamping : CGFloat = 1.0
static let SpringVelocity : CGFloat = 1.0
}
class ViewController: UIViewController ,UICollectionViewDelegate,UICollectionViewDataSource{
//數據源
private var imageCollection = AnimationImageCollection()
//懶加載collectionview
private lazy var collectionView: UICollectionView! = {
let flowLayout = UICollectionViewFlowLayout()
flowLayout.itemSize = CGSize(width: UIScreen.mainScreen().bounds.width, height: 260 )
let coll = UICollectionView(frame: UIScreen.mainScreen().bounds, collectionViewLayout: flowLayout)
coll.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
return coll
}()
// 加載CollectionView
override func viewDidLoad() {
super.viewDidLoad()
//register 提前注冊
collectionView.registerNib(UINib(nibName: Storyboard.NibName, bundle: nil), forCellWithReuseIdentifier: Storyboard.CellIdentifier)
//設置代理
collectionView.delegate = self
collectionView.dataSource = self
//加載View
view.addSubview(collectionView)
}
// 設置系統(tǒng)狀態(tài)欄樣式
override func preferredStatusBarStyle() -> UIStatusBarStyle {
return .LightContent
}
}
// MARK: - 這里是Collectionview的代理 Datasource delegate
extension ViewController{
// 返回有多少個cell
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return imageCollection.images.count ?? 0
}
// 設置每個cell的樣式
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
//這里要滿足兩個條件
guard let cell = collectionView.dequeueReusableCellWithReuseIdentifier(Storyboard.CellIdentifier, forIndexPath: indexPath) as? AnimationCollectionViewCell, viewModel = imageCollection.images.safeIndex(indexPath.row) else {
return UICollectionViewCell()
}
cell.prepareCell(viewModel)
return cell
}
// cell 被點擊是調用
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
guard let cell = collectionView.cellForItemAtIndexPath(indexPath) as? AnimationCollectionViewCell else{
print("拿不到Cell")
return
}
//調用動畫方法
cellAnimationWith(cell, collectionView: collectionView)
}
private func cellAnimationWith(cell : AnimationCollectionViewCell,collectionView : UICollectionView){
// 設置為選中狀態(tài)
cell.handleCellSelected()
//保存閉包代碼
cell.backButtonTapped = {
guard let indexPaths = self.collectionView.indexPathsForSelectedItems() else{
return
}
collectionView.scrollEnabled = true
collectionView.reloadItemsAtIndexPaths(indexPaths)
}
// 設置動畫
let animation : () -> () = {
//設置大小
cell.frame = collectionView.bounds
}
//動畫結束又可以滑動了
let completion : (fnished : Bool) -> () = { _ in
collectionView.scrollEnabled = false
}
//開始動畫
UIView.animateWithDuration(Constans.Duration, delay: Constans.Delay, usingSpringWithDamping: Constans.SpringDamping, initialSpringVelocity: Constans.SpringVelocity, options: [], animations: animation, completion: completion)
}
}
