黑马程序员_iOS 的高级控件之UIScrollView

iOS，Android，Java培训，期待与您的交流
iOS应用开发的一项内容就是用户界面的开发。不管应用程序实际包含的逻辑有多复杂，如果这个应用程序没有提供友好的图形用户界面，將很难吸引用户。作为一个程序设计者，必须优先考虑用户的感受，一定要让用户感到爽，这个应用程序才有价值。
1    UIScrollView的基本概念
UIScrollView代表一个可滚动的控件，该控件允许用户拖动手指来滚动控件中的内容。通过滚动控件的支持，UIScrollView可以显示超过一个屏幕的内容。

UIScrollView支持如下的三个属性。
1、contentSize：该属性是CGSize类型，代表UIScrollView所需要显示内容的完整宽度和高度
2、contentInset：该属性是UIEdgeInsets类型，它是一个结构体，包含top、left、bottom、right四个成员变量，用于设置四个方向上，滚动条区域的大小
3、contentOffset：该属性是CGPoint类型，表示UIScrollView在显示内容上滚动的位置

  
- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 1.创建UIScrollView
    UIScrollView *scrollView = [[UIScrollView alloc] init];
    scrollView.frame = CGRectMake(0, 0, 250, 250); // frame中的size指UIScrollView的可视范围
    scrollView.backgroundColor = [UIColor grayColor];
    [self.view addSubview:scrollView];
    
    // 2.创建UIImageView（图片）
    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.image = [UIImage imageNamed:@"big.jpg"];
    CGFloat imgW = imageView.image.size.width; // 图片的宽度，1366
    CGFloat imgH = imageView.image.size.height; // 图片的高度，768
    imageView.frame = CGRectMake(0, 0, imgW, imgH);
    [scrollView addSubview:imageView];
    
    // 3.设置scrollView的属性
    
    // 设置UIScrollView的滚动范围（内容大小）,如果滚动区域小于imageView的frame，则只能看到一部分图片
    scrollView.contentSize = imageView.image.size;
//    scrollView.contentSize = CGSizeMake(320, 480);
    
    // 隐藏水平滚动条
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.showsVerticalScrollIndicator = NO;
    
    // 用来记录scrollview滚动的位置，指的是scrollview的frame左上角顶点在滚动范围的坐标，滚动范围的原点也是左上角，并且不受滚动条区域的影响(contentInset属性)
//    scrollView.contentOffset = ;
    
    // 去掉弹簧效果
//    scrollView.bounces = NO;
    
    // 控制滚动条的区域大小，不影响contentSize的大小，可以理解为是在contenSize的基础上向外扩展
    // top  left  bottom  right,不影响可视范围的大小，在可视范围截取一部分
    scrollView.contentInset = UIEdgeInsetsMake(100, 20, 20, 20);
    
    _scrollView = scrollView;
}

2    UIScrollView的缩放功能
通过手势，能够缩放UIScrollView里的内容。这个功能是通过代理模式实现，代理对象应该实现协议UISCrollViewDelegate的一个方法。
1、- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView，返回需要缩放的视图控件
其他可以实现的方法。
2、-(void)scrollViewDidZoom:(UIScrollView *)scrollView，正在缩放的时候调用
3、-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale，缩放完毕的时候调用

  

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 1.添加UIScrollView
    UIScrollView *scrollView = [[UIScrollView alloc] init];
//    scrollView.frame = CGRectMake(0, 0, 320, 460);
    scrollView.frame = self.view.bounds;
    [self.view addSubview:scrollView];
    
    // 2.添加图片
    UIImage *image = [UIImage imageNamed:@"big.jpg"];
    // 调用initWithImage:方法创建出来的UIImageView，它的宽高默认跟图片的宽高一样
    _imageView = [[UIImageView alloc] initWithImage:image];
//    // 设置图片
//    imageView.image = [UIImage imageNamed:@"big.jpg"];
//    
//    // 设置frame
//    imageView.frame = CGRectMake(0, 0, imageView.image.size.width, imageView.image.size.height);
    [scrollView addSubview:_imageView];
    
    // 设置内容范围
    scrollView.contentSize = image.size;
    
    // 设置scrollview的代理对象
    scrollView.delegate = self;
    
    // 设置最大伸缩比例
    scrollView.maximumZoomScale = 2.0;
    // 设置最小伸缩比例
    scrollView.minimumZoomScale = 0.2;
}

//ScrollView实现图片缩放功能：只能缩放它内部的控件，只需告诉ScrollView缩放哪个控件

#pragma mark - UIScrollView 的 代理方法
#pragma mark 这个方法返回的控件就能进行捏合手势缩放操作
#pragma mark 当UIScrollView尝试进行缩放的时候就会调用
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return _imageView;
}

#pragma mark 当缩放完毕的时候调用
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
{
//    NSLog(@"结束缩放 - %f", scale);
}

#pragma mark 当正在缩放的时候调用
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
//    NSLog(@"-----");
}

3    UIScrollView的分页功能
UIScrollView的分页功能，一般都会和UIPageControl一起实现。UIPageControl由N个小圆点组成，每个原点代表一个页面，当前页面以高亮的原点显示。UIPageControl的常见属性。
NSInteger numberOfPages : 总页数
NSInteger currentPage : 当前的页码
BOOL hidesForSinglePage : 当只有一页的时候，是否要隐藏视图
UIScrollView的分页效果只需要设置pagingEnabled=YES

  
- (void)viewDidLoad
{
    [super viewDidLoad];
    
    CGFloat w = self.view.frame.size.width;
    CGFloat h = self.view.frame.size.height;
    for (int i = 0; i< kCount; i++) {
        UIImageView *imageView = [[UIImageView alloc] init];
        
        // 1.设置frame
        imageView.frame = CGRectMake(i * w, 0, w, h);
        
        // 2.设置图片
        NSString *imgName = [NSString stringWithFormat:@"0%d.jpg", i + 1];
        imageView.image = [UIImage imageNamed:imgName];
        
        [_scrollView addSubview:imageView];
    }
    
    // height == 0 代表 禁止垂直方向滚动
    _scrollView.contentSize = CGSizeMake(kCount * w, 0);
    _scrollView.showsHorizontalScrollIndicator = NO;
    _scrollView.pagingEnabled = YES;  //用scrollView的Frame进行分页
    _scrollView.delegate = self;
    
    // 添加PageControl
    UIPageControl *pageControl = [[UIPageControl alloc] init];
    pageControl.center = CGPointMake(w * 0.5, h - 20);
    pageControl.bounds = CGRectMake(0, 0, 150, 50);
    pageControl.numberOfPages = kCount; // 一共显示多少个圆点（多少页）
    // 设置非选中页的圆点颜色
    pageControl.pageIndicatorTintColor = [UIColor redColor];
    // 设置选中页的圆点颜色
    pageControl.currentPageIndicatorTintColor = [UIColor blueColor];
    
    // 禁止默认的点击功能
    pageControl.enabled = NO;
    
    [self.view addSubview:pageControl];
    _pageControl = pageControl;
}

#pragma mark - UIScrollView的代理方法
#pragma mark 当scrollView正在滚动的时候调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    int page = scrollView.contentOffset.x / scrollView.frame.size.width;
//    NSLog(@"%d", page);
    
    // 设置页码
    _pageControl.currentPage = page;
}

iOS，Android，Java培训，期待与您的交流