美文网首页
UIScrollView(滚动视图)

UIScrollView(滚动视图)

作者: theDeskmateOfSb | 来源:发表于2016-09-05 19:37 被阅读0次

UIScrollView(滚动视图)

滚动视图的基础属性,它继承自UIView
UIScrollView:UIView
设置UIScrollView的frame属性的时候UIScrollView和UIScrollView的内容的frame的大小是一样的;UIScrollView的坐标就是设置的frame属性的坐标,UIScrollView的内容的坐标是(0,0)
UIScrollView可以滚动的前提:UIScrollView内容的大小要比UIScrollView的大小要大。当UIScrollView内容的宽度大于UIScrollView本身的宽度的时候,UIScrollView可以左右滚动;当UIScrollView内容的高度大于UIScrollView本身的高度的时候,UIScrollView可以上下滚动


        //==========从UIView继承下来的属性==========
        //1.创建UIScrollView对象
        //这个时候UIScrollView内容的大小和scrollView本身是一样的
        let scrollView = UIScrollView.init(frame: self.view.bounds)
        //2.添加到界面上
        self.view.addSubview(scrollView)
        //3.设置背景颜色
        scrollView.backgroundColor = UIColor.yellowColor()
        //4.添加imageView
        //imageView的坐标是(0,0),大小是图片的大小
        /*
        let imageView = UIImageView.init(image: UIImage.init(named: "1092.jpg"))
        //在scrollView上添加子视图,实质是将子视图添加到它的内容上的
        scrollView.addSubview(imageView)
         */
        
        //创建多张图片
        for item in 1...4 {
            let imageView = UIImageView.init(frame: CGRectMake(CGFloat(item-1)*scrollView.bounds.width, 0, scrollView.bounds.width, scrollView.bounds.height))
            scrollView.addSubview(imageView)
            imageView.image = UIImage.init(named: "35_\(item).jpg")
        }
        
        
        
        //=========UIScrollView专有属性======
        //核心属性
        //!!!1.内容大小
        //scrollView.contentSize = CGSizeMake(self.view.bounds.width * 2, self.view.bounds.height*2)
        //如果想要能够通过滚动将图片内容显示全,就将scrollView的内容大小设置为和图片一样的大小
        scrollView.contentSize = CGSizeMake(4*scrollView.bounds.width, scrollView.bounds.height*3)
        
        //!!!2.内容偏移量
        //scrollView默认显示的是内容左上角的部分
        scrollView.contentOffset = CGPointMake(scrollView.bounds.width, 0)
        
        //3.设置是否可以分页
        //true->每次滚动的距离是一页的距离
        //一页的大小就是scrollView的frame的大小。如果分页,那么每次横向滚动滚动的距离是scrollView的宽度,上下滚动的距离是scrollView的高度
        scrollView.pagingEnabled = true
        
        
        //其他属性
        //1.内容边距
        //设置scrollView内容到scrollView本身上左下右的距离(默认都是0)
        //scrollView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20)
    
        //3.设置是否锁定一定方法(默认false->同一时间既可以上下滚动又可以左右滚动)
        scrollView.directionalLockEnabled = true  //true->同一时间只能上下滚动或者左右滚动
        
        //3.滑到内容边缘的时候是否可以滚动一段距离再弹回去(默认true)
        scrollView.bounces = false
        
        //4.设置是否可以滚动(默认true->可以滚动)
        scrollView.scrollEnabled = true
        
        //5.设置是否显示滚动条(默认true->显示)
        //是否显示水平方向的滚动条
        scrollView.showsHorizontalScrollIndicator = true
        //是否显示垂直方向的滚动条
        scrollView.showsVerticalScrollIndicator = true
        
        //6.设置滚动条到上下左右的边距
        //注意:这个结构体中的值只有下和右有效。下->水平方向的滚动条。右->垂直方向的滚动条
        scrollView.scrollIndicatorInsets = UIEdgeInsetsMake(0, 0, 100, 10)
        
        //7.设置滚动条的风格
        scrollView.indicatorStyle = .Black
        
        //8.滚动到指定区域(让指定区域可见)
        //scrollView.scrollRectToVisible(CGRectMake(1000, 100, 100, 100), animated: true)
        
        
        //9.是否滚动到顶部(点击状态栏是否可以自动回到顶部)
        scrollView.scrollsToTop = true
        
    }

    


}

滚动视图的委托调用

//6.设置代理
        self.scrollView.delegate = self
        //8.设置缩放倍数
        self.scrollView.maximumZoomScale = 3
        self.scrollView.minimumZoomScale = 0.5
        //MARK: UIScrollView Delegate
