黑馬程序員_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培訓，期待與您的交流