UIScrollView滚动视图的初学案例

超、凢脫俗 2022-10-01 08:47 157阅读 0赞

\#\#\#\#首先在这里祝诸位同仁在己亥猪年身体健康，吃嘛嘛香，代码贼溜，bug贼少！！！

呃，图片截大了…… \#\#\#\#\#UIScrollView的作用 UIScrollView可以用于显示多余一个屏幕的内容，超出屏幕范围的内容可以通过滑动进行查看。 \#\#\#\#\#常见属性 CGSize contentSize ：设置UIScrollView的滚动范围 CGPoint contentOffset ：UIScrollView当前滚动的位置 UIEdgeInsets contentInset ：这个属性可以在四周增加滚动范围 BOOL bounces 是否有弹簧效果 BOOL scrollEnabled 是否能滚动 BOOL showsHorizontalScrollIndicator 是否显示水平方向的滚动条 BOOL showsVerticalScrollIndicator 是否显示垂直方向的滚动条 UIScrollViewIndicatorStyle indicatorStyle 设定滚动条的样式 BOOL dragging 是否正在被拖拽 BOOL tracking 当touch后还没有拖动的时候值是YES，否则NO BOOL decelerating 是否正在减速 BOOL zooming 是否正在缩放 \#\#\#\#\#在视图无法滚动时，可以尝试重写viewDidLayoutSubviews,在此方法中设置滚动范围

- (void)viewDidLayoutSubviews{
        _scrollView.contentSize=CGSizeMake(0 , SCREEN_HEIGHT);
    }
    复制代码

\#\#\#\#\#手势缩放 1.设置UIScrollView的id delegate代理对象 2.设置minimumZoomScale ：缩小的最小比例 3.设置maximumZoomScale ：放大的最大比例 4.让代理对象实现下面的方法，返回需要缩放的视图控件

*  (UIView \*)viewForZoomingInScrollView:(UIScrollView \*)scrollView \#\#\#\#\#与缩放相关的常用方法 正在缩放的时候调用 ： -(void)scrollViewDidZoom:(UIScrollView \*)scrollView 缩放完毕的时候调用 ： -(void)scrollViewDidEndZooming:(UIScrollView \*)scrollView withView:(UIView \*)view atScale:(float)scale \#\#\#\#\#分页效果 设置pagingEnabled=YES即可，UIScrollView会被分割成多个独立页面，用户的滚动体验则变成了页面翻转，一般会配合UIPageControl增强分页效果。\#\#\#\#\#UIPageControl常用属性： NSInteger numberOfPages : 总页数 NSInteger currentPage : 当前的页码 BOOL hidesForSinglePage : 当只有一页的时候，是否要隐藏视图 添加监听的方法：\[pageControl addTarget:self action:@selector(pageChange:) forControlEvents:UIControlEventValueChanged\];

\#\#\#\#\#然后开始学习了，Xcode创建工程，素材是这样的……

\#\#\#\#\#然后直奔ViewController.m文件，因为其他的文件基本没写东西，有图为证……但是这个window属性一定要声明啊，否则模拟器运行起来还以为图片是包大人呢，而Xcoed会亲切的提示你The app delegate must implement the window property if it wants to use a main storyboard file。即：如果要使用主情节提要文件，应用程序委托必须实现Window属性。\#\#\#\#接下来就是ViewController.m中的内容了：

