码迷,mamicode.com
首页 > 其他好文 > 详细

UI基础之UIScrollView的使用

时间:2014-11-24 22:20:18      阅读:330      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   ar   color   使用   sp   

一: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

bubuko.com,布布扣
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

效果

bubuko.com,布布扣

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

效果:

bubuko.com,布布扣

 

#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

效果:

bubuko.com,布布扣

   

 

UI基础之UIScrollView的使用

标签:des   style   blog   http   io   ar   color   使用   sp   

原文地址:http://www.cnblogs.com/-boy/p/4119650.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!