爬爬爬之路:UI(七) UIScrollView,UIScrollViewDelegate UIPageControl 方法总结

原创 2015年11月18日 22:50:31

UIScrollView

UIScrollView 擅长处理滑动界面和缩放界面两大功能

常用属性

一. 滚动相关

  1. @property (nonatomic) CGPoint contentOffset;
    偏移量, 设置原点的偏移
  2. @property (nonatomic) CGSize contentSize;
    ScrollView内容的范围, 也就是可滑动的范围
    只有contentSize大于scrollView.frame.size的时候 能够滚动
  3. @property (nonatomic) BOOL bounces;
    边界回弹, 默认是YES, 只有YES的时候才能让ScrollView在边界的时候可以弹动
  4. @property (nonatomic) BOOL alwaysBounceVertical;
    上下回弹 默认是NO, 让页面边缘可以在上或者下响应回弹 若为YES, 前提是bounces为YES
  5. @property (nonatomic) BOOL alwaysBounceHorizontal;
    左右回弹, 默认是NO, 让页面边缘左侧或者右侧可以回弹, 前提bounces为YES
  6. @property (nonatomic,getter=isPagingEnabled) BOOL pagingEnabled;
    页面弹动, 也就是整屏翻页, 让scrollView的可视区域显示完整的图片 而不是图片的一半. 前提是图片必须是从(0,0)点开始添加的. 一页的标准是ScrollView的宽度
  7. @property (nonatomic) BOOL showsHorizontalScrollIndicator;
    是否显示水平方向的滚动条. 默认是YES
  8. @property (nonatomic) BOOL showsVerticalScrollIndicator;
    是否显示垂直方向的滚动条. 默认是YES
  9. @property (nonatomic) BOOL scrollsToTop;
    点击滚动条 回到滚动条的顶部

二.缩放相关

  1. @property(nonatomic) CGFloat minimumZoomScale;
    设置最小的缩放比例 默认为1.0
  2. @property(nonatomic) CGFloat maximumZoomScale;
    设置最大的缩放比例. 注意最小和最大缩放比例数值不能相等, 否则会无法缩放! 只要两者不相等就能进行缩放(即使最大缩放比例小于最小缩放比例) 默认为1.0
  3. @property(nonatomic) CGFloat zoomScale;
    变化比例, 通常用本属性的setter方法, 让子视图完成实现相应的缩放比例
  4. @property(nonatomic,readonly,getter=isZooming) BOOL zooming;
    判断是否正在缩放状态
  5. @property(nonatomic) BOOL bouncesZoom;
    控制缩放的时候是否会反弹 默认YES

实现缩放功能 必须先设置最小和最大缩放比例
其次要实现UIScrollViewDelegate里的
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
方法
只有步骤满足要求才可以实现scrollView子视图的缩放功能

