资讯专栏INFORMATION COLUMN

UIScrollview制作图片轮播器

WrBug / 994人阅读

摘要:图片轮播器今晚公开课有讲到的知识希望通过这样的文字方式给我的学员们这样你们随时随地都能打开手机学习知识还记得开课的那句话姿势从未如此性感学习从未如此快乐我就叫的使用步骤创建给添加子控件设置的不能滚动的几种情况没有设置注意点不是他们两有本质的

UIScrollview 图片轮播器 NSTimer

今晚公开课有讲到的知识.希望通过这样的文字方式给我的学员们...这样你们随时随地都能打开手机学习知识.还记得开课的那句话!
姿势从未如此性感!学习从未如此快乐!我就叫Hank!!

UIScrollView的使用步骤

创建UIScrollView

给UIScrollView添加子控件

设置UIScrollview的contentSize

UIScrollView不能滚动的几种情况

没有设置contentSize

scrollEnabled = NO

userInteractionEnabled = NO

注意点 :userInteractionEnabled不是Disabled, 他们两有本质的区别
Disabled代表控件不能使用, 状态是Disabled状态
userInteractionEnabled代表控件是否可以交互
注意点:在企业开发中, 千万不要使用subviews来获取UIScrollview中的子控件
因为subviews中包含了UIScrollview中的滚动条, 而且滚动条的顺序是不确定的
UIScrollview常见属性

bounces: 用于设置UIScrollview是否有回弹效果

alwaysBounceVertical/alwaysBounceHorizontal

如果UIScrollview已经设置contentSize, 那么YES和NO没有区别(没有设置的话,图片根本不会动)
只有UIScrollview没有设置contentSize才有效果

应用场景: 下拉刷新
indicatorStyle: 设置滚动条的样式

showsHorizontalScrollIndicator/showsVerticalScrollIndicator

YES显示滚动条/ NO隐藏滚动条

// 是否有弹簧效果
self.scrollView.bounces = NO;
// 不管有没有contentSize,都能拥有弹簧效果(一般适用于下拉刷新功能,上拉刷新)
self.scrollView.alwaysBounceVertical = YES;  
self.scrollView.alwaysBounceHorizontal = YES;
// 是否要显示滚动条
self.scrollView.showsHorizontalScrollIndicator = NO;
self.scrollView.showsVerticalScrollIndicator = NO;

属性:contentOffset
就是一个相对于内容的左上角为原点,可视内容所需要移动的距离

作用: 用于设置内容的滚动偏移位
计算公式: 移动的距离 = "控件的左上角" - "内容的左上角"

内容控件 = 控件的左上角 - 移动的距离
最好先理解iOS的坐标系, 然后再理解公式

setContentOffset:<#(CGPoint)#> animated:<#(BOOL)#>//带动画

属性contentInset(多加了一些边框增加额外范围)

作用: 在contentSize周围添加额外的滚动区域

应用场景: 避免UIScrollview中的内容被遮挡

注意 如果scrollView不是通过storyboard、xib创建,那么一开始的subviews里面没有子控件

如何监听一个控件

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

代理

使用代理的步骤:

遵守代理协议

实现代理方法

将遵守了协议的对象设置为代理

代理的规律:

代理名称的规律:
协议名称以类名开头, 后面跟上Delegate

代理方法名称的规律
方法名称以类名去掉前缀开头, 并且谁触发这个方法就将谁传递出去

代理属性一般是id

代理属性一般是weak, 主要是为了避免循环引用 因为一般情况下, 控件的代理都是控制器, 而控件又是添加到控制器的view中的

代理的应用场景

1.当A对象想监听B对象的变化时, 就可以使用代理, 让A成为B的代理
2.当B对象想通知A对象的时候, 就可以使用代理, 让A成为B的代理

