一 、 前言

图像浏览器功能是提供给用户查看应有的信息图像，不重复的循环查看。像这种功能常见于 App 的首页轮播图 、商品图片的查看等。

二 、图片浏览器包含的知识点

• 轻扫手势（UISwipeGestureRecognizer）的创建、添加，使用。

• 闭包作为参数回调的实现。

• 动画的添加 （CATransition）。

• （UIAlertController） 如何在一个 View 类中显示。

• 数组的循环遍历

• 数的取绝对值和余数

三 、图片浏览器的关键代码分析

1> 重写图片浏览器的（init(frame: CGRect)）方法

// 重写对象的方法

override init(frame: CGRect) {
    super.init(frame: frame)
    // 打开图像的交互
    self.isUserInteractionEnabled = true
    // 添加图像滑动手势
    let leftSwipeGestureRecognizer = UISwipeGestureRecognizer.init(target: self, action: #selector(swipeMethod(_ :)))
    leftSwipeGestureRecognizer.direction = .left
    self.addGestureRecognizer(leftSwipeGestureRecognizer)
    
    let rightSwipeGestureRecognizer = UISwipeGestureRecognizer.init(target: self, action: #selector(swipeMethod(_ :)))
    rightSwipeGestureRecognizer.direction = .right
    self.addGestureRecognizer(rightSwipeGestureRecognizer)
    
    // 添加点击手势
    let tapGestureRecognizer = UITapGestureRecognizer.init(target: self, action: #selector(tapGestureMethod(_ :)))
    self.addGestureRecognizer(tapGestureRecognizer)
    
    // 初始化对象
    self.image = UIImage.init(named: "0.jpg")
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

2> 图片浏览器对象上轻扫手势的实现

// TODO : 向左或向右轻扫手势事件
func swipeMethod(_ swipeGestureRecognizer:UISwipeGestureRecognizer) -> Void {
    var isdirection =  true
    // 判断手势的方向
    if swipeGestureRecognizer.direction == .left {
        selecdIndex += 1
        isdirection = true
    }else if swipeGestureRecognizer.direction == .right {
        selecdIndex -= 1
        isdirection = false
    }
    self.transitionsAnimation(layer: self.layer, isDirection: isdirection)
}

3> 图片浏览器的对象转场动画

// MARK : 图像滑动的转场
func transitionsAnimation(layer:CALayer , isDirection: Bool) -> Void {
    let transition = CATransition.init()
    // 设置动画开始的进度
    transition.startProgress = 0.0
    // 设置动画结束的进度
    transition.endProgress = 1.0
    // 设置动画进行的时间
    transition.duration = 0.25
    // 动画的类型
    transition.type = "push"
    // 动画的方向
    transition.subtype = isDirection == true ? kCATransitionFromRight:kCATransitionFromLeft
    // 添加图像
    self.image = (self.imgaeArray[abs(selecdIndex)%self.imgaeArray.count] as! UIImage)
    indexCBFun(abs(selecdIndex)%self.imgaeArray.count)
    // 添加动画
    layer.add(transition, forKey: "NetWork小贱")
}

4> 图像的点击事件的实现方法

// TODO : 图像点击的事件
func tapGestureMethod(_ tapGestureRecognizer:UITapGestureRecognizer) -> Void {
    let AlertView = UIAlertController.init(title: "温馨提示", message: String.init(format: "您选择第%d个美女", (abs(selecdIndex)%self.imgaeArray.count)+1), preferredStyle: .alert)
    let AlertAction = UIAlertAction.init(title: "确定", style: .cancel, handler: nil)
    AlertView.addAction(AlertAction)
    UIApplication.shared.keyWindow?.rootViewController?.present(AlertView, animated: true, completion: nil)
    
}

5> 对象的使用方法

// 创建数据
let imgaeArrays = NSMutableArray.init(capacity: 0)
for i in 0..<6 {
    let image = UIImage.init(named: String.init(format: "%d.jpg", i))
    imgaeArrays.add(image!)
}
let sf = ShufflingFigure.init(frame: self.view.frame)
sf.imgaeArray = imgaeArrays as Array
sf.indexCBFun = { (index) in
    if self.numberLable != nil {
        self.numberLable.text = String.init(format: "%d/6", index+1)
    }
}
self.view.addSubview(sf)

四 、图片浏览器的效果

Untitled.gif

五、完整代码

1> 轮播图对象的实现

//
//  ShufflingFigure.swift
//  轮播图
//
//  Created by MAC on 2017/8/7.
//  Copyright © 2017年 NetworkCode小贱. All rights reserved.
//

import UIKit

// block 回调


class ShufflingFigure: UIImageView {
    // 存储图像的数组
    var imgaeArray = Array<Any>.init()
    var selecdIndex = 0
    typealias callBackFunc = (_ indexV:Int)->()
    var indexCBFun : callBackFunc!
    
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        // 打开图像的交互
        self.isUserInteractionEnabled = true
        // 添加图像滑动手势
        let leftSwipeGestureRecognizer = UISwipeGestureRecognizer.init(target: self, action: #selector(swipeMethod(_ :)))
        leftSwipeGestureRecognizer.direction = .left
        self.addGestureRecognizer(leftSwipeGestureRecognizer)
        
        let rightSwipeGestureRecognizer = UISwipeGestureRecognizer.init(target: self, action: #selector(swipeMethod(_ :)))
        rightSwipeGestureRecognizer.direction = .right
        self.addGestureRecognizer(rightSwipeGestureRecognizer)
        
        // 添加点击手势
        let tapGestureRecognizer = UITapGestureRecognizer.init(target: self, action: #selector(tapGestureMethod(_ :)))
        self.addGestureRecognizer(tapGestureRecognizer)
        
        // 初始化对象
        self.image = UIImage.init(named: "0.jpg")
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    
    // TODO : 向左或向右轻扫手势事件
    func swipeMethod(_ swipeGestureRecognizer:UISwipeGestureRecognizer) -> Void {
        var isdirection =  true
        // 判断手势的方向
        if swipeGestureRecognizer.direction == .left {
            selecdIndex += 1
            isdirection = true
        }else if swipeGestureRecognizer.direction == .right {
            selecdIndex -= 1
            isdirection = false
        }
        self.transitionsAnimation(layer: self.layer, isDirection: isdirection)
    }
    
    
    // TODO : 图像点击的事件
    func tapGestureMethod(_ tapGestureRecognizer:UITapGestureRecognizer) -> Void {
        let AlertView = UIAlertController.init(title: "温馨提示", message: String.init(format: "您选择第%d个美女", (abs(selecdIndex)%self.imgaeArray.count)+1), preferredStyle: .alert)
        let AlertAction = UIAlertAction.init(title: "确定", style: .cancel, handler: nil)
        AlertView.addAction(AlertAction)
        UIApplication.shared.keyWindow?.rootViewController?.present(AlertView, animated: true, completion: nil)
        
    }
    
    // MARK : 图像滑动的转场
    func transitionsAnimation(layer:CALayer , isDirection: Bool) -> Void {
        let transition = CATransition.init()
        // 设置动画开始的进度
        transition.startProgress = 0.0
        // 设置动画结束的进度
        transition.endProgress = 1.0
        // 设置动画进行的时间
        transition.duration = 0.25
        // 动画的类型
        transition.type = "push"
        // 动画的方向
        transition.subtype = isDirection == true ? kCATransitionFromRight:kCATransitionFromLeft
        // 添加图像
        self.image = (self.imgaeArray[abs(selecdIndex)%self.imgaeArray.count] as! UIImage)
        indexCBFun(abs(selecdIndex)%self.imgaeArray.count)
        // 添加动画
        layer.add(transition, forKey: "NetWork小贱")
    }
    
    /*
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
    }
    */

}

2> 调用完整代码

//
//  ViewController.swift
//  轮播图
//
//  Created by MAC on 2017/8/7.
//  Copyright © 2017年 NetworkCode小贱. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    var numberLable :UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // 创建数据
        let imgaeArrays = NSMutableArray.init(capacity: 0)
        for i in 0..<6 {
            let image = UIImage.init(named: String.init(format: "%d.jpg", i))
            imgaeArrays.add(image!)
        }
        let sf = ShufflingFigure.init(frame: self.view.frame)
        sf.imgaeArray = imgaeArrays as Array
        sf.indexCBFun = { (index) in
            if self.numberLable != nil {
                self.numberLable.text = String.init(format: "%d/6", index+1)
            }
        }
        self.view.addSubview(sf)
        self.createLable()
        
    }
    
    func createLable() -> Void {
        if self.numberLable == nil {
            self.numberLable = UILabel.init(frame: CGRect.init(x: self.view.frame.width - 80, y: 30, width: 60, height: 30))
            self.numberLable.textAlignment = .center
            self.numberLable.font = UIFont.systemFont(ofSize: 20)
            self.numberLable.text = String.init(format: "%d/%d", 0+1,6)
            self.numberLable.textColor = UIColor.white
            self.numberLable.backgroundColor = UIColor.magenta
            self.numberLable.layer.masksToBounds = true
            self.numberLable.layer.cornerRadius = 6
            self.view.addSubview(self.numberLable)
        }
    }
    

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


}