优秀工程师-UIScrollView UIPageControl

最新推荐文章于 2020-07-28 08:40:51 发布

Keep_Moving31038

最新推荐文章于 2020-07-28 08:40:51 发布

阅读量267

点赞数

分类专栏： ios开发

本文链接：https://blog.csdn.net/Keep_Moving31038/article/details/78257378

版权

ios开发专栏收录该内容

148 篇文章 0 订阅

订阅专栏

1、UIScrollView的作用

（1）当需要展示的内容很多的时候，超过屏幕尺寸，用户需要滑动屏幕来查看内容；

（2）普通的UIView不具备滚动功能；

2、属性介绍

（1）常用属性：

1）@property(nonatomic)CGPoint   contentOffset; 这个属性⽤用来表⽰示UIScrollView滚动的位置
2）@property(nonatomic)CGSize   contentSize;这个属性⽤用来表⽰示UIScrollView内容的尺⼨寸,滚动范围(能滚多远)
3）@property(nonatomic)UIEdgeInsets   contentInset; 这个属性能够在UIScrollView的4周增加额外的滚动区域 
（2）其他属性：
1）@property(nonatomic) BOOL bounces;  设置UIScrollView是否需要弹簧效果 
2）@property(nonatomic,getter=isScrollEnabled)BOOL  scrollEnabled; 设置UIScrollView是否能滚动 
3）@property(nonatomic) BOOL   showsHorizontalScrollIndicator; 是否显⽰示⽔水平滚动条 
4）@property(nonatomic) BOOL   showsVerticalScrollIndicator; 是否显⽰示垂直滚动条 

3、使用注意事项

如果UIScrollView⽆无法滚动,可能是以下原因:

（1）没有设置contentSize

（2） scrollEnabled = NO

（3）没有接收到触摸事件:userInteractionEnabled = NO

（4）没有取消autolayout功能(要想scrollView滚动,必须取消autolayout)

4、使用范例

 1 #import "MJViewController.h"
 2 
 3 @interface MJViewController ()
 4 {
 5     //在私有扩展中创建一个属性
 6     UIScrollView *_scrollView;
 7 }
 8 @end
 9 
10 @implementation MJViewController
11 
12 - (void)viewDidLoad
13 {
14     [super viewDidLoad];
15     
16     // 1.创建UIScrollView
17     UIScrollView *scrollView = [[UIScrollView alloc] init];
18     scrollView.frame = CGRectMake(0, 0, 250, 250); // frame中的size指UIScrollView的可视范围
19     scrollView.backgroundColor = [UIColor grayColor];
20     [self.view addSubview:scrollView];
21     
22     // 2.创建UIImageView（图片）
23     UIImageView *imageView = [[UIImageView alloc] init];
24     imageView.image = [UIImage imageNamed:@"big.jpg"];
25     CGFloat imgW = imageView.image.size.width; // 图片的宽度
26     CGFloat imgH = imageView.image.size.height; // 图片的高度
27     imageView.frame = CGRectMake(0, 0, imgW, imgH);
28     [scrollView addSubview:imageView];
29     
30     // 3.设置scrollView的属性
31     
32     // 设置UIScrollView的滚动范围（内容大小）
33     scrollView.contentSize = imageView.image.size;
34     
35     // 隐藏水平滚动条
36     scrollView.showsHorizontalScrollIndicator = NO;
37     scrollView.showsVerticalScrollIndicator = NO;
38     
39     // 用来记录scrollview滚动的位置
40 //    scrollView.contentOffset = ;
41     
42     // 去掉弹簧效果
43 //    scrollView.bounces = NO;
44     
45     // 增加额外的滚动区域（逆时针，上、左、下、右）
46     // top  left  bottom  right
47     scrollView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20);
48     
49     _scrollView = scrollView;
50 }
51 
52 - (IBAction)down:(UIButton *)sender {
53     [UIView animateWithDuration:1.0 animations:^{
54         //三个步骤
55         CGPoint offset = _scrollView.contentOffset;
56         offset.y += 150;
57         _scrollView.contentOffset = offset;
58         
59         //_scrollView.contentOffset = CGPointMake(0, 0);
60     }];
61 }
62 @end

