iOS基础控件--UIScrollView

UIScrollView介绍

UIScrollView的作用是因为手机屏幕有固定大小的局限性，不能完全展示出想要展示的内容。这个控件的使用一般有两种情况：1、对于大图片的详细展示；2、轮播图。
UIScrollView在手机的相册中的使用尤为突出，当我们查看手机相册中图片时，左右滑动切换图片就是轮播图的功能，当双击屏幕放大图片在拖动观察图片就是展示一个大图片了。
下面通过对于UIScrollView的使用介绍UIScrollView的属性、方法和代理。

使用一、展示大图片

UIScrollView控件也是一个类，也是继承自UIView的类，所以UIScrollView的创建也就是很简单的了。

//创建scrollView  这里设置起始位置的y值为-20是因为状态栏的高度为20  这里是为了实现全屏效果。y设置为0的时候上面的状态栏会有留白。
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, -20, self.view.frame.size.width, self.view.frame.size.height)];
//设置背景颜色
scrollView.backgroundColor = [UIColor yellowColor];

既然是查看一张大图片，那么就给scrollView上添加一张图片。一般情况下我们是添加一张比scrollView大的图片。

	// 2.创建UIImageView（图片）
    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.image = [UIImage imageNamed:@"bg.png"];//这里图片的大小是1024*1024像素的
    CGFloat imgW = imageView.image.size.width; // 图片的宽度
    CGFloat imgH = imageView.image.size.height; // 图片的高度
    imageView.frame = CGRectMake(0, 0, imgW, imgH);
    //将图片添加到scrollView上
    [scrollView addSubview:imageView];

下面设置一些常用属性。

	// 设置UIScrollView的滚动范围（一般为内容大小）
    scrollView.contentSize = imageView.image.size;
    
    // 设置滚动条  一个是水平滚动条，一个是垂直滚动条
    scrollView.showsHorizontalScrollIndicator = YES;
    scrollView.showsVerticalScrollIndicator = YES;
    
    //设置弹簧效果，这个弹簧效果是在滚动到边缘位置时是否有弹动
    scrollView.bounces = NO;
    
    //将scrollView添加到界面上
    [self.view addSubview:scrollView];

这样就已经实现了使用scrollView展示一张大图的功能。

使用二、轮播图

轮播图在开发中是很常见的使用，几乎所有的app都有这样的一块。

#import "ViewController.h"

#define WIDTH self.view.frame.size.width
#define HEIGHT self.view.frame.size.height

//准守协议
@interface ViewController ()
{
    UIScrollView *scrollView;
    UIPageControl *pageControl;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];
    //创建scrollView  这里设置起始位置的y值为-20是因为状态栏的高度为20  这里是为了实现全屏效果。y设置为0的时候上面的状态栏会有留白。
    scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, -20, WIDTH, HEIGHT-100)];
    //设置背景颜色
    scrollView.backgroundColor = [UIColor yellowColor];
    //设置滑动范围，这里的滑动范围可以解释为滚动视图的总尺寸，比如左右滑动的情况，滚动的每一个视图是一个屏幕大小，共有5个视图，这里就设置滑动范围的宽度为屏幕宽度*5（self.view.frame.size.width*5）高度为屏幕高度（self.view.frame.size.height-100）
    scrollView.contentSize = CGSizeMake(WIDTH*5, HEIGHT-100);
    
    // 设置滚动条  一个是水平滚动条，一个是垂直滚动条
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.showsVerticalScrollIndicator = NO;
    
    //设置弹簧效果，这个弹簧效果是在滚动到边缘位置时是否有弹动
    scrollView.bounces = YES;
    
    //设置代理
    scrollView.delegate = self;
    
    //设置分页 设置分页的效果是当视图滚动到宽度的一半时会自动滚动到第二页，当小于一半时自动弹回，不滚动到下一页
    scrollView.pagingEnabled = YES;
    
    //将scrollView添加到界面上
    [self.view addSubview:scrollView];
    
    //添加图片
    for (int i = 0; i < 5; i++) {
        //计算每个 UIImageView 的 X 轴坐标
        CGFloat imageX = i*WIDTH;
        
        //创建初始化Imageview
        UIImageView *imageView = [[UIImageView alloc]init];
        
        //设置frame
        imageView.frame = CGRectMake(imageX, 0, WIDTH, 200);
        
        NSString *string = [NSString stringWithFormat:@"image_%.2d", i+1];
        //创建image 图片命名统一，最后使用2位数字表示顺序图片
        UIImage *image = [UIImage imageNamed:string];
        
        //设置显示 图片
        imageView.image = image;
        
        //添加到sctollview
        [scrollView addSubview:imageView];
    }
    
    //设置pageControl
    //创建 初始化
    pageControl = [[UIPageControl alloc]init];
    //设置frame
    pageControl.frame = CGRectMake(WIDTH/2-50, HEIGHT-100, 100, 100);
    //设置点的个数
    pageControl.numberOfPages=5;
    //设置指示器默认显示的颜色
    pageControl.pageIndicatorTintColor = [UIColor whiteColor];
    //设置当前选中的颜色
    pageControl.currentPageIndicatorTintColor = [UIColor blueColor];
    //设置当前默认显示位置
    pageControl.currentPage = 0;
    //实现pageCtrl的响应方法
    [pageControl addTarget:self action:@selector(pageChangeAction:) forControlEvents:UIControlEventValueChanged];
    //将pageControl添加到视图中
    [self.view addSubview:pageControl];
    
}

- (void)pageChangeAction:(UIPageControl *)page{
    // 设置scrollView的偏移量
    scrollView.contentOffset = CGPointMake(pageControl.currentPage * WIDTH, 0);
}

#pragma mark - scrollView的代理方法
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
     //计算pagecontroll相应地页(滚动视图可以滚动的总宽度/单个滚动视图的宽度=滚动视图的页数)
     NSInteger currentPage = (int)(scrollView.contentOffset.x) / (int)(self.view.frame.size.width);
     pageControl.currentPage = currentPage;//将上述的滚动视图页数重新赋给当前视图页数,进行分页
}

- (void)viewDidDisappear:(BOOL)animated{
    [super viewDidDisappear:animated];
    
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    
}


@end

上面的代码就是简单实现了一个轮播图的效果，当然这个轮播图不能实现循环轮播和自动滚动。下一篇文章详细记录。