//引入ViewController头文件
    #import "ViewController.h"
    //声明为UIScrollView的代理类
    @interface ViewController ()<UIScrollViewDelegate>
    //分页视图控件
    @property(nonatomic,strong) UIPageControl *pageControl;
    //定时器
    @property(nonatomic,strong) NSTimer *timer;
    @end
    
    @implementation ViewController
    //视图生命周期的方法，加载视图时调用
    - (void)viewDidLoad {
        [super viewDidLoad];
        //初始化UIScrollWiew大小为屏幕大小
        UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];
        //设置滚动的范围
        scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.view.frame) * 8, CGRectGetHeight(self.view.frame));
        //设置分页效果
        scrollView.pagingEnabled = YES;
        //水平滚动条隐藏
        scrollView.showsHorizontalScrollIndicator = NO;
        //声明图片名称
        NSString *imageName = nil;
        //声明图片
        UIImage *image = nil;
        
        for (int i = 0; i < 8; i++) {
            //为图片名称赋值
            imageName = [NSString stringWithFormat:@"0%d",i + 1];
            //初始化图片
            image= [UIImage imageNamed:imageName];
            //初始化图片视图，x轴的坐标在原点随着每次循环增加一个屏幕的宽度，y轴始终为0，宽高为屏幕的宽高
            UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(CGRectGetWidth(self.view.frame) * i, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame))];
            //为图片视图设置图片
            [imageView setImage:image];
            //为每个图片视图设置标签
            imageView.tag = 100 + i;
            //将图片视图添加到滚动视图
            [scrollView addSubview:imageView];
        }
        //viewWithTag的作用就是根据tag属性获取到对应的view、imageview、label等等。
        //获取第一张图片视图
        UIImageView *firstImageView = [scrollView viewWithTag:100];
        //为滚动视图最后面加一个视图，它和第一个视图一样，到这里实际已经有了9张图片视图
        UIImageView *lastImageView = [[UIImageView alloc]initWithFrame:CGRectMake(CGRectGetWidth(self.view.frame) * 8, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame))];
        //将第一张图片视图的图片赋值给最后一张图片视图的图片属性
        lastImageView.image = firstImageView.image;
        //将最后一张图片视图添加到滚动视图上
        [scrollView addSubview:lastImageView];
        //将滚动视图添加到控制器视图
        [self.view addSubview:scrollView];
        //为滚动视图添加标签
        scrollView.tag = 100;
        //初始化分页视图控件，并设置好位置
        self.pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, CGRectGetHeight(self.view.frame) - 50, CGRectGetWidth(self.view.frame), 50)];
        //设置分为多少页
        self.pageControl.numberOfPages = 8;
        //设置当前所在页
        self.pageControl.currentPage = 0;
        //设置页面指示器的颜色（即分页的圆点标记）
        self.pageControl.pageIndicatorTintColor = [UIColor redColor];
        //设置当前所在页面指示器的颜色
        self.pageControl.currentPageIndicatorTintColor = [UIColor greenColor];
        //将分页视图控件添加到控制器视图
        [self.view addSubview: self.pageControl];
        //初始化定时器，scheduledTimerWithTimeInterval设定间隔时间1.0秒，target指定发送消息给哪个对象，selector指定要调用的方法名，userInfo可以给消息发送参数，repeats设定是否重复
        self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(circularDisplayView) userInfo:nil repeats:YES];
        //将本类赋值给scrollView的代理属性
        scrollView.delegate = self;
    }
    #pragma mark - 滚动视图的代理方法
    //视图被拖拽时调用，在此方法中会暂停控制器，停止图片循环展示
    -(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
        //setFireDate:设置定时器的启动时间
        //[NSDate distantFuture]：遥远的未来
        [self.timer setFireDate:[NSDate distantFuture]];
    }
    //视图静止时（没有被拖拽）时调用,在此方法中会开启定时器，让图片循环展示
    -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
        //延迟2秒在开启定时器
        //[NSDate dateWithTimeInterval:2 sinceDate:[NSDate date]] 返回值为现在时刻开始在过1.5秒的时刻
        [self.timer setFireDate:[NSDate dateWithTimeInterval:2 sinceDate:[NSDate date]]];
    }
    //定时器的回调方法，切换页面
    -(void)circularDisplayView{
        //得到scrollView
        UIScrollView *scrollView = [self.view viewWithTag:100];
        //通过改变contentOffset来切换滚动视图的子界面
        CGFloat offset_x = scrollView.contentOffset.x;
        //每次切换一个屏幕
        offset_x +=CGRectGetWidth(self.view.frame);
        //当额外添加的最后一张图片视图开始滚动时，将偏移量改为第一个图片视图的位置
        if(offset_x > CGRectGetWidth(self.view.frame) * 8){
            scrollView.contentOffset = CGPointMake(0, 0);
        }
        //当显示的是额外添加的最后一张图片视图时，将分页控件的当前分页指示器重新开始设置，否则正常显示
        if(offset_x == CGRectGetWidth(self.view.frame) * 8){
            self.pageControl.currentPage = 0;
        }else{
            self.pageControl.currentPage = offset_x / CGRectGetWidth(self.view.frame);
        }
        //设置最终偏移量
        CGPoint finalPoint = CGPointMake(offset_x, 0);
        // 切换视图时带动画效果
        //当额外添加的最后一张图片视图开始滚动时，即相当于第一张图片开始滚动，直接将偏移量设置到第二张图片的位置
        if (offset_x > CGRectGetWidth(self.view.frame) * 8) {
            self.pageControl.currentPage = 1;
            [scrollView setContentOffset:CGPointMake(CGRectGetWidth(self.view.frame), 0) animated:YES];
        }else{
            [scrollView setContentOffset:finalPoint animated:YES];
        }
    }
    
    
    @end
    复制代码

\#\#\#\#\#运行效果：

转载于:https://juejin.im/post/5cb467895188251b070f8379