iOS开发之UI篇（9）—— UIScrollView、UIPageControl

最新推荐文章于 2018-01-30 18:53:20 发布
最新推荐文章于 2018-01-30 18:53:20 发布
阅读量348 收藏 1
点赞数
分类专栏： iOS开发之UI篇 文章标签： ios开发 uiscrollview UIPageCont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012078168/article/details/78846015
版权

版本
Xcode 9.1

一、纯代码创建

1. 简单使用

首先，定义一个UIScrollView类型的属性：

@property (nonatomic, strong) UIScrollView *scrollView;

然后在懒加载（getter方法）里设置scrollView相关属性：

#define     SCROLL_WIDTH      [UIScreen mainScreen].bounds.size.width
#define     SCROLL_HEIGHT     [UIScreen mainScreen].bounds.size.height/3

#pragma mark - 懒加载

- (UIScrollView *)scrollView {

    if (_scrollView == nil) {
        // 实例化
        _scrollView = [[UIScrollView alloc] init];
        // 设置尺寸大小
        _scrollView.frame = CGRectMake(0, 20, SCROLL_WIDTH, SCROLL_HEIGHT);
        // 设置滚动区域
        _scrollView.contentSize = CGSizeMake(SCROLL_WIDTH*3, SCROLL_HEIGHT);
        // 隐藏水平滑条
        _scrollView.showsHorizontalScrollIndicator = NO;
        // 设置分页(每次滑动一页)
        _scrollView.pagingEnabled = YES;
        // 弹簧效果(边界拉出来一小段会弹回去)
        _scrollView.bounces = NO;    //关闭
    }

    return _scrollView;
}

然后就可以在viewDidLoad或者其他地方调用scrollView了：

- (void)viewDidLoad {
    [super viewDidLoad];

    // 实例化3个UIImageView,并添加到scrollView
    for(int i=0; i<3; i++) {
        UIImageView *imageView = [[UIImageView alloc] init];
        imageView.frame = CGRectMake(SCROLL_WIDTH*i, 0, SCROLL_WIDTH, SCROLL_HEIGHT);
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]];
        // 将imageView添加到scrollView
        [self.scrollView addSubview:imageView];
    }

    // 添加scrollView到self.view
    [self.view addSubview:self.scrollView];
}

效果图：


2. 实现图片循环切换

先来讲讲思路：
如下图，我们要实现三张图片的循环切换。
首先，我们设置五个视图，第一个视图显示最后一张图片，最后一个视图显示第一张图片。
然后，设置scrollView的初始偏移量为第二个视图。
最后，设置代理，在滑动结束的代理方法中，（悄悄地）将试图1切换到视图4，亦或将视图5切换到视图2。


scrollView内容

完整代码如下：

#define     SCROLL_WIDTH      [UIScreen mainScreen].bounds.size.width
#define     SCROLL_HEIGHT     [UIScreen mainScreen].bounds.size.height/3

#import "ViewController.h"

@interface ViewController () <UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *scrollView;

@end


@implementation ViewController

#pragma mark - 生命周期

- (void)viewDidLoad {
    [super viewDidLoad];

    // 实例化5个UIImageView,并添加到scrollView
    for(int i=0; i<5; i++) {
        UIImageView *imageView = [[UIImageView alloc] init];
        imageView.frame = CGRectMake(SCROLL_WIDTH*i, 0, SCROLL_WIDTH, SCROLL_HEIGHT);
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]];
        if (i == 0) {
            // 第一个视图显示最后一张图片
            imageView.image = [UIImage imageNamed:@"2.jpg"];
        }else if(i == 4){
            // 第五个视图显示第一张图片
            imageView.image = [UIImage imageNamed:@"0.jpg"];
        }else {
            imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i-1]];
        }
        // 添加imageView到scrollView
        [self.scrollView addSubview:imageView];
    }

    // 添加scrollView到self.view
    [self.view addSubview:self.scrollView];
}


#pragma mark - UIScrollViewDelegate

// 已经停止减速
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

    // 改变偏移量
    if (scrollView.contentOffset.x >= SCROLL_WIDTH*4) {
        // 移动到第一个视图
        scrollView.contentOffset = CGPointMake(SCROLL_WIDTH*1, 0);
    }else if(scrollView.contentOffset.x <= 0){
        // 移到第三个视图
        scrollView.contentOffset = CGPointMake(SCROLL_WIDTH*3, 0);
    }
}


