iOS开发——UI基础-UIScrollView

一、UIScrollView使用的步骤

---

 

1.创建UIScrollView
2.将需要展示的内容添加到UIScrollView中
3.设置UIScrollView的滚动范围 (contentSize)

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@end
// 1.添加两个子控件到UIScrollView中
// 一个控件没有设置frame, 默认x/y就是0
UIButton *btn = [UIButton buttonWithType:UIButtonTypeContactAdd];
[self.scrollView addSubview:btn];

UISwitch *sw = [[UISwitch alloc] init];
CGRect tempFrame = sw.frame;
tempFrame.origin.y = 150;
sw.frame = tempFrame;
[self.scrollView addSubview:sw];

// 添加一个按钮
UIButton *customBtn = [[UIButton alloc] init];
customBtn.frame = CGRectMake(0, 0, 100, 100);
customBtn.backgroundColor = [UIColor redColor];
[customBtn setTitle:@"我是按钮" forState:UIControlStateNormal];
[customBtn setTitle:@"我是高亮" forState:UIControlStateHighlighted];
[customBtn setTitle:@"我是disabled状态" forState:UIControlStateDisabled];
//[customBtn addTarget:self action:@selector(customBtnClick) forControlEvents:UIControlEventTouchUpInside];
[self.scrollView addSubview:customBtn];

// 注意: 如果想让UIScrollView进行滚动, 必须设置可以滚动的范围
// 设置scrollView的滚动范围为, frame的宽高 + 100
self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width + 100, self.scrollView.frame.size.height + 100);

二、scrollView的基本属性

---

scrollView不能滚动的几种情况
　　1.没有设置contentSize
　　2.scrollEnabled属性 = NO
　　3.userInteractionEnabled属性 = NO

self.scrollView.scrollEnabled = NO;
self.scrollView.userInteractionEnabled = NO;

enabled和userInteractionEnabled的区别
enabled: 代表控件不可用
userInteractionEnabled: 代表控件不可以和用户交互, 也就是不能响应用户的操作


如何去掉滚动条

self.scrollView.showsHorizontalScrollIndicator = NO;
self.scrollView.showsVerticalScrollIndicator = NO;

滚动条也是scrollView的子控件的一部分
滚动条可能在子控件的前面, 也可能在子控件的后面
正是因为这个原始, 所以以后在开发中不推荐通过subviews获取子控件的方式来操作子控件

[self.scrollView.subviews lastObject];

设置滚动条的样式

self.scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;

默认情况下UIScrollView有一个回弹效果
只要设置了contentSize就有回弹效果

self.scrollView.bounces = YES;

设置默认是否有回弹效果 (默认就是没有设置contentSize的情况)
垂直方向可以回弹
下拉刷新
哪怕没有设置contentSize也可以有回弹效果

self.scrollView.alwaysBounceVertical = YES;
self.scrollView.alwaysBounceHorizontal = YES;

设置内容偏移位(contentOffset)

// 其实就是设置scrollView滚动到什么地方
// 告诉scrollView x方向要移动多少, y方向要移动多少
// 如果x是正数: 图片往左边移动
// 如果x是负数: 图片往右边移动
// 同理y是正数: 图片往上移动
// 同理y是负数: 图片往下移动
// 计算公式: 永远都是以 控件的左上角 – 内容的左上角

sc.contentOffset = CGPointMake(100, 0);

// 注意点:contentOffset移动的位置是一个临时的位置, 只要轻轻拖拽一下就会回到默认的位置

// 个人理解： 以图片左上角为原点，sc.contentOffset即UIScrollView相对于图片的偏移量

三、如何监听一个控件的变化/状态

---

1. 首先需要查看该控件的头文件, 看它继承于谁
　　1.1如果继承于UIControl, 那么就可以通过addTarget来监听
　　1.2如果继承于UIView, 那么必须通过代理来监听

2. 代理协议的规律:
　　以控件的类名开头, 后面加上delegate