extension ViewController: UIScrollViewDelegate{

    //============滚动相关============
    //1.在scrollView滚动的时候实时调用
    func scrollViewDidScroll(scrollView: UIScrollView){
    
        print("正在滚动")
        print(scrollView.contentOffset)
    }
    
    //2.在scrollView将要开始拖动的时候调用
    func scrollViewWillBeginDragging(scrollView: UIScrollView){
    
        print("将要开始拖拽")
    }
    
    //3.停止减速的时候会调用(实质就是停止滚动的时候会调用)
    func scrollViewDidEndDecelerating(scrollView: UIScrollView){
    
        print("停止减速")
    }
    
    
    //4.将要停止拖拽的时候调用(手将要松开的时候,不代表停止滚动)
    //参数2:手松开时候在x方向上和在y方向的速度
    //参数3:预判的滚动停止时候的偏移量
    func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>){
    
        print("将要停止拖拽")
        print(targetContentOffset)
    }
    
    
    //5.手将要停止拖拽的时候调用
    func scrollViewWillBeginDecelerating(scrollView: UIScrollView){
    
        print("将要开始减速")
    }
    
    //6.已经停止滚动动画的时候调用
    //只有在通过setContentOffset的方法使用动画效果让scrollView滚动,在停止滚动的时候才会调用这个方法
    func scrollViewDidEndScrollingAnimation(scrollView: UIScrollView){
        
        print("停止滚动动画")
    }
    
    
    //7.只有在通过点击状态栏自动滚动到顶部的时候才会调用
    func scrollViewDidScrollToTop(scrollView: UIScrollView){
    
        print("已经滚动到顶部")
    }
    
    
    //============缩放相关=============
    //UIScrollView已经实现了缩放功能
    //想要让UIScrollView上的内容进行缩放必须满足以下条件:
    //a.设置缩放的最大倍数和最小倍数(默认都是1)
    //b.通过协议方法告诉UIScrollView缩放对象
    //1.正在缩放的时候会实时调用
    func scrollViewDidZoom(scrollView: UIScrollView){
    
        print("正在缩放")
    }
    
    //2.告诉UIScrollView在缩放的时候,对哪个视图进行缩放(设置缩放对象)
    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView?{
    
        return scrollView.subviews[0]
    }
    

UIPageControl

//屏幕宽度
let Screen_W = UIScreen.mainScreen().bounds.size.width

class ViewController: UIViewController {
    
    //MARK: - 属性
    let scrollView = UIScrollView()
    var pageControl: UIPageControl? = nil
    

    //MARK: - 方法
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //1.设置frame
        self.scrollView.frame = CGRectMake(0, 0, self.view.bounds.width, 250)
        
        //2.添加到界面上
        self.view.addSubview(self.scrollView)
        
        //3.添加图片
        for item in 1...6 {
            
            let imageView = UIImageView.init(frame: CGRectMake(CGFloat(item-1)*Screen_W, 0, Screen_W, 250))
            imageView.image = UIImage.init(named: "21_\(item).jpg")
            self.scrollView.addSubview(imageView)
        }
        
        //4.设置内容大小
        self.scrollView.contentSize = CGSizeMake(CGFloat(scrollView.subviews.count)*Screen_W, 250)
        //5.设置分页
        self.scrollView.pagingEnabled = true
        
        //6.设置代理
        self.scrollView.delegate = self
        
    
        //7.添加pageControl
        self.creatPageControl()
        
    }


}

//MARK: - ScrollView Delegate
extension ViewController: UIScrollViewDelegate{

    //停止滚动
    func scrollViewDidEndDecelerating(scrollView: UIScrollView){
    
        //拿到当前是第几页
        let page = scrollView.contentOffset.x / scrollView.bounds.width
        
        //更新pageControl
        self.pageControl?.currentPage = Int(page)
    }
}


//MARK: - PageControl
extension ViewController{

    func creatPageControl() {
        
        //1.创建UIPageControl对象
        self.pageControl = UIPageControl.init(frame: CGRectMake(0, 230, Screen_W, 20))
        //2.添加到界面上
        self.view.addSubview(self.pageControl!)
        //3.设置背景颜色
        //self.pageControl?.backgroundColor = UIColor.yellowColor()
        
        //4.核心属性
        //设置总的页数
        self.pageControl?.numberOfPages = self.scrollView.subviews.count
        //设置当前页(从0开始)
        self.pageControl?.currentPage = 0
        
        //5.设置圆点的颜色
        self.pageControl?.pageIndicatorTintColor = UIColor.yellowColor()
        self.pageControl?.currentPageIndicatorTintColor = UIColor.redColor()
        
        //6.添加事件
        self.pageControl?.addTarget(self, action: "pageControlAction:", forControlEvents: .ValueChanged)
    }
    
