Swift封装图片浏览,多张图片浏览,缩放,gif图片的播放

admin管理员组

文章数量:1122851

Swift封装图片浏览,多张图片浏览,缩放,gif图片的播放

封装了一个图片浏览器,实现了图片的浏览,缩放,支持多张图片的浏览缩放,保存到相册等功能

实现功能

1.图片浏览,根据图片的大小适应,浏览长图
2.多张图片左右滑动浏览
3.图片的缩放
4.播放gif图片

实现技术

1.使用UICollectionView作为图片浏览的承载控制器
2.自定义cell显示图片,
3.使用UIScrollerView作为最底层视图 
4.使用UIImageView显示图片
5.使用Kingfisher加载网络图片
6.使用UIImageWriteToSavedPhotosAlbum保存图片到相册
7.使用SVProgressHUD作为保存图片成功的提示
8.使用snapkit作为layout的布局约束

为什么在cell中要使用UIScrollerView
1.显示长图片,可以上下滑动浏览图片
2.使用UIScrollerView的代理方法实现图片的缩放功能,
3.使用UIScrollerView的代理方法实现监听图片缩放完成后的居中操作

代码文件下载地址

效果演示

使用方法

///index为当前点击了图片数组中的第几张图片,Urls为图片Url地址数组
**Urls必须传入为https或者http的图片地址数组,**
let vc = PictureVisitControl(index: index.row, Urls: Urls as! [URL])present(vc, animated: true, completion:  nil)

源码

import UIKit
import SVProgressHUD
class PictureVisitControl: UIViewController{override func viewDidLoad() {super.viewDidLoad()}var currentIndex:Int?var pictureUrls:[URL]?init(index:Int,Urls:[URL]) {//先初始化本类属性,在初始化父类currentIndex = indexpictureUrls = Urlssuper.init(nibName: nil, bundle: nil)setUpUI()view.backgroundColor = .white}private func setUpUI(){view.addSubview(collectionView)view.addSubview(closebtn)view.addSubview(SaveBtn)//设置数据源collectionView.dataSource = self;collectionView.register(PictureVisitControlCell.self, forCellWithReuseIdentifier: "item")setlayoutContains()}private func setlayoutContains(){closebtn.snp.makeConstraints { (make) inmake.bottom.equalTo(self.view.snp.bottom).offset(-30)make.left.equalTo(20)make.width.equalTo(100)make.height.equalTo(35)}SaveBtn.snp.makeConstraints { (make) inmake.bottom.equalTo(self.view.snp.bottom).offset(-30)make.right.equalTo(self.view.snp.right).offset(-20)make.width.equalTo(100)make.height.equalTo(35)}collectionView.snp.makeConstraints { (make) inmake.top.left.bottom.right.equalTo(0)} }
@objc private func closeAction(){dismiss(animated: true, completion: nil)}@objc private func SaveAction(){let index = collectionView.indexPathsForVisibleItems.last!let cell:PictureVisitControlCell = collectionView.cellForItem(at: index) as! PictureVisitControlCell//保存图片let img = cell.IMg.imageUIImageWriteToSavedPhotosAlbum(img!, self, #selector(image(image:didFinishSavingWithError:contextInfo:)), nil)//  - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo;}@objc func image(image:UIImage,didFinishSavingWithError error:NSError?,contextInfo:AnyObject){if error != nil {SVProgressHUD.showError(withStatus: "保存失败")}else{SVProgressHUD.showSuccess(withStatus: "保存成功")}}required init?(coder aDecoder: NSCoder) {fatalError("init(coder:) has not been implemented")}private lazy var collectionView:UICollectionView = UICollectionView(frame:CGRect.zero, collectionViewLayout: PicturePrepareLayout())private lazy var closebtn:UIButton = {let btn = UIButton()btn.setTitle("关闭", for: .normal)btn.setTitleColor(.white, for: .normal)btn.backgroundColor = UIColor.darkGraybtn.addTarget(self, action: #selector(closeAction), for: UIControlEvents.touchUpInside)return btn}()private lazy var SaveBtn:UIButton = {let btn = UIButton()btn.setTitle("保存", for: .normal)btn.setTitleColor(.white, for: .normal)btn.backgroundColor = UIColor.darkGraybtn.addTarget(self, action: #selector(SaveAction), for: UIControlEvents.touchUpInside)return btn}()}class PicturePrepareLayout:UICollectionViewFlowLayout {override func prepare() {itemSize = UIScreen.main.bounds.sizeminimumLineSpacing = 0minimumInteritemSpacing = 0scrollDirection = UICollectionViewScrollDirection.horizontalcollectionView?.showsHorizontalScrollIndicator = falsecollectionView?.isPagingEnabled = truecollectionView?.bounces = false;}
}extension PictureVisitControl:UICollectionViewDataSource,PictureVisitControlCellDelegate{func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {return pictureUrls?.count ?? 0}func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "item", for: indexPath) as! PictureVisitControlCellcell.PictureVisitDelegate = selfcell.imageURL = pictureUrls?[indexPath.row]return cell}func TapPhotoCloseDismiss(cell: PictureVisitControlCell) {dismiss(animated: true, completion: nil)}}