常用方法:

  1. 滚动相关方法:

    // 设置偏移量, 并可以指定是否带动画, 若带动画可以触发另一方法
    - (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;
    
  2. 缩放相关方法:

    // 重新设置图片比例, 缩放或者放大, 1表示原比例大小 不会触发另一方法
    - (void)setZoomScale:(CGFloat)scale animated:(BOOL)animated;
    

UIScrollViewDelegate

方法及触发条件介绍

/*-------------------滚动相关--------------------*/
// 只要滑动屏幕都会触发
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;

// 将要开始拖拽显示图片时触发
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;

// 将要结束拖拽时触发
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset;

// 已经结束拖拽动作时触发
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

// 将要开始减速(结束拖拽动作时)时触发 
/* 
   可以理解为以某个速度拖拽图片的时候, 图片会有惯性, 当结束拖拽的时候
   图片会根据惯性继续向拖拽方向移动, 但是移动速度开始慢慢减缓
*/
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;

// 已经结束减速(图片完全静止, 本方法才是完全停止的触发方法而不是停止拖动方法)
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;

// 利用带动画的设置偏移量方法, 在动画结束的时候触发本方法
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;


/* 状态大致步骤分为
   1. 将要开始拖拽
   2. 正在拖拽(滑动屏幕)
   3. 将要结束拖拽
   4. 已经结束拖拽
   5. 将要开始减速
   6. 已经结束减速
   6个步骤是环环相扣的
   第七个方法是独立出来响应setContentOffset:animated:方法的.
*/

/*-------------------缩放相关--------------------*/

// 指定返回一个要缩放的子视图 完成缩放功能必须实现的方法
// 通常写法类似于 return scrollView.subviews[0];
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;

// 将要开始缩放时触发
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view;

// 图片缩放过程中触发
- (void)scrollViewDidZoom:(UIScrollView *)scrollView;

// 已经结束缩放触发
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale;

/*  
    步骤分为以下三步:
    1. 将要开始缩放
    2. 正在缩放
    3. 已经结束缩放
    仅有三个步骤.
*/

/*-------------------独立方法--------------------*/

// 是否可以快速跳转到顶部
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;

// 跳回顶部触发
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;

UIPageControl

常用属性

  1. @property(nonatomic) NSInteger numberOfPages;
    默认是0, 用于控制生成多少个代表页面的点
  2. @property(nonatomic) NSInteger currentPage;
    默认是0, 用于设置当前被选中的点
  3. @property(nonatomic,retain) UIColor *pageIndicatorTintColor;
    用来设置未选中点的填充色
  4. @property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;
    用来设置选中的点的填充色

主要方法

同其他UIControl类的子类相同

- (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;
// 响应的事件为 UIControlEventValueChanged

UIScrollView和UIPageControl结合使用:

需求: 要求实现一个相册, 显示的图片要和PageControl的点一一对应. 且可以对每张图片进行缩放操作, 不受其他图片影响
要点:
1. 在pageControl的响应方法里让图片偏移到pageControl对应的图片位置
2. 由于要求图片可以独立进行缩放不受其他图片影响. 所以需要每个图片都对应一个UIScrollView, 并将这些ScrollView放在一个总得ScrollView上

// 设置根视图控制器为RootViewController
// RootViewController.m 中实现
#import "RootViewController.h"
#define kScreenHeight [UIScreen mainScreen].bounds.size.height
#define kScreenWidth [UIScreen mainScreen].bounds.size.width

@interface RootViewController () <UIScrollViewDelegate>
// 便于处理, 将根ScrollView和pageControl设为属性
@property (nonatomic, retain) UIScrollView *scroll;
@property (nonatomic, retain) UIPageControl *page;
@end

@implementation RootViewController

- (void)dealloc {
    [_scroll release];
    [_page release];
    [super dealloc];
}

- (void)viewDidLoad {
    [super viewDidLoad];

    // 设置总scroll的大小
    self.scroll = [[UIScrollView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:self.scroll];
    self.scroll.tag = 1000; // 设置tag
    // 共4张图片, 设置可滑动区域为4个界面大小, 横向排列.
    self.scroll.contentSize = CGSizeMake(kScreenWidth * 4, kScreenHeight);
    // 设置页面弹动
    self.scroll.pagingEnabled = YES;
    // 关闭滚动条
    self.scroll.showsHorizontalScrollIndicator = NO;
    self.scroll.showsVerticalScrollIndicator = NO;
    // 关闭边缘弹动
    self.scroll.bounces = NO;
    // 给总的scrollView设置代理
    self.scroll.delegate = self;

    // 在scrollView上再铺放若干小的scrollview 在小的scrollview上铺设imageView 这样才能保证单独操作一张image不影响其他image
    for (int i = 0; i < 4; i++) {
        // 将小的ScrollView添加在总的scrollView上, 并和imageView对应
        UIScrollView *temp = [[UIScrollView alloc] initWithFrame:CGRectMake(i * kScreenWidth, 0, kScreenWidth, kScreenHeight)];
        // 关闭滚动条
        temp.showsVerticalScrollIndicator = NO;
        temp.showsHorizontalScrollIndicator = NO;

        // 添加图片
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"image%d.jpg", i + 1]];
        [temp addSubview:imageView];
        [imageView release];

        // 设置最小和最大的缩放比例
        temp.minimumZoomScale = 0.5;
        temp.maximumZoomScale = 2;
        // 给小的scrollView设置代理
        temp.delegate = self;
        [self.scroll addSubview:temp];
        [temp release];
    }
    [_scroll release];

    // 添加pageControl
    self.page = [[UIPageControl alloc] initWithFrame:CGRectMake(0, kScreenHeight - 30, kScreenWidth, 30)];
    // 设置页数为4
    self.page.numberOfPages = 4;
    // 初始值为0
    self.page.currentPage = 0;
    // 设置当前页面点颜色
    self.page.currentPageIndicatorTintColor = [UIColor yellowColor];
    // 设置为选中页面点颜色
    self.page.pageIndicatorTintColor = [UIColor grayColor];

    // 为page添加响应方法
    [self.page addTarget:self action:@selector(pageAction:) forControlEvents:(UIControlEventValueChanged)];
    [self.view addSubview:self.page];
    [_page release];
}

// 实现响应page值变化的方法
- (void)pageAction:(UIPageControl *)page {
    CGPoint point;
    // 计算偏移的横坐标
    point.x = page.currentPage * kScreenWidth;
    point.y = 0;
    // 改变大的scrollView的偏移量
    [self.scroll setContentOffset:point animated:YES];
}

// 大的scrollView响应的代理方法
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    // 遍历每个小scrollView, 让每个小scrollView都还原各自的图片大小
    // 用if判断 隔绝小的scrollView响应本方法时候导致的崩溃问题
    if (scrollView.tag == self.scroll.tag) {
    // 由于小scrollView是直接放在总的scrollView上的, 可以直接取出
        NSArray *array = scrollView.subviews;
        for (UIScrollView *temp in array) {
            [temp setZoomScale:1 animated:YES];
        }
    }

}
// 大的scrollView响应的代理方法
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    self.page.currentPage = (scrollView.contentOffset.x) / kScreenWidth;
}


