[iOS] UIKit-UIScrollView

2016-04-01  本文已影响159人  TYM

常见属性

属性 说明
@property(nonatomic) CGPoint contentOffset; 内容偏移量，当前显示的内容的顶点相对此控件顶点的x、y距离，默认为CGPointZero
@property(nonatomic) CGSize contentSize; 控件内容大小，不一定在显示区域，如果这个属性不设置，此控件无法滚动，默认为CGSizeZero
@property(nonatomic) UIEdgeInsets contentInset; 控件四周边距，类似于css中的margin,注意边距不作为其内容的一部分,默认为UIEdgeInsetsZero
@property(nonatomic,assign) id<UIScrollViewDelegate> delegate; 控件代理，一般用于事件监听，在iOS中多数控件都是通过代理进行事件监听的
@property(nonatomic) BOOL bounces; 是否启用弹簧效果，启用弹簧效果后拖动到边缘可以看到内容后面的背景，默认为YES
@property(nonatomic,getter=isPagingEnabled) BOOL pagingEnabled; 是否分页，如果分页的话每次左右拖动则移动宽度是屏幕宽度整数倍，默认为NO
@property(nonatomic,getter=isScrollEnabled) BOOL scrollEnabled; 是否启用滚动，默认为YES
@property(nonatomic) BOOL showsHorizontalScrollIndicator; 是否显示横向滚动条，默认为YES
@property(nonatomic) BOOL showsVerticalScrollIndicator; 是否显示纵向滚动条，默认为YES
@property(nonatomic) CGFloat minimumZoomScale; 最小缩放倍数，默认为1.0
@property(nonatomic) CGFloat maximumZoomScale; 最大缩放倍数（注意只有maximumZoomScale大于minimumZoomScale才有可能缩放），默认为1.0
@property(nonatomic,readonly,getter=isTracking) BOOL tracking; （状态）是否正在被追踪，手指按下去并且还没有拖动时是YES，其他情况均为NO
@property(nonatomic,readonly,getter=isDragging) BOOL dragging; 是否正在被拖拽
@property(nonatomic,readonly,getter=isDecelerating) BOOL decelerating; 是否正在减速
@property(nonatomic,readonly,getter=isZooming) BOOL zooming; 是否正在缩放
contentSize、contentInset、contentOffset

contentInset相当于在内容大小contentSize的基础上增加了一块额外的滚动区域，是额外的，所以和contentSize、contentOffset都没有直接的关系。

contentOffset

下面用图来表达contentOffset，其中，绿色矩形是scrollview，透明红矩形是scrollview的内容

图1 - 内容在右上角，contentOffset = (100，100) 图2 -内容在左下角，contentOffset = (-100，-100)

记住！
contentOffset = 控件左上角(0, 0) - 内容左上角
contentOffset.x > 0 ，内容左移
contentOffset.x < 0 ，内容右移
contentOffset.y > 0 ，内容上移
contentOffset.y < 0 ，内容下移

常用方法

方法 说明
- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated; 设置滚动位置，第二个参数表示是否启用动画效果
- (void)scrollRectToVisible:(CGRect)rect animated:(BOOL)animated; 滚动并显示指定区域的内容，第二个参数表示是否启用动画效果

常见代理方法

代理方法 说明
- (void)scrollViewDidScroll:(UIScrollView *)scrollView; 滚动事件方法，滚动过程中会一直循环执行（滚动中…）
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView; 开始拖拽事件方法
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate; 拖拽操作完成事件方法
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView; 即将停止滚动事件方法（拖拽松开后开始减速时执行）
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView; 滚动停止事件方法（滚动过程中减速停止后执行）
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view NS_AVAILABLE_IOS(3_2); 开始缩放事件方法
- (void)scrollViewDidZoom:(UIScrollView *)scrollView NS_AVAILABLE_IOS(3_2); 缩放操作完成事件方法
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView; 返回缩放视图，注意只有实现这个代理方法才能进行缩放，此方法返回需要缩放的视图
方法的调用顺序
拖动UIScrollview