#pragma mark - 懒加载

- (UIScrollView *)scrollView {

    if (_scrollView == nil) {
        // 实例化
        _scrollView = [[UIScrollView alloc] init];
        // 设置尺寸大小
        _scrollView.frame = CGRectMake(0, 20, SCROLL_WIDTH, SCROLL_HEIGHT);
        // 设置滚动区域
        _scrollView.contentSize = CGSizeMake(SCROLL_WIDTH*5, SCROLL_HEIGHT);
        // 隐藏水平滑条
        _scrollView.showsHorizontalScrollIndicator = NO;
        // 设置分页(每次滑动一页)
        _scrollView.pagingEnabled = YES;
        // 弹簧效果(边界拉出来一小段会弹回去)
        _scrollView.bounces = NO;    //关闭
        _scrollView.contentOffset = CGPointMake(SCROLL_WIDTH*1, 0);
        // 设置代理方法
        _scrollView.delegate = self;
    }

    return _scrollView;
}

效果：


3. UIScrollView搭配UIPageControl

实现的效果如下：定时每3秒钟自动向后翻一页。当开始有手指拖拽时，定时暂停；直到松开手指视图滑动结束后，才重新3秒定时。


效果图

只需在如上的代码添加一个UIPageControl用于小点点显示当前页数，和添加一个定时器NSTimer用于定时切换。
完整代码：

#define     SCROLL_WIDTH      [UIScreen mainScreen].bounds.size.width
#define     SCROLL_HEIGHT     [UIScreen mainScreen].bounds.size.height/3

#import "ViewController.h"

@interface ViewController () <UIScrollViewDelegate> {

    NSTimer     *_timer;
}

@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UIPageControl *pageControl;

@end


@implementation ViewController

#pragma mark - 生命周期

- (void)viewDidLoad {
    [super viewDidLoad];

    // 实例化5个UIImageView,并添加到scrollView
    for(int i=0; i<5; i++) {
        UIImageView *imageView = [[UIImageView alloc] init];
        imageView.frame = CGRectMake(SCROLL_WIDTH*i, 0, SCROLL_WIDTH, SCROLL_HEIGHT);
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i]];
        if (i == 0) {
            // 第一个视图显示最后一张图片
            imageView.image = [UIImage imageNamed:@"2.jpg"];
        }else if(i == 4){
            // 第五个视图显示第一张图片
            imageView.image = [UIImage imageNamed:@"0.jpg"];
        }else {
            imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i-1]];
        }
        // 添加imageView到scrollView
        [self.scrollView addSubview:imageView];
    }

    // 添加scrollView到self.view
    [self.view addSubview:self.scrollView];

    // 添加pageControl到self.view
    [self.view addSubview:self.pageControl];

    // 启动定时器
    _timer = [NSTimer scheduledTimerWithTimeInterval:3.0 target:self selector:@selector(changeImage:) userInfo:nil repeats:YES];
}


#pragma mark - UIScrollViewDelegate

// 准备开始滑动 (仅手动拖拽时调用；代码设置setContentOffset:/scrollRectToVisible:不会调用)
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {

    [_timer setFireDate:[NSDate distantFuture]];    // 很久之后才触发，相当于暂停
}


// 已经停止减速（仅手动拖拽时调用）
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

    _timer.fireDate = [NSDate dateWithTimeInterval:3.0 sinceDate:[NSDate date]];
    [self updateContentOffsetAndCurrentPage];
}


#pragma mark - 私有方法

// 定时3秒时间到，开始切换图片
- (void)changeImage:(NSTimer *)timer {

    CGPoint tempPoint = self.scrollView.contentOffset;
    tempPoint.x += SCROLL_WIDTH;
    if (tempPoint.x/SCROLL_WIDTH >= 5) {
        tempPoint.x = 0;
    }
    self.scrollView.contentOffset = tempPoint;
    [self updateContentOffsetAndCurrentPage];
}


