美文网首页
Day9 - ScrollView,图片缩小方法

Day9 - ScrollView,图片缩小方法

作者: Codepgq | 来源:发表于2016-09-13 11:25 被阅读33次

    效果图

    效果图

    <br />

    1、布局

    结构如下

    <br />

    2、然后设置ScrollView

     scrollView.addSubview(imageView)
            
            scrollView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
            
            scrollView.zoomScale = scrollView.minimumZoomScale
            
            scrollView.delegate = self
            
            setZoomScaleFor(scrollView.frame.size)
    

    <br />
    setZoomScaleFor...方法

     private func setZoomScaleFor(srollViewSize: CGSize) {
            
            let imageSize = imageView.bounds.size
            let widthScale = srollViewSize.width / imageSize.width
            let heightScale = srollViewSize.height / imageSize.height
            let minimunScale = min(widthScale, heightScale)
            
            scrollView.minimumZoomScale = minimunScale
            scrollView.maximumZoomScale = 3.0
            
        }
    

    <br />
    添加三个属性

    var top : CGFloat = 0
        
        var imageView : UIImageView = {
            let iv = UIImageView(image: UIImage(named: "item"))
            iv.sizeToFit()
            return iv
        }()
        
        var showImageView: UIImageView = {
            let iv = UIImageView(image: UIImage(named: "item"))
            iv.userInteractionEnabled = true
            return iv
        }()
    

    <br />
    为showImageView添加手势,在ViewDidLoad中

    let tap : UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(ViewController.showScrollView))
            
            showImageView.addGestureRecognizer(tap)
    

    <br />
    实现手势方法

     @objc private func showScrollView(){
            
            UIView.animateWithDuration(0.5, animations: { 
                self.showImageView.frame = self.scrollView.frame
                self.showImageView.frame.size.width = self.scrollView.contentSize.width
                }) { (completion) in
                self.scrollView.hidden = false
                    self.showImageView.removeFromSuperview()
                    self.top = 0
            }
        }
    

    <br />
    实现scrollView的代理方法

     func scrollViewDidZoom(scrollView: UIScrollView) {
            
            top = scrollView.contentInset.top
            self.recenterImage()
            
        }
        
        func scrollViewDidEndZooming(scrollView: UIScrollView, withView view: UIView?, atScale scale: CGFloat) {
            
            if top >= 1 {
                scrollView.hidden = true
                showImageView.layoutMargins = scrollView.contentInset
                self.view.addSubview(showImageView)
                
                UIView.animateWithDuration(0.5, animations: {
                    self.showImageView.frame = CGRect(x: 10, y: 20, width: 100, height: 100)
                })
            }
        }
        
        func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
            if top > 1 {
                return nil
            }
            return self.imageView
        }
    

    <br />
    最后通过recenterImage方法设置图片大小

     private func recenterImage() {
            
            let scrollViewSize = scrollView.bounds.size
            let imageViewSize = imageView.frame.size
            let horizontalSpace = imageViewSize.width < scrollViewSize.width ? (scrollViewSize.width - imageViewSize.width) / 2.0 : 0
            let verticalSpace = imageViewSize.height < scrollViewSize.height ? (scrollViewSize.height - imageViewSize.width) / 2.0 :0
            
            scrollView.contentInset = UIEdgeInsetsMake(verticalSpace, horizontalSpace, verticalSpace, horizontalSpace)
            
        }
    

    Demo - ImageScrollEffect

    相关文章

      网友评论

          本文标题:Day9 - ScrollView,图片缩小方法

          本文链接:https://www.haomeiwen.com/subject/cqemettx.html