4、重要说明

（1）UIScrollView的frame与contentsize属性的区分：UIScrollView的frame指的是这个scrollview的可视范围（可看见的区域），contentsize是其滚动范围。

（2）contentinset（不带*号的一般不是结构体就是枚举），为UIScrollView增加额外的滚动区域。（上，左，下，右）逆时针。contentinset可以使用代码或者是视图控制器进行设置，但两者有区别（注意区分）。

（3）contentsize属性只能使用代码设置。

（4）contentoffset是个CGpoint类型的结构体，用来记录ScrollView的滚动位置。知道了这个属性，就知道了其位置，可以通过设置这个属性来控制这个“框”的移动。

（5）不允许直接修改某个对象内部结构体属性的成员，三个步骤（先拿到值，修改之，再把修改后的值赋回去）。

5、常用delegate

手势	方法
开始拖拽	scrollViewWillBeginDragging:
具体到某个位置	scrollViewDidScroll:
用户停止拖拽	scrollViewDidEndDragging:willDecelerate:

6、分页

只要将UIScrollView的pageEnable属性设置为YES,UIScrollView会被分割成多个独立页面,里面的内容就能进行分页展示
一般会配合UIPageControl增强分页效果,UIPageControl常用属性如下:

一共有多少页
    @property (nonatomic) NSInteger numberOfPages;


当前显示的页码
    @property (nonatomic) NSInteger currentPage;


只有一页的时候,是否需要隐藏页码指示器
    @property (nonatomic)BOOL hidesForSinglePage;


其他页码的颜色
    @property (nonatomic,retain) UIColor *pageIndicatorTintColor;


当前页码指示器的颜色
    @property (nonatomic,retain) UIColor *currentPageIndicatorTintColor;

UIPageControl

简介

1.UIPageControl与UILabel相似通常与UIScrollView配合使用
2.currentPage //当前页
3.numberOfPages //指定页面的个数

注意：

UIPageControl父类为UIControl ，所以可以添加事件，只不过事件触发使用的不是UIControlEventsTouchUpInside而是UIControlEventsValueChanged。

两者的结合使用

通常在Scrollview滚动的时候修改pageControl的currentPage
当滑动画面时，我们需要改变下部小圆点的激活位置，所以我们用如下的方法实现

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//首先通过tag值得到pageControl
    UIPageControl *pageControl = (UIPageControl *)[self.view viewWithTag:1011];
//page的计算方法为scrollView的偏移量除以屏幕的宽度即为第几页。
    int page = scrollView.contentOffset.x/CGRectGetWidth(self.view.frame);
    pageControl.currentPage = page;
}

同时，我们需要实现，改变下方小圆点来实现页面的切换

- (void)pageAction: (UIPageControl *)sender{
    //根据当前的页数。是的scrollView也滑动到对应的子视图。通过设置scrollView的contentOffSet来实现（改变contentOffSet实际上就是改变scrollView的bounds）
    //得到当前的页数
    int page = (int)sender.currentPage;
    //根据当前页数来计算偏移量
    //step1:得到scrollView
    UIScrollView *scrollView = (UIScrollView *)[self.view viewWithTag:1000];
    //step2:设置scrollView的偏移量---当前的页数乘以屏幕宽度
    [scrollView setContentOffset:CGPointMake(page*CGRectGetWidth(self.view.frame), 0) animated:YES];
}

滚动视图与缩放有关的代理方法

//指定scrollView的某一个子视图为可缩放视图，前提是此视图已经添加到scrollView上面
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    UIImageView *imageView = (UIImageView *)[scrollView viewWithTag:1200];
    return imageView;
}

//开始缩放的代理方法----第二个参数View是指我们将要缩放的视图。
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view{
    NSLog(@"%@",view);
}

//正在缩放的代理方法，只要正在缩放，就会执行该方法，所以会多次调用。
- (void)scrollViewDidZoom:(UIScrollView *)scrollView{
    //在缩放过程中，为了使得该子视图一直在屏幕中间，所以我们需要在他缩放过程中一直调整他的center
     UIImageView *imageView = (UIImageView *)[scrollView viewWithTag:1200];
    NSLog(@"frame---%@",NSStringFromCGRect(imageView.frame));
    imageView.center = scrollView.center;
    NSLog(@"contentSize***%@",NSStringFromCGSize(scrollView.contentSize));
}