// 更新当前图片和页数
- (void)updateContentOffsetAndCurrentPage {

    // 更新偏移量
    if (self.scrollView.contentOffset.x >= SCROLL_WIDTH*4) {
        // 移动到第一个视图
        self.scrollView.contentOffset = CGPointMake(SCROLL_WIDTH*1, 0);
    }else if(self.scrollView.contentOffset.x <= 0){
        // 移到第三个视图
        self.scrollView.contentOffset = CGPointMake(SCROLL_WIDTH*3, 0);
    }

    // 更新当前页数
    NSInteger currentPage = (self.scrollView.contentOffset.x-SCROLL_WIDTH)/SCROLL_WIDTH;
    if (currentPage < 0) {
        currentPage = 0;
    }else if (currentPage > 2) {
        currentPage = 2;
    }
    self.pageControl.currentPage = currentPage;
}


#pragma mark - 懒加载

- (UIScrollView *)scrollView {

    if (_scrollView == nil) {
        // 实例化
        _scrollView = [[UIScrollView alloc] init];
        // 设置尺寸大小
        _scrollView.frame = CGRectMake(0, 20, SCROLL_WIDTH, SCROLL_HEIGHT);
        // 设置滚动区域
        _scrollView.contentSize = CGSizeMake(SCROLL_WIDTH*5, SCROLL_HEIGHT);
        // 隐藏水平滑条
        _scrollView.showsHorizontalScrollIndicator = NO;
        // 设置分页(每次滑动一页)
        _scrollView.pagingEnabled = YES;
        // 弹簧效果(边界拉出来一小段会弹回去)
        _scrollView.bounces = NO;    //关闭
        _scrollView.contentOffset = CGPointMake(SCROLL_WIDTH*1, 0);
        // 设置代理方法
        _scrollView.delegate = self;
    }

    return _scrollView;
}


- (UIPageControl *)pageControl {

    if (_pageControl == nil) {
        // 实例化UIPageControl
        _pageControl = [[UIPageControl alloc] init];
        _pageControl.frame = CGRectMake(0, 20+SCROLL_HEIGHT-30, SCROLL_WIDTH, 30);
        // 设置总页数
        _pageControl.numberOfPages = 3;
        // 设置背景色
        _pageControl.backgroundColor = [UIColor clearColor];
        // 设置当前页颜色
        _pageControl.currentPageIndicatorTintColor = [UIColor purpleColor];
        // 设置其他页颜色
        _pageControl.pageIndicatorTintColor = [UIColor greenColor];
        //添加事件
//        [_pageControl addTarget:self action:@selector(pageDidChanged:) forControlEvents:UIControlEventValueChanged];
    }

    return _pageControl;
}


@end

4. 使用UIScrollView实现图片缩放功能

首先，设置滚动区域足够大，并设置缩放比例范围：

        // 设置滚动区域
        _scrollView.contentSize = CGSizeMake(SCROLL_WIDTH*5, SCROLL_HEIGHT*5);
        _scrollView.minimumZoomScale = 0.5;     // 最小缩小比例
        _scrollView.maximumZoomScale = 2.0;     // 最大放大比例

然后在scrollView里添加图片：

    UIImage *image = [UIImage imageNamed:@"1.jpg"];
    _imageView = [[UIImageView alloc] initWithImage:image];
    [self.scrollView addSubview:_imageView];

最后在代理方法里返回需要放大的控件：

// 缩放代理方法:返回需要缩放的视图 (手动拖拽及代码设置缩放均会调用）
- (nullable UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return _imageView;
}

接下来，可用手指捏合图片或者调用setZoomScale:animated:/zoomToRect:animated:方法来触发以下代理方法执行进一步操作：

// 准备开始缩放 (手动拖拽及代码设置均会调用）
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view NS_AVAILABLE_IOS(3_2) {

    NSLog(@"%s",__func__);
}


// 正在缩放 (手动拖拽及代码设置均会调用，可能多次调用）
- (void)scrollViewDidZoom:(UIScrollView *)scrollView NS_AVAILABLE_IOS(3_2) {

    NSLog(@"%s",__func__);
}


// 已结束缩放 (手动拖拽及代码设置均会调用）
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale {

    NSLog(@"%s",__func__);
}

5. UIScrollView的代理方法总结

// 准备开始滑动 (仅手动拖拽时调用；代码设置setContentOffset:/scrollRectToVisible:不会调用)
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;

// 已经开始滑动（手动拖拽及代码设置滚动均会调用，可能多次调用）
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;