// 小的scrollView响应的代理方法
- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
    // 保证在对图片缩放的时候, 图片永远居中显示
    UIImageView *view = scrollView.subviews[0];
    view.center = self.view.center;
}
// 小的scrollView响应的代理方法
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return scrollView.subviews[0];
}

@end


版权声明:本文为博主原创文章,未经博主允许不得转载。

【学习ios之路:UI系列】实现轮播图效果(UIImageView,UIScrollView,UIPageControl,NSTimer相结合)

实现效果,在不点击的情况下,自定滚动,点击时,停止.如下图 部分代码如下: //调用NSTimer方法,自定计时 - (void)autoScroll { self.timer = [NS...
  • ZFX5130
  • ZFX5130
  • 2015年01月29日 21:15
  • 1419

UIPageControl, UIScrollView属性及UIScrollViewDelegate详解

UIPageControl, UIScrollView属性及Delegate详解

UIScrollView控件的常用属性与<UIScrollViewDelegate>协议中各个方法的触发时机

UIScrollView是iOS中的滑动控件,用来解决当前要显示的内容超出视图的范围时,可以通过滑动方式查看视图的所有内容 1.创建一个UIScrollView对象,并改变背景颜色 UIScrol...
  • hakusan
  • hakusan
  • 2014年08月30日 10:23
  • 1089

UI开发----UIScrollView和UIPageControl简单模拟滚动视图

//  Created By 郭仔 //================================================== 师傅领进门,修行在个人!自学才是王道! //====...

UI课程07 UIScrollView、UIPageControl

1。知识点思维导图 1) UIScrollView是可以滚动的View,它是所有滚动视图的基类,UITableView,UITextView等都继承于它。 2) 使用场景 显示不下(单张...
  • Kaiccy
  • Kaiccy
  • 2015年09月15日 19:40
  • 231

随意细解:UI -- UIScrollView、UIPageControl

UIScrollView、UIPageControl
  • M_MU_U
  • M_MU_U
  • 2015年11月18日 22:49
  • 383

UI - UIScrollView、UIPageControl

// UIScrollView 滚动视图, 所有能滚动的控件的基类 //1.滚动 //2.缩放// 一、滚动 self.scrollView = [[UIScrol...

UI一揽子计划 7 ( UIScrollView、 UIPageControl、综合所学简单相册)

---- 创建一个UIScrollView     UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:[UI...

IOS基础UI之(九) UIPageControl结合UIScrollView实现分页效果

上一章已经介绍了UIScrollView,现在使用 UIPageControl结合UIScrollView实现分页效果。话不多说,马上看看!!!  一: UIPageControl属性和方法 ...

UI基础之—UIScrollView,UIPageControl

1.  UIScrollview是 iOS 中提供滚动的控件,用于解决当内容区域大小大于可视区域大小时,可以通过滚动的方式查看全部内容, UIScrollView 滑动视图的基类, UITableVi...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:爬爬爬之路:UI(七) UIScrollView,UIScrollViewDelegate UIPageControl 方法总结
举报原因:
原因补充:

(最多只允许输入30个字)