//缩放结束的代理方法
/**
 *
 *  @param scrollView 当前的滚动视图
 *  @param view       当前正在缩放的视图
 *  @param scale      当前正在缩放视图的缩放比例
 */

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale{
    //缩放完成之后恢复原大小，这里使用的是2D仿射变换函数中与捏合有关的函数
//    view.transform = CGAffineTransformMakeScale(1, 1);
}

实例训练（部分代码）

制作一个iPhone相册，可以实现缩放，翻页等基本功能
此处以三张图片为例
先创建一个大的滚动视图，宽为三个屏幕的宽度

 UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
    scrollView.contentSize = CGSizeMake(CGRectGetWidth(self.view.frame)*3, CGRectGetHeight(self.view.frame)) ;
    scrollView.backgroundColor = [UIColor grayColor];
    scrollView.tag = 1000;
    scrollView.pagingEnabled = YES;
    scrollView.delegate = self;
    NSLog(@"%f",CGRectGetWidth(self.view.frame));

再创建三个scrollView以及三个imageView，效率至上，用for循环

    for (int i = 0; i <3; i++) {
        UIScrollView *scrollView1 = [[UIScrollView alloc]initWithFrame:CGRectMake(i*(CGRectGetWidth(self.view.frame)), 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame))];
        scrollView1.minimumZoomScale = 0.5;
        scrollView1.maximumZoomScale = 1.5;
        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame))];
        imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"%d.jpeg",i]]];
        imageView.tag = 1300+i;
        imageView.center = self.view.center;
        scrollView1.tag = 1100+i;
        scrollView1.delegate = self;
        [scrollView1 addSubview:imageView];
        [scrollView addSubview:scrollView1];

为了实现缩放功能，首先需要导入想要缩放的视图

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
    UIImageView *imageView;
    for (int i = 0; i <3; i++) {
        if ([scrollView viewWithTag:1300+i]) {
            UIScrollView *scroll = (UIScrollView *)[scrollView viewWithTag:1100+i];
            imageView = (UIImageView *)[scroll viewWithTag:1300+i];
        }
    }
    return imageView;
}

每次缩放，让图片回到屏幕的中心

-(void)scrollViewDidZoom:(UIScrollView *)scrollView{
    UIImageView *imageView;
    for (int i = 0; i <3; i++) {
        if ([scrollView viewWithTag:1300+i]) {
            UIScrollView *scroll = (UIScrollView *)[scrollView viewWithTag:1100+i];
            imageView = (UIImageView *)[scroll viewWithTag:1300+i];
            imageView.center = self.view.center;
        }
    }
}

缩放过后，我们回看照片需要它恢复到初始的大小

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    UIPageControl *pageControl = (UIPageControl *)[self.view viewWithTag:1200];
    int page = scrollView.contentOffset.x/CGRectGetWidth(self.view.frame);
    pageControl.currentPage = page;
    UIImageView *imageView;

    for (int i = 0; i <3; i++) {
        if ([scrollView viewWithTag:1300+i]) {
            UIScrollView *scroll = (UIScrollView *)[scrollView viewWithTag:1100+i];
            imageView = (UIImageView *)[scroll viewWithTag:1300+i];
            //这里需要使用2D仿射变换函数里面的缩放函数来使图像恢复原来大小
            imageView.transform = CGAffineTransformMakeScale(1, 1);
        }
    }
}

Keep_Moving31038

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
优秀工程师-UIScrollView UIPageControl

1、UIScrollView的作用（1）当需要展示的内容很多的时候，超过屏幕尺寸，用户需要滑动屏幕来查看内容；（2）普通的UIView不具备滚动功能；2、属性介绍（1）常用属性：1）@property(nonatomic)CGPoint contentOffset; 这个属性⽤用来表⽰示UIScrollView滚动的位置2）@property(
复制链接

扫一扫