如果我们拖动一个UIScrollView中的子控件移动的时候它的执行顺序如下：

  1. 开始拖拽，
  2. 滚动...，
  3. 停止拖拽，
  4. 将要停止滚动，
  5. 滚动...
  6. 停止滚动

其中步骤4、5和6有可能执行也有可能不执行，关键看你拖拽的停止的时候是突然停止（没有惯性）还是有一段惯性让他继续执行（有惯性）。但是不管怎么样滚动事件会一直执行，因此如果在这个事件中进行某种操作一定要注意性能。

  1. 没有惯性的情况：只会调用 停止拖拽的方法，不会调用停止减速的方法
  2. 有惯性的情况：既会调用 停止拖拽的方法，也会调用停止减速的方法
    所以：以后要判断UIScrollView是否停止滚动，需要同时重写两个方法
    2.1 scrollViewDidEndDragging
    2.2 scrollViewDidEndDecelerating
// 结束拖拽
    -(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
        if (decelerate == NO) {  // 如果不是减速，也就是没有惯性 
        // 主动调用结束减速方法，所有的滚动停止后操作都在那个方法中执行
        [self scrollViewDidEndDecelerating:scrollView];
        }
    }
// 结束减速
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
        // 在这里写停止滚动后的相关操作
    }
缩放UIScrollview
// 1.设置缩放大小
  srcollView.maximumZoomScale = 2.0;
  srcollView.minimumZoomScale = 1;
// 2.设置需要缩放的控件
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return self.imageView;
}

无限循环轮播器

在程序中，读取写入了图片信息的plist文件并加载对应的图片，图片按顺序依次命名：page0.jpg、page1.jpg…page4.jpg。我们的程序主要集中于自定义的ViewController.m中，在这里我们声明1个UIScrollView和3个UIImageView用于显示图片，同时声明一个UIPageControl来显示当前图片页数，具体代码如下：

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>

/** 所有图片*/
@property (nonatomic, strong) NSDictionary *images;
/** 图片个数*/
@property (nonatomic, assign) int imageCount;

/** 轮播器*/
@property (nonatomic, weak) UIScrollView *cycleScrollView;
/** 左边的图控件*/
@property (nonatomic, weak) UIImageView *leftImageView;
@property (nonatomic, weak) UIImageView *midImageView;
@property (nonatomic, weak) UIImageView *rightImageView;

/** 图片索引*/
@property (nonatomic, assign) int imageIndex;

// 包装view需要装下scrollview和pageControl
/** 包装view*/
@property (nonatomic, weak) UIView *backGroundView;

/** 分页控件*/
@property (nonatomic, weak) UIPageControl *pageC;

@end

@implementation ViewController

#define SCREEN_WIDTH self.view.bounds.size.width
#define SCREEN_HEIGHT self.view.bounds.size.height
#define IMAGEVIEW_COUNT 3
#define ScrollView_HEIGHT (200 * (SCREEN_WIDTH) / 320)

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 加载图片数据
    [self loadImageData];
    
    // 添加滚动图
    [self createScrollView];
    
    // 给滚动图添加图片控件
    [self addImageViewToScrollView];
    
    // 添加分页控件
    [self addPageControl];
    
    // 加载默认图片
    [self setDefaultImages];
    
    
}

// 加载图片数据
-(void)loadImageData {
    NSString *path = [[NSBundle mainBundle] pathForResource:@"CycleScrollImages" ofType:@"plist"];
    self.images = [NSDictionary dictionaryWithContentsOfFile:path];
    self.imageCount = (int)self.images.count;
}