PictureVisitControlCell的实现

import UIKit
import Kingfisherprotocol PictureVisitControlCellDelegate:NSObjectProtocol {func TapPhotoCloseDismiss(cell:PictureVisitControlCell)
}class PictureVisitControlCell: UICollectionViewCell {weak var PictureVisitDelegate : PictureVisitControlCellDelegate?var imageURL:URL?{didSet{reSetPosion()IMg.kf.setImage(with: imageURL, placeholder:nil, options: nil, progressBlock: nil) { (image, error, _, _) in//调整图片位置self.setImgViewPosion()}}}//调整图片显示的位置private  func setImgViewPosion(){let size = self.disPlaySize(image: IMg.image!)if size.height < ScreenHeight{self.IMg.frame = CGRect.init(origin: CGPoint.zero, size: size)//处理居中显示let y = (UIScreen.main.bounds.height - size.height) * 0.5self.scrollView.contentInset = UIEdgeInsets(top: y, left: 0, bottom: -y, right: 0)}else{self.IMg.frame = CGRect.init(origin: CGPoint.zero, size: size)scrollView.contentSize = size}}//重置scrollerView和imageView的属性private func reSetPosion(){scrollView.contentInset = UIEdgeInsets.zeroscrollView.contentOffset = CGPoint.zeroscrollView.contentSize = CGSize.zero//重置imageview的属性IMg.transform = CGAffineTransform.identity}private func disPlaySize(image:UIImage)->CGSize{let scale = image.size.height / image.size.widthlet width = UIScreen.main.bounds.widthlet height = width * scalereturn CGSize(width: width, height: height)}override init(frame: CGRect) {super.init(frame: frame)SetUpUI()}private func  SetUpUI(){contentView.addSubview(scrollView)scrollView.addSubview(IMg)//添加布局scrollView.frame = UIScreen.main.boundsscrollView.delegate = selfscrollView.maximumZoomScale = 2.0scrollView.minimumZoomScale = 0.5IMg.isUserInteractionEnabled = truelet tap = UITapGestureRecognizer(target: self, action: #selector(close))IMg.addGestureRecognizer(tap)}/// 点击图片关闭控制器@objc private func close(){PictureVisitDelegate?.TapPhotoCloseDismiss(cell: self)}private lazy var scrollView:UIScrollView = UIScrollView()lazy var IMg:UIImageView = UIImageView()required init?(coder aDecoder: NSCoder) {fatalError("init(coder:) has not been implemented")}
}extension PictureVisitControlCell:UIScrollViewDelegate{//告诉系统需要缩放的viewfunc viewForZooming(in scrollView: UIScrollView) -> UIView? {return IMg;}//重新调整配图的位置func scrollViewDidEndZooming(_ scrollView: UIScrollView, with view: UIView?, atScale scale: CGFloat) {var offSetX = (UIScreen.main.bounds.width - (view?.frame.width)!) * 0.5var offSetY = (UIScreen.main.bounds.height - (view?.frame.height)!) * 0.5offSetX = offSetX < 0 ? 0: offSetXoffSetY = offSetY < 0 ? 0: offSetYscrollView.contentInset = UIEdgeInsets(top: offSetY, left: offSetX, bottom: offSetY, right: offSetX)}}

代码文件下载地址

本文标签： Swift封装图片浏览多张图片浏览缩放gif图片的播放