如何监听UIScrollview停止滚动
@property(nonatomic,assign) id      
delegate; // default nil. weak reference scrollView的代理属性,需要遵守 UIScrollViewDelegate 协议
@interface ViewController ()  
@end//遵守协议一般最好写在.m中的匿名类中
self.scorllView.delegate = self//ViewController


//scrollViewDidEndDragging
//只要用户松手就会调用停止拖拽并不代表停止滚动, 也就是说UIScrollView滚动是有惯性的
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate(减速){
 // 1.判断是否有惯性, 如果没有惯性手动调用scrollViewDidEndDecelerating告知已经完全停止滚动
   if (decelerate == NO) {
        [self scrollViewDidEndDecelerating:scrollView];
    }
 }

scrollViewDidEndDecelerating(停住不动)
只要UIScrollview有惯性就会调用, 如果没有惯性就不会调用

想要监听UIScrollview停止滚动必须同时实现这两个方法
只要UIScrollView即将开始拖拽时调用

//UIScrollView滚动时调用, (调用频率非常高, 只要滚一下就会调用一次)
 1. (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
 2. (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
 3. (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    NSLog(@"%s = %d", __func__, decelerate);  
    // 1.判断是否有惯性, 如果没有惯性手动调用scrollViewDidEndDecelerating告知已经完全停止滚动
    if (decelerate == NO) {
        [self scrollViewDidEndDecelerating:scrollView];
    }
}

 4. (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    NSLog(@"%s", __func__);
    NSLog(@"停止滚动”);

    self.iv.alpha = 1.0;
}
UIScrollview缩放 步骤:

成为UIScrollview的代理, 通过代理方法告诉UIScrollview要缩放哪一个子控件
设置子控件最大和最小的缩放比例

注意

只要子控件被缩小了, contentSize也会随之变化 如果没有缩放可能是没有设置缩放比例,或者没有设置代理 常用方法

viewForZoomingInScrollView : 返回需要缩放的子控件
scrollViewDidZoom: 只要子控件被缩放了就会调用(调用频率非常高)
scrollViewDidEndZooming: 缩放完毕时掉用
如何保证被缩放的子控件永远居中

只要子控件的contentSize小于UIScrollview的宽高时才需要缩放

第一种

// 1.判断contentSize的宽高, 是否小于UIScrollView的frame的size
if (scrollView.contentSize.width < scrollView.bounds.size.width) {

self.iv1.center = CGPointMake(scrollView.bounds.size.width * 0.5, scrollView.bounds.size.height * 0.5); }
    if (scrollView.contentSize.height < scrollView.bounds.size.height) {
        self.iv1.center = CGPointMake(scrollView.bounds.size.width * 0.5, scrollView.bounds.size.height * 0.5);
    }    
第二种
// 1.判断contentSize的宽高, 是否小于UIScrollView的frame的size
if (scrollView.contentSize.width < scrollView.bounds.size.width) {        
        // 计算X的值
        CGFloat x =  (scrollView.contentSize.width * 0.5) + ((scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5);        
        // 重新设置center
        self.iv1.center = CGPointMake(x, self.iv1.center.y);
}    
if (scrollView.contentSize.height < scrollView.bounds.size.height) {        
        // 计算Y的值
        CGFloat y =  (scrollView.contentSize.height * 0.5) + ((scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5);        
        // 重新设置center
        self.iv1.center = CGPointMake(self.iv1.center.x, y);
    }
第三种
CGFloat x = scrollView.contentSize.width < scrollView.bounds.size.width ? (scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5 : 0.0;

CGFloat y = scrollView.contentSize.height < scrollView.bounds.size.height ? (scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5 : 0.0;

self.iv1.center = CGPointMake(scrollView.contentSize.width * 0.5 + x, scrollView.contentSize.height * 0.5 + y);
图片轮播器

如何分页 : pagingEnabled = YES

分页的原理: 是根据UIScrollview的宽度或者高度来分页
UIPageControl

numberOfPages : 设置总页码 currentPage: 设置当前页码 pageIndicatorTintColor:
设置其它页码的颜色 currentPageIndicatorTintColor : 设置当前页码的颜色 自定义页码

利用KVC给UIPageControl设置页码图片
    [pageControl setValue:[UIImage imageNamed:@"current"] forKeyPath:@"_currentPageImage"];

    [pageControl setValue:[UIImage imageNamed:@"other"] forKeyPath:@"_pageImage"];

监听UIPageControl的点击
由于UIPageControl继承于UIControl, 所以通过addTargt来监听

[pageControl addTarget:self action:@selector(nextPage) forControlEvents:UIControlEventValueChanged];
切换页码

滚动完毕之后再切换

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{    
// 判断是否有惯性, 如果没有就手动调用scrollViewDidEndDecelerating
    if (NO == decelerate) {
    [self scrollViewDidEndDecelerating:scrollView];
    }
}
// 只有有惯性才会调用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 1.动态计算当前的页码
// 页码 = UIScrollView的偏移位 / UIScrollView的宽度
    int page = scrollView.contentOffset.x / scrollView.bounds.size.width;
    NSLog(@"page = %d", page);
    // 2.设置当前的页码
    self.pageControl.currentPage = page;
}
 实时切换
// 只要滚动就会调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
//    NSLog(@"%s", __func__);
// 1.动态计算当前的页码
// 页码 = UIScrollView的偏移位 / UIScrollView的宽度

    CGFloat page = scrollView.contentOffset.x / scrollView.bounds.size.width;   

    NSLog(@"page = %f", page + 0.5);
    // 2.设置当前的页码
    self.pageControl.currentPage = (int)(page + 0.5);
}
NSTimer

作用: 可以让系统每隔一段时间执行指定对象的指定方法
注意:

间隔时间是不准确的 只要通过scheduledTimerWithTimeInterval创建出来的Timer,就会被RUNLOOP强引用,
所以如果通过属性保存使用weak 只要调用了NSTimer的invalidate方法, 那么定时器就不能使用了, 想要使用必须重新创建
如何主线程正在处理其它操作, 那么NSTimer不会执行 默认NSTimer是NSDefaultRunLoopMode模式
要想在主线程处理其它操作的时候也处理NSTimer,
那么必须把NSTiemr在RunLoop中的模式改为NSRunLoopCommonModes

如何暂停和启动定时器
@property (nonatomic, weak) NSTimer *timer;
//暂停定时器
 [self.timer setFireDate:[NSDate distantFuture]];

// 设置timer的开始时间为 遥远的未来 4001
//    NSLog(@"%@", [NSDate distantFuture]);
开启定时器
// 设置定时器的开始时间为过去的某一个时间, 也就意味着立刻开始
//    [self.timer setFireDate:[NSDate distantPast]];
// 设置定时器从当前时间之后两秒才开始执行
[self.timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:2.0]];
// 返回一个自动开始执行任务的定时器
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage:) userInfo:@"123" repeats:YES];

// 修改NSTimer在NSRunLoop中的模式:NSRunLoopCommonModes
// 主线程不管在处理什么操作,都会抽时间处理NSTimer
[[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
关闭定时器
[self.timer invalidate];
封装

只要发现控制器知道得太多,就要考虑重构代码 只要发现一个效果很多地方都需要使用, 就要考虑封装

设置背景颜色,在storyBoard中不显示 ,运行就显示
监听scrollView各种行为的3大步骤(比如让控制器监听scrollView的行为)

设置scrollView的delegate(代理)为控制器对象
scrollView.delegate = 控制器;
控制器要遵守UIScrollViewDelegate协议

@interface 控制器 ()  
@end

控制器要实现UIScrollViewDelegate协议里面的代理方法

#pragma mark - 
代理方法
/** 只要scrollView在滚动,就会调用这个方法(监听scrollView的滚动)*/
 - (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewDidScroll");
}
代理使用的一般规律

作用:用来监听控件的某些行为 代理:是控制器对象 代理:是id类型,并且是弱指针

代理协议的格式:控件类名Delegate,比如UIScrollViewDelegate、UITextFieldDelegate

代理方法:方法名一般是控件名开头,比如UIScrollView的代理方法一般以scrollView开头

如何监听控件的行为

通过addTarget:

UITextField *tf = [[UITextField alloc] init];

[tf adction:@selector(textChange:) forControlEvents:UIControlEventEditingChanged] ;

- (void)textChange:(UITextField *)tf
{
    NSLog(@"textChange- %@", tf.text);
}

只有继承自UIControl的控件,才有这个功能

UIControlEventTouchUpInside //: 点击事件(UIButton)
UIControlEventValueChanged //: 值改变事件(UISwitch、UISegmentControl、UISlider)
UIControlEventEditingChanged //: 文字改变事件(UITextField)

通过delegate 只有拥有delegate属性的控件,才有这个功能

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/16244.html

相关文章

  • 兼容性较好的web html原生js播器

    摘要:第一步前端样式以及代码图片自行添加代码超出的图片垂直方向隐藏,水平方向也隐藏提供给子元素定位参照父元素进行绝对定位代码第二步给前一张,下一张添按钮添加事件下一页获取相册,便于移动相册框的图片前一张图片按钮下一页按 第一步:前端样式以及html代码(图片自行添加) css代码: #container{ width: 1200px; heig...

    avwu 评论0 收藏0
  • 兼容性较好的web html原生js播器

    摘要:第一步前端样式以及代码图片自行添加代码超出的图片垂直方向隐藏,水平方向也隐藏提供给子元素定位参照父元素进行绝对定位代码第二步给前一张,下一张添按钮添加事件下一页获取相册,便于移动相册框的图片前一张图片按钮下一页按 第一步:前端样式以及html代码(图片自行添加) css代码: #container{ width: 1200px; heig...

    BoYang 评论0 收藏0
  • iOS-UICollectionView快速构造/拖拽重排/轮播实现介绍

    摘要:目录的定义快速构建网格视图拖拽重排处理实现简单轮播的定义同一样,是中最常用到数据展示视图。拖拽重排的触发,一般都是通过长按手势触发。笔者简书地址快速构造拖拽重排轮播实 目录 UICollectionView的定义 UICollectionView快速构建GridView网格视图 UICollectionView拖拽重排处理(iOS8.x-/iOS9.x+) UICollect...

    moven_j 评论0 收藏0
  • 少量JQuery+CSS3代码实现播器 (初次写文章,思路,文笔都不足,轻喷)

    摘要:主要工作,还是对文章第一段提出的如果中间间隔有图片,那么在动画的执行过程中还是会看到,比较不给力问题,进行改进,以及实现自动轮播。肯定还有其它解决思路,献丑,求抱大神大腿,求大神指点。 1.前言,看过很多的轮播器代码;但是心中,老想着有没有简单的办法来实现同样的效果。搜到这个(下方链接),眼前一亮,便动手实践改进。主要工作,还是对文章第一段提出的如果中间间隔有图片,那么在css3动画的...

    gotham 评论0 收藏0
  • 少量JQuery+CSS3代码实现播器 (初次写文章,思路,文笔都不足,轻喷)

    摘要:主要工作,还是对文章第一段提出的如果中间间隔有图片,那么在动画的执行过程中还是会看到,比较不给力问题,进行改进,以及实现自动轮播。肯定还有其它解决思路,献丑,求抱大神大腿,求大神指点。 1.前言,看过很多的轮播器代码;但是心中,老想着有没有简单的办法来实现同样的效果。搜到这个(下方链接),眼前一亮,便动手实践改进。主要工作,还是对文章第一段提出的如果中间间隔有图片,那么在css3动画的...

    FleyX 评论0 收藏0

发表评论

0条评论

WrBug

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<