首页 > 代码库 > UI基础之UIScrollView的使用

UI基础之UIScrollView的使用

一:ScrollView属性应用

1,UIScrollView是一个能够滚动的视图控件,可以?用来展?示?大量的内容,并且可以通过滚 动查看所有的内容

2,UIScrollView 的使用步骤:

     1>添加scrollView的滚动内容

     2>设置scrollView的滚动范围,属性值contentSize,告诉scrollView滚动内容的范围。

3,属性:

  1>contentOffset; 这个属性?用来表?示UIScrollView滚动的位置

   2>contentSize;这个属性?用来表?示UIScrollView内容的尺?寸

    3>contentInset; 这个属性能够在UIScrollView的4周增加额外的滚动区域 ,也就是说让scrollView的边界增加一定的内边距。

     contentOffset属性值位置是一个相对位置用来记录ScrollView的滚动位置,它是scrollView相对内容的滚动位置,我们可以这样理解:屏幕中的内容不变,scrollView滚动位置跟内容边界的距离x,y

4> bounces;  设置UIScrollView是否需要弹簧效果
5>scrollEnabled; 设置UIScrollView是否能滚动 
 
6>showsHorizontalScrollIndicator; 是否显?示?水平滚动条 
    showsVerticalScrollIndicator; 是否显?示垂直滚动条
如果scrollView设置后不能滚动原因:*没有设置滚动内容的范围:contentSize; *scrollView的enable为NO; *scrollView的userInteractionEnable为NO;
 
补充:UIScrollView的frame为它的可视范围大小,而UIScrollView的contentSize是它可滚动的范围
 
4,UIScrollView实现图片的缩放功能
     1>缩放原理:当用户在UIScrollView身上使用捏合手势时,UIScrollView会给代理发送一条消息,询问代理究竟要缩放自己内部的哪一个子控件(哪一块内容)
5,UIScrollView的方法:

当UIScrollView发生一系列的滚动操作时, 会自动通知它的代理(delegate)对象,给它的代理发送相应的消息,让代理得知它的滚动情况

也就是说,要想监听UIScrollView的滚动过程,就必须先给UIScrollView设置一个代理对象,然后通过代理得知UIScrollView的滚动过程

1> 实现缩放的步骤:

设置代理

设置minimumZoomScale :缩小的最小比例

设置maximumZoomScale :放大的最大比例

让代理对象实现下面的方法,返回需要缩放的视图控件

 

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;

2>- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;

 将要滚动

3>- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

结束滚动
4>- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;     
缩放哪个UIView
5>- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;  设置scrollView的滚动位置
 
补充:1,UIPageControl
 两个属性:numberOfPage
                currentPage
         2,UIScrollView的属性值contentOffSet和ContentInSet的配合使用让UIScrollView中的内容进入视图范围内就有一个边距
  // 设scrollView的位置    self.scrollView.contentOffset = CGPointMake(-40, -40)
    // scrollView只有当用户拖动才会有内边距 所以先设置contentOffSet的位置

    // 设置scrollView的内边距

    self.scrollView.contentInset = UIEdgeInsetsMake(40, 50, 60, 70);

        3,当用静态方式添加控件到storyBoard上,控制scrollView时,注意:查看该控件是否添加到了scrollView上,这样该控件就会跟scrollView一起滚动

二:简单实例代码

缩放功能:

#import "ViewController.h"@interface ViewController ()<UIScrollViewDelegate>@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (weak, nonatomic) IBOutlet UIImageView *imageView;@end@implementation ViewController- (void)viewDidLoad {        [super viewDidLoad];    //    // 设置scrollView的滚动范围    self.scrollView.contentSize = self.imageView.image.size;////    // 设置scrollView的位置//    self.scrollView.contentOffset = CGPointMake(-40, -40);//    //    // scrollView只有当用户拖动才会有内边距 所以先设置contentOffSet的位置//    // 设置scrollView的内边距//    self.scrollView.contentInset = UIEdgeInsetsMake(40, 50, 60, 70);//    //    // 设置scrollView的弹簧//    self.scrollView.bounces = NO;//    //    // 设置scrollView的水平垂直属性//    self.scrollView.showsHorizontalScrollIndicator = NO;//    self.scrollView.showsVerticalScrollIndicator = NO;         //scrollView的缩放    self.scrollView.minimumZoomScale = 0.2;    self.scrollView.maximumZoomScale = 2;    self.scrollView.delegate = self; // 设置代理        }// 代理方法- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{    return self.imageView;}@end

效果

UIScrollView属性的应用

#import "ViewController.h"@interface ViewController ()@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (weak, nonatomic) IBOutlet UIView *footerView;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.        // 1,设置scrollView的滚动范围    CGFloat heigth = CGRectGetMaxY(self.footerView.frame);    self.scrollView.contentSize = CGSizeMake(0,heigth);        // 2,设置scrollView的contentOffSet的位置    self.scrollView.contentOffset = CGPointMake(0, -64);        // 3,设置scrollView的内边距    self.scrollView.contentInset = UIEdgeInsetsMake(64, 0, 120, 0);}@end

效果:

 

#import "ViewController.h"@interface ViewController ()<UIScrollViewDelegate>@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (nonatomic, weak) UIPageControl *pageControl;@property (nonatomic, strong) NSTimer *timer;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.        int count = 5;    CGFloat imageW = 300;    CGFloat imageY = 0;    CGFloat imageH = 130;    for (int i = 0; i<count; i++) {                UIImageView *imageView = [[UIImageView alloc] init];        [self.scrollView addSubview:imageView];        CGFloat imageX = i * imageW;                imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);                NSString *imageName = [NSString stringWithFormat:@"img_0%d", i+1];                imageView.image = [UIImage imageNamed:imageName];            }        // 创建scrollView的滚动范围    self.scrollView.contentSize = CGSizeMake(count * imageW , 0);    self.scrollView.showsHorizontalScrollIndicator = NO;        // 开启分页功能    self.scrollView.pagingEnabled = YES;        UIPageControl *pageControl = [[UIPageControl alloc] init];    [self.view addSubview:pageControl];    self.pageControl = pageControl;    pageControl.frame = CGRectMake(85, 140, 150, 20);    // 设置pageControl的属性    pageControl.numberOfPages = count;    pageControl.currentPageIndicatorTintColor = [UIColor blueColor];    pageControl.pageIndicatorTintColor = [UIColor redColor];        self.scrollView.delegate = self;        NSTimer *timer = [NSTimer timerWithTimeInterval:1.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];//    self.timer = timer;//     [timer fire];    NSRunLoop *runLoop = [NSRunLoop currentRunLoop];    [runLoop addTimer:timer forMode:NSRunLoopCommonModes];}- (void)nextImage{    NSInteger page = self.pageControl.currentPage;    if (page == self.pageControl.numberOfPages - 1) {        page = 0;    } else {                page++;    }    [self.scrollView setContentOffset:CGPointMake(page * self.scrollView.frame.size.width, 0) animated:YES];}- (void)scrollViewDidScroll:(UIScrollView *)scrollView{    CGPoint point = self.scrollView.contentOffset;    NSInteger page = (point.x + self.scrollView.frame.size.width * 0.5)/self.scrollView.frame.size.width;        self.pageControl.currentPage = page;    }@end

效果:

   

 

UI基础之UIScrollView的使用