3. 代理协议中的方法名的规律:
　　一般以控件名称去掉类前缀开头

4. 代理协议中的方法参数的规律:
　　谁触发事件, 就将谁传递进来

5. 如何监听UIScrollView的变化
　　1.成为UIScrollView的代理
　　2.遵守UIScrollView的协议
　　3.实现UIScrollView协议中的方法

6.代理作用:
　　当A对象想监听B对象的变化 , 那么可以让A成为B的代理
　　当B对象发生一些变化想通知A对象, 那么可以让A成为B的代理

@property (weak, nonatomic) IBOutlet UIScrollView *sc;
7.为什么代理要用weak
　　原因: 为了防止循环引用
　　控制器 -强引用-> 控制器的View -强引用-> subViews数组 -强引用-> UIScrollView -弱引用-> 控制器

如果只有一个控制器的情况, 程序一启动就创建的这个控制器是不会被释放的

strong
对象, 强指针, 强引用
weak
对象, 控件/代理
copy
对象, 字符串, 为了防止外界修改内部的属性的值
assign
基本数据类型 int/float/doble/bool ..

@interface ViewController ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *sc;

@end

    self.sc.delegate = self;


#pragma mark - UIScrollViewDelegate
// 只要成为了UIScrollView的代理, 遵守代理协议, 实现协议中的方法
// 当UIScrollView发生一些变化的时候, 系统就会自动调用这些代理方法

// scrollViewDidScroll方法什么时候调用?
// 只要UIScrollView滚动了, 系统就会自动调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSLog(@"%s", __func__);
}

// 只要用户准备开始拖拽了就会调用
- (void)scrollViewWillBeginDragging:(nonnull UIScrollView *)scrollView
{
    NSLog(@"%s", __func__);
}


// 用户已经结束拖拽, 代表用户已经松手了
// 系统调用了该方法并不代表着,UIScrollView已经停止滚动了

// 每次调用 停止拖拽方法时 ,系统都会传入一个当前是否有惯性的参数
// 我们可以判断该参数是否为YES, 如果是YES代表当前UIScrollView有惯性, 停止拖拽并不会停止滚动, 需要在停止减速方法中监听什么时候真正的停止
- (void)scrollViewDidEndDragging:(nonnull UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    NSLog(@"%s", __func__);
    if (decelerate == NO) {
//        NSLog(@"没有惯性, 可以在当前方法监听UIScrollView是否停止滚动");
        [self scrollViewDidEndDecelerating:scrollView];
    }else{
//        NSLog(@"有惯性, 需要在减速结束方法中监听UIScrollView是否停止滚动");
    }
}

// UIScrollView已经停止减速了
// 只有执行了这个方法才代表UIScrollView已经停止滚动了
- (void)scrollViewDidEndDecelerating:(nonnull UIScrollView *)scrollView
{
    NSLog(@"UIScrollView停止滚动了");
}

注意:
如果想在UIScrollView停止滚动之后做一些操作, 有两种情况
1.没有惯性的情况: 只会调用 停止拖拽的方法, 不会调用停止减速的方法
2.有惯性的情况: 既会调用 停止拖拽的方法, 也会调用停止减速的方法
所以: 以后要判断UIScrollView是否停止滚动, 需要同时重写两个方法
　　2.1scrollViewDidEndDragging
　　2.2scrollViewDidEndDecelerating

四、缩放图片

---

 

要想缩放图片分为两步
　　1.成为代理, 通过代理方法告诉UIScrollView要缩放哪一个子控件
　　2.设最大置子控件和最小的缩放比例

// 要想缩放, 除了告诉UISrollView要缩放哪一个控件以外, 还要告诉UISrollView最小能缩多小, 最大能放多大
self.sc.maximumZoomScale = 2.0;
self.sc.minimumZoomScale = 0.5;