// 准备结束滑动（仅手动拖拽时调用）
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset NS_AVAILABLE_IOS(5_0);

// 已经结束滑动（仅手动拖拽时调用）
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

// 准备开始减速（仅手动拖拽时调用）
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;

// 已经停止减速（仅手动拖拽时调用）
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;

// 滚动完毕（代码设置setContentOffset/scrollRectVisible:animated:,且animated设为YES时才调用）
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;

// 缩放代理方法:返回需要缩放的视图 (手动拖拽及代码设置均会调用）
- (nullable UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;

// 准备开始缩放 (手动拖拽及代码设置均会调用）
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view NS_AVAILABLE_IOS(3_2);

// 正在缩放 (手动拖拽及代码设置均会调用，可能多次调用）
- (void)scrollViewDidZoom:(UIScrollView *)scrollView NS_AVAILABLE_IOS(3_2);

// 已结束缩放 (手动拖拽及代码设置均会调用）
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale;

// 是否能滚动到顶端 (当手指触摸状态栏的时候)
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;

// 已经完成滚动到顶端 (触摸状态栏顶端时调用)
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;

// adjustedContentInset(与边缘的距离)值被改变的delegate
- (void)scrollViewDidChangeAdjustedContentInset:(UIScrollView *)scrollView API_AVAILABLE(ios(11.0), tvos(11.0));

二、使用XIB与storyboard创建

和UIView的创建差不多，就多了个delegate的关联，就不浪费时间贴上了。可参阅之前的博文：http://www.jianshu.com/p/9362d0274ed5。

tan452301
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS学习笔记-021.UIScrollView分页
qiwenmingshiwo的专栏
01-18 778
UIScrollView分页 一基本分页一个图片 二基本分页代码实例 三基本分页图示 四多图分页原理 五多图分页代码示例 六多图分页图示UIScrollView分页一、基本分页（一个图片）只要将UIScrollView的pageEnabled属性设置为YES，UIScrollView会被分割成多个独立页面， 里面的内容就能进行分页展示 一般会配合 UIPageControl 增强分页效果，UIP
UIScrollView和UIPageControl的配合使用 - iOS - UI基础知识总结11
毛毛虫
06-09 433
注意：MRC模式 在.h中声明两个属性 #import @interface RootViewController : UIViewController @property (nonatomic, retain) UIScrollView *myScrollView; @property (nonatomic, retain) UIPageControl *myPageControl
UIScrollView的分页滑动（page可以不一个屏幕大小）
lipeiran1987的专栏
04-01 4025
1.首先建一个MySubview.h #import @interface MySubview :UIView{ } @property (nonatomic,retain) UIScrollView *receiver; @end 2.实现MySubview.m #import"MySubview.h" @implementation MySubview @synth
UIScrollView 实践经验
ralbatr的专栏
12-16 1678
HOMESUBSCRIBE 15 DECEMBER 2014 on ios, uiscrollview UIScrollView（包括它的子类 UITableView 和 UICollectionView）是 iOS 开发中最常用也是最有意思的 UI 组件，大部分 App 的核心界面都是基于三者之一或三者的组合实现。UIScrollView 是 UIKit 中为数不多能响应滑动手势
UI第七天:UIScrollView、UIPageContro
luchong的博客
11-18 337
⼀、UIScrollView的常⽤属性 UIScrollView是可以滚动的view，UIView本⾝不能滚动，⼦类 UIScrollview拓展了滚动⽅⾯的功能。 UIScrollView是所有滚动视图的基类。以后的UITableView， UITextView等视图都是继承于该类。 UIScrollView核⼼功能 UIScrollview主要专⻓于两个⽅⾯： 滚动：conte
【iOS开发-55】图片轮播案例：scrollView的分页、滚动条、利用代理控制定时器和Page Control以及多线程问题
小小的客栈 大大的江湖
10-18 4171
借助新学习的scrollView的属性pagingEnabled直接设置scrollView是否分页。这里面需要注意的是，如果要借助这种方式实现分页，那么最好让scrollView的宽度正好等于里面每张图片的宽度，否则分页会出现截断。因为分页是按照scrollView的宽度给整个滚动区域做切割的。
UIScrollView、UIPageControl
HHH航_IOS开发学习之路
01-26 294
UIscrollView UIScrollView是可以滚动的view，UIView本⾝不能滚动，⼦类 UIScrollview拓展了滚动⽅⾯的功能。 UIScrollView是所有滚动视图的基类。以后的UITableView， UITextView等视图都是继承于该类。 使⽤场景：显⽰不下（单张⼤图）；内容太多（图⽂混排）；滚动 头条（图⽚）；相册等 核⼼功能: UIScrol
iOS开发中使用UIScrollView实现无限循环的图片
最新发布
11-22
在iOS应用开发中，UIScrollView是苹果提供的一种基础控件，用于展示可以滚动的大型内容，如图片、文本或自定义视图。当我们需要创建一个无限循环的图片浏览器时，UIScrollView是一个理想的选择。这个主题通常涉及到...
iOS开发中使用UIScrollView实现图片轮播和点击
11-22
在iOS应用开发中，UIScrollView是实现滚动视图和交互式内容滑动的关键组件。它能够容纳比屏幕显示更多的内容，并允许用户通过滑动查看隐藏的部分。在这个场景中，我们讨论如何利用UIScrollView来创建一个图片轮播器...
iOS App开发中的UIPageControl分页控件使用小结
09-02
在iOS应用开发中，UIPageControl是苹果提供的一种用于页面导航的简单控件，它通常与UIScrollView或UICollectionView配合使用，为用户提供直观的翻页指示。本文将深入探讨UIPageControl的使用方法及其常见属性。 ...
UIScrollView与UIPageControl
08-13
UIScrollView与UIPageControl的简单应用以及一些非常基本的使用方法
用UIScrollView和UIPageControl做的支持滚动查看图片的例子
06-25
见标题，没有用到xib，开发环境是ios7
iOS基于UIScrollView实现滑动引导页
08-31
在iOS开发中，滑动引导页（又称欢迎页、启动页...总的来说，通过使用UIScrollView和UIPageControl，我们可以轻松地在iOS应用中实现滑动引导页，同时结合其他UI组件和动画效果，可以进一步提升其视觉吸引力和用户体验。
UIScrollview自定义分页大小
不积跬步，无以至千里；不积小流，无以成江海。
01-30 2098
Demo中UIScrollview的frame大小为屏幕大小： 1、自定义水平分页pageWidth = 300效果: 2、自定义垂直分页pageHeight = 400效果: 默认ios的UIScrollview系统只支持bound宽度或高度的分页，不能自定义分页大小，这种不能满足某些情况下交互需求，要实现自定义分页有以下两种方法： 方法1 将UIScrollvi
iOS --- UIScrollView和UIPageControl的简单使用
icetime17的专栏
10-07 1466
UIScrollView是iOS中非常常见的一个控件, 通常结合UIPageControl实现如下的滚动效果.
UIPageControl的详细使用 (与uiscrollview配合使用)
沸腾的泪水的专栏
11-08 9691
转载自：http://www.189works.com/article-61093-1.html 先自我总结下： 关于uiscrollview 与 pagecontrol结合使用： 1.当uiscrollview滚动时，这个委托有个方法能够检测得到 - (void)scrollViewDidScroll:(UIScrollView *)sender  ，所以我们可在这里面装饰pa
使用Scroll View和Page Control实现分页滚动
wforsea的专栏
03-10 570
使用Scroll View和Page Control实现简单的图片分页滚动
UIScrollView和UIPageControl的分页 && NSTimer【图片轮播器】
JH_1995
12-08 547
UIScrollView和UIPageControl的分页一、分页 只要将UIScrollView的pageEnabled属性设置为YES，UIScrollView会被分割成多个独立页面，里面的内容就能进行分页展示。(根据ScrollView的规格进行分页) 一般会配合UIPageControl增强分页效果。 二、UIPageControl常用属性 一共有多少页 @property(nonatom
UIScrollView的PageEnable可以实现slider
飞翔的熊blabla
06-01 1106
当pageenable = YES时会自动翻页，如果等于NO时就是uiscrollview那样的平滑滚动效果了
iOS开发：利用UIScrollView构建无限滚动图片浏览器
在iOS开发中，UIScrollView是一个非常重要的控件，它允许开发者创建可滚动的视图容器，常用于展示大量内容，如图片浏览、列表滚动等场景。本文将围绕如何利用UIScrollView实现无限循环的图片浏览器来展开讲解。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值