    //值改变事件发生调用的方法
    func pageControlAction(pageControl:UIPageControl) {
        
        let offsetX = CGFloat(pageControl.currentPage) * Screen_W
        self.scrollView.setContentOffset(CGPointMake(offsetX, 0), animated: true)
    }
}

图片的循环

//屏幕宽度
let Screen_W = UIScreen.mainScreen().bounds.size.width

class ViewController: UIViewController {
    
    //MARK: - 属性
    let scrollView = UIScrollView()
    var pageControl: UIPageControl? = nil
    

    //MARK: - 方法
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //1.设置frame
        self.scrollView.frame = CGRectMake(0, 0, self.view.bounds.width, 250)
        
        //2.添加到界面上
        self.view.addSubview(self.scrollView)
        
        //3.添加图片
        //a.先添加最后一张图片
        let lastImageView = UIImageView.init(frame: CGRectMake(0, 0, Screen_W, 250))
        lastImageView.image = UIImage.init(named: "21_6.jpg")
       self.scrollView.addSubview(lastImageView)
        
        //b.创建中间的图片
        for item in 1...6 {
            
            let imageView = UIImageView.init(frame: CGRectMake(CGFloat(item)*Screen_W, 0, Screen_W, 250))
            imageView.image = UIImage.init(named: "21_\(item).jpg")
            self.scrollView.addSubview(imageView)
        }
        //c.在最后再放第一张图片
        let first = UIImageView.init(frame: CGRectMake(7*Screen_W, 0, Screen_W, 250))
        first.image = UIImage.init(named: "21_1.jpg")
        self.scrollView.addSubview(first)
        
        
        //4.设置内容大小
        self.scrollView.contentSize = CGSizeMake(CGFloat(scrollView.subviews.count)*Screen_W, 250)
        //5.设置分页
        self.scrollView.pagingEnabled = true
    
        
        //6.设置代理
        self.scrollView.delegate = self
        
        //8.设置默认偏移量(默认显示真正的第一张图片)
        self.scrollView.contentOffset = CGPointMake(Screen_W, 0)
        
    
        //7.添加pageControl
        self.creatPageControl()
        
    }


}

//MARK: - ScrollView Delegate
extension ViewController: UIScrollViewDelegate{

    //停止滚动
    func scrollViewDidEndDecelerating(scrollView: UIScrollView){
    
        //拿到当前是第几页
        let page = scrollView.contentOffset.x / scrollView.bounds.width
        
        //1.判断是否滑到最后,如果滑到最后就切换到真正的第一张图片的位置
        if page == 7 {
            
            scrollView.contentOffset = CGPointMake(Screen_W, 0)
            self.pageControl?.currentPage = 0
            
            return
        }
        if page == 0 {
            
            scrollView.contentOffset = CGPointMake(6*Screen_W, 0)
            self.pageControl?.currentPage = 5
            
            return
        }
        
        
        //更新pageControl
        self.pageControl?.currentPage = Int(page-1)
    }
    
    
}


//MARK: - PageControl
extension ViewController{

    func creatPageControl() {
        
        //1.创建UIPageControl对象
        self.pageControl = UIPageControl.init(frame: CGRectMake(0, 230, Screen_W, 20))
        //2.添加到界面上
        self.view.addSubview(self.pageControl!)
        //3.设置背景颜色
        //self.pageControl?.backgroundColor = UIColor.yellowColor()
        
        //4.核心属性
        //设置总的页数
        self.pageControl?.numberOfPages = 6
        //设置当前页(从0开始)
        self.pageControl?.currentPage = 0
        
        //5.设置圆点的颜色
        self.pageControl?.pageIndicatorTintColor = UIColor.yellowColor()
        self.pageControl?.currentPageIndicatorTintColor = UIColor.redColor()
        
        //6.添加事件
        self.pageControl?.addTarget(self, action: "pageControlAction:", forControlEvents: .ValueChanged)
    }
    
    //值改变事件发生调用的方法
    func pageControlAction(pageControl:UIPageControl) {
        
        let offsetX = CGFloat(pageControl.currentPage) * Screen_W
        self.scrollView.setContentOffset(CGPointMake(offsetX, 0), animated: true)
    }
}

相关文章

网友评论

      本文标题:UIScrollView(滚动视图)

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