// 因为所有的子控件都是我们添加进去的, 所以要缩放哪一个我们最清楚
// 所以只要让控制器成为UISrollView的代理, 当UISrollView不清楚要缩放哪一个控件的时候
// UISrollView就会调用它的代理方法, 问问代理到底要缩放哪一个
self.sc.delegate = self;
    
    
// 因为UISrollView中可能有多个子控件
// 那么UISrollView就搞不清楚到底要缩放哪一个子控件
// 想要缩放, 必须明确的告诉UISrollView要缩放哪一个控件
// 在此方法中告诉UISrollView要缩放哪一个控件
- (nullable UIView *)viewForZoomingInScrollView:(nonnull UIScrollView *)scrollView
{
    return self.iv;
}
    
// 缩放的过程中调用
// 和scrollViewDidScroll一样, 只要缩放一点点就会调用
- (void)scrollViewDidZoom:(nonnull UIScrollView *)scrollView
{
    NSLog(@"%s", __func__);
}

// 缩放结束时调用
- (void)scrollViewDidEndZooming:(nonnull UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale
{
    NSLog(@"%s", __func__);
}

五、设置分页

---

#import "ViewController.h"

#define IMAGE_COUNT 5
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIScrollView *sc;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.sc.showsHorizontalScrollIndicator = NO;
    self.sc.showsVerticalScrollIndicator = NO;
    
    CGFloat width = self.sc.frame.size.width;
    CGFloat height = self.sc.frame.size.height;
    
    // 1.初始化子控件, 添加图片
    for (int i = 0; i < IMAGE_COUNT; i++) {
        // 1.创建UIImageView
        UIImageView *iv = [[UIImageView alloc] init];
        // 2.创建图片
        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"img_%02i", i + 1]];
        // 3.设置每个UIImageView的frame
//        iv.frame = CGRectMake(i * width, 0, width, height); // 按照宽度分页
        iv.frame = CGRectMake(0, i * height, width, height); // 按照高度分页
        iv.image = image;
        // 4.添加到父控件
        [self.sc addSubview:iv];
    }
    
    // 2.设置滚动范围
//    self.sc.contentSize = CGSizeMake(IMAGE_COUNT * width, height);
    self.sc.contentSize = CGSizeMake(width, IMAGE_COUNT * height);
    self.sc.bounces = NO;
    self.sc.pagingEnabled = YES;
    // pagingEnabled实现分页的本质, 是按照UIScrollView的宽度或者高度来分页的
    // UIScrollView的宽度就是一页的宽度
}
@end

要实现动态修改页码, 有两种方式
1.实时计算

 // 只要滚动就会调用
- (void)scrollViewDidScroll:(nonnull UIScrollView *)scrollView
{
    // 1.计算页码
    // 当前页码 = 偏移位 / UIScrollView的宽度
    CGFloat page = scrollView.contentOffset.x / scrollView.frame.size.width;
    int currnetPage = page + 0.5;
    
    // 2.修改页码
    self.pageControl.currentPage = currnetPage;
}

2.翻页之后再计算
　　2.1停止拖拽
　　2.2停止减速

// 停止拖拽
- (void)scrollViewDidEndDragging:(nonnull UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    if (decelerate == NO) {
        [self scrollViewDidEndDecelerating:scrollView];
    }
}
// 停止减速
- (void)scrollViewDidEndDecelerating:(nonnull UIScrollView *)scrollView
{
    // 1.计算页码
    // 当前页码 = 偏移位 / UIScrollView的宽度
    int page = scrollView.contentOffset.x / scrollView.frame.size.width;
    NSLog(@"page = %i", page);
    
    // 2.修改页码
    self.pageControl.currentPage = page;
}

点击UIpageControl进行翻页

    // 监听PageControl的点击事件
    [self.pageControl addTarget:self action:@selector(pageControlClick:) forControlEvents:UIControlEventValueChanged];
    
