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 ()<UIScrollViewDelegate>
{
    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

上面的代碼就是簡單實現了一個輪播圖的效果，當然這個輪播圖不能實現循環輪播和自動滾動。下一篇文章詳細記錄。