// 添加滚动图
-(void)createScrollView {
    // 创建包含的view
    UIView *bV = [[UIView alloc] init];
    bV.frame = CGRectMake(0, 20, SCREEN_WIDTH, ScrollView_HEIGHT);
    [self.view addSubview:bV];
    self.backGroundView = bV;
    
    UIScrollView *scrollView = [[UIScrollView alloc] init];
    scrollView.frame = CGRectMake(0, 0, SCREEN_WIDTH, ScrollView_HEIGHT);
    scrollView.backgroundColor = [UIColor redColor];
    scrollView.contentSize = CGSizeMake(SCREEN_WIDTH * IMAGEVIEW_COUNT, 0);
    scrollView.pagingEnabled = YES;
    scrollView.delegate = self;
    scrollView.bounces = NO;
    [scrollView setContentOffset:CGPointMake(SCREEN_WIDTH, 0)];
    [self.backGroundView addSubview:scrollView];
    
    self.cycleScrollView = scrollView;
}

// 给滚动图添加图片控件
-(void)addImageViewToScrollView {

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, ScrollView_HEIGHT)];
    imageView.contentMode = UIViewContentModeScaleAspectFit;
    [self.cycleScrollView addSubview:imageView];
    self.leftImageView = imageView;
    
    imageView = [[UIImageView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH, 0, SCREEN_WIDTH, ScrollView_HEIGHT)];
    [self.cycleScrollView addSubview:imageView];
    self.midImageView = imageView;
    
    imageView = [[UIImageView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH * 2, 0, SCREEN_WIDTH, ScrollView_HEIGHT)];
    [self.cycleScrollView addSubview:imageView];
    self.rightImageView = imageView;
}

// 添加分页控件
-(void)addPageControl {
    
    int count = self.imageCount;
    UIPageControl *pageC = [[UIPageControl alloc] init];
    CGSize size = [pageC sizeForNumberOfPages:count];
    pageC.bounds = CGRectMake(0, 0, size.width, size.height);
    pageC.center = CGPointMake(SCREEN_WIDTH * 0.5, ScrollView_HEIGHT - size.height - 10);
    //设置颜色
    pageC.pageIndicatorTintColor=[UIColor colorWithRed:193/255.0 green:219/255.0 blue:249/255.0 alpha:1];
    //设置当前页颜色
    pageC.currentPageIndicatorTintColor=[UIColor colorWithRed:0 green:150/255.0 blue:1 alpha:1];
    //设置总页数
    pageC.numberOfPages = count;
    
    pageC.backgroundColor = [UIColor redColor];
    [self.backGroundView addSubview:pageC];
    
    self.pageC = pageC;
}

// 加载默认图片
-(void)setDefaultImages {
    self.leftImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d.jpg",self.imageCount - 1]];
    self.midImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d.jpg",0]];
    self.rightImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d.jpg",1]];
    
    
    self.imageIndex = 0;
    [self.pageC setCurrentPage:0];
    
}

// 重新读取图片
-(void)reloadImages {
    int leftImageIndex, rightImageIndex;
    CGPoint currentP = [self.cycleScrollView contentOffset];
    if (currentP.x < SCREEN_WIDTH) { // 滚到左边
        self.imageIndex = (self.imageIndex + self.imageCount -1) % self.imageCount;
    } else if(currentP.x > SCREEN_WIDTH) { // 滚到右边
        self.imageIndex = (self.imageIndex + 1) % self.imageCount;
    }
    leftImageIndex = (self.imageIndex + self.imageCount -1) % self.imageCount;
    rightImageIndex = (self.imageIndex + 1) % self.imageCount;
    
    
    self.midImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d.jpg",self.imageIndex]];
    self.leftImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d.jpg",leftImageIndex]];
    self.rightImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d.jpg",rightImageIndex]];
}

#pragma mark - UIScrollViewDelegate

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (decelerate == NO) {
        [self scrollViewDidEndDecelerating:scrollView];
    }
}

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    // 滚完之后
    // 重新读取图片
    [self reloadImages];
    
    // 滚回中间
    [scrollView setContentOffset:CGPointMake(SCREEN_WIDTH, 0)];
    
    // 设置分页控件的序数
    [self.pageC setCurrentPage:self.imageIndex];
}

@end
效果图1

注意：这里只是简单实现思路，没有封装好。

上一篇 下一篇

猜你喜欢

热点阅读