- (IBAction)pageControlClick:(UIPageControl *)sender 
{
    NSLog(@"%lu", sender.currentPage);
    self.sc.contentOffset = CGPointMake(sender.currentPage * self.sc.frame.size.width , 0);
}

让UIScrollView每隔一段事件就切换一页

 // scheduledTimerWithTimeInterval: 创建一个定时器, 并且立即可是计时
    // TimeInterval: 间隔时间
    // target: 调用谁的方法
    // selector: 调用什么方法
    // userInfo: 需要传递什么参数
    // repeats: 是否重复
    // 每隔2.0秒调用一次self的nextPage方法, 并且不传递任何参数
    [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
    
// 切换到下一页
- (void)nextPage
{
    // 1.获取下一页的页码
    NSUInteger page = self.pageControl.currentPage + 1;
    NSLog(@"%lu", self.pageControl.currentPage);
    // 2.判断页码是否越界
    if (page >= IMAGE_COUNT) {
        // 如果越界就回到第0页
        self.pageControl.currentPage = 0;
    }else
    {
        // 如果没有越界, 就进入到下一页
        self.pageControl.currentPage = page;
    }
    
    [self pageControlClick:self.pageControl];
}
    
    // 如果给userInfo赋值, 那么定时器调用的方法就必须接受参数, 并且接受的参数就是NSTimer
    // 只要调用scheduled方法创建一个NSTimer对象, 系统就会自动将NSTimer添加到主线程中

如果是单线程，并且有多个任务，比如说添加一个Text View，在点击Text View时定时器会停止工作，那么需要做以下操作让主线程空出时间来执行定时器

- (void)startTimer
{
    // 打开定时器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage:) userInfo:@"lnj" repeats:YES];
    
    // 主线程在处理其它事件的时候, 分一点时间来处理NSTimer
    // 1.0 0.1
    [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)stopTimer
{
    // 关掉定时器
#warning 注意:NSTimer是一次性的, 只要invalidate之后就不能使用了
    // 只要调用invalidate方法, 系统就会将NSTimer从主线程移除, 并且销毁NSTimer对象
    [self.timer invalidate];

}

五、图片轮播器

---

 

   

 实现代码如下

#import "ViewController.h"
#import "XMGPageView.h"

@interface ViewController ()<UIScrollViewDelegate>

@property(nonatomic, strong)XMGPageView *pageView;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    /*
     1.利用UIScrollView实现商品展示
     2.用纯代码封装图片轮播器
     */
   
    // 1.创建图片轮播器
    XMGPageView *pageView = [XMGPageView pageView];
    // 2.设置图片轮播器的frame
    pageView.imageNames = @[@"img_01", @"img_02", @"img_03", @"img_04", @"img_05"];
    pageView.frame = CGRectMake(27, 97, 320, 128);
//    pageView.frame = CGRectMake(0, 97, 330, 200);
    [self.view addSubview:pageView];
    self.pageView = pageView;
    
}

@end

/***************华丽的分割线*******************/

#import <UIKit/UIKit.h>

@interface XMGPageView : UIView

+ (instancetype)pageView;

/** 所有需要展示的图片名称*/
@property (nonatomic, strong)NSArray *imageNames;
@end



#import "XMGPageView.h"

@interface XMGPageView ()<UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UIScrollView *sc;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

// 注意:NSTimer应该是weak
@property (weak, nonatomic) NSTimer *timer;
@end

@implementation XMGPageView


+ (instancetype)pageView
{
    return [[[NSBundle mainBundle] loadNibNamed:@"XMGPageView" owner:nil options:nil] lastObject];
}
/*
 自定义View的步骤:
 1.重写初始化方法 (在里面进行一次性的初始化)
    xib :awakeFromNib
    纯代码:initWithFrame
 2.重写layoutSubviews, 在里面布局子控件
 3.接收外界传入的数据, 重写set方法
*/

- (void)awakeFromNib
{
    
    self.sc.delegate = self;
    // 1.隐藏滚动条
    self.sc.showsHorizontalScrollIndicator = NO;
    self.sc.showsVerticalScrollIndicator = NO;
    
    // 2.设置UIScrollView的其它属性
    self.sc.bounces = NO;
    self.sc.pagingEnabled = YES;
    
    // 3.监听PageControl的点击事件
    [self.pageControl addTarget:self action:@selector(pageControlClick:) forControlEvents:UIControlEventValueChanged];
    
    // 4.通过KVC给UIPageControl的私有属性赋值, 设置自定义图片
    [self.pageControl setValue:[UIImage imageNamed:@"current"] forKeyPath:@"_currentPageImage"];
    [self.pageControl setValue:[UIImage imageNamed:@"other"] forKeyPath:@"_pageImage"];
    
    // 5.让UIScrollView每隔一段事件就切换一页
    [self startTimer];
}

#pragma mark - 内部监听
- (IBAction)pageControlClick:(UIPageControl *)sender
{
    
    self.sc.contentOffset = CGPointMake(sender.currentPage * self.sc.frame.size.width , 0);
}

#pragma mark - 定时器相关
- (void)startTimer
{
    // 打开定时器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage:) userInfo:@"lnj" repeats:YES];
    
    // 主线程在处理其它事件的时候, 分一点时间来处理NSTimer
    [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

// 切换到下一页
- (void)nextPage:(NSTimer *)timer
{
    // 1.获取下一页的页码
    NSUInteger page = self.pageControl.currentPage + 1;
    // 2.判断页码是否越界
    if (page >= _imageNames.count) {
        // 如果越界就回到第0页
        self.pageControl.currentPage = 0;
    }else
    {
        // 如果没有越界, 就进入到下一页
        self.pageControl.currentPage = page;
    }
    
    [self pageControlClick:self.pageControl];
}

- (void)stopTimer
{
    // 关掉定时器
    [self.timer invalidate];
}

#pragma mark - UIScrollViewDelegate
// 只要滚动就会调用
- (void)scrollViewDidScroll:(nonnull UIScrollView *)scrollView
{
    // 1.计算页码
    // 当前页码 = 偏移位 / UIScrollView的宽度
    CGFloat page = scrollView.contentOffset.x / scrollView.frame.size.width;
    int currnetPage = page + 0.5;
    
    // 2.修改页码
    self.pageControl.currentPage = currnetPage;
}

// 开始拖拽
- (void)scrollViewWillBeginDragging:(nonnull UIScrollView *)scrollView
{
    [self stopTimer];
}

// 结束拖拽
- (void)scrollViewDidEndDragging:(nonnull UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self startTimer];
    
}


- (void)setImageNames:(NSArray *)imageNames
{
    _imageNames = imageNames;
    
    // 0.每次重新设置图片, 都需要清空以前的图片
    for (UIView *subView in self.sc.subviews) {
        [subView removeFromSuperview];
    }

    // 1.初始化子控件, 添加图片
    for (int i = 0; i < _imageNames.count; i++) {
        
        // 1.创建UIImageView
        UIImageView *iv = [[UIImageView alloc] init];
        
        // 2.创建图片
        NSString *imageName = _imageNames[i];
        UIImage *image = [UIImage imageNamed:imageName];
        iv.image = image;

        // 3.添加到父控件
        [self.sc addSubview:iv];
    }
    
    // 2.设置pageControl的页码数量
    self.pageControl.numberOfPages = _imageNames.count;
    
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    CGFloat width = self.sc.frame.size.width;
    CGFloat height = self.sc.frame.size.height;
    NSUInteger imageCount = self.imageNames.count;
    // 1.设置每个UIImageView的frame
    for (int i = 0; i < imageCount; i++) {
        UIImageView *iv = self.sc.subviews[i];
        iv.frame = CGRectMake(i * width, 0, width, height);
    }

    // 2.设置滚动范围
    self.sc.contentSize = CGSizeMake(imageCount * width, height);
}

@end