iOS:UIScrollView控件和UIPageControl控件的詳解

UIScrollView滾動視圖控件和UIPageControl分頁視圖控件：

   UIScrollView用於顯示多於一個屏幕的內容，超出屏幕范圍的內容可以通過滑動進行查看，當然UIPagecontrol也能實現圖片分頁查看。

   UIScrollView往往搭配UIPageControl一起使用，當UIScrollView進行滾動查看時，UIPagecontrol對應的分頁控制點也會相應的變動，反之亦然。

獲取當前分頁的頁碼:

    //頁碼 = (contentoffset.x + scrollView一半寬度)/單個scrollView寬度 

    //頁碼 = 滾動視圖可以滾動的總寬度/單個滾動視圖的寬度)

 

一、 UIScrollView常見屬性：

@interface UIScrollView : UIView <NSCoding> {

@property(nonatomic) CGPoint contentOffset; // UIScrollView當前滾動的位置

@property(nonatomic) CGSize  contentSize;    // 設置UIScrollView的滾動范圍(滾動圖大小)

@property(nonatomic) UIEdgeInsets  contentInset; // 這個屬性可以在四周增加滾動范圍(即增減周邊空白部分)

@property(nonatomic,assign) id<UIScrollViewDelegate> delegate; //滾動視圖的代理

@property(nonatomic,getter=isDirectionalLockEnabled) BOOL directionalLockEnabled; // 控件是否只在一個方向滾動

@property(nonatomic)  BOOL bounces;  // 是否有彈簧效果

@property(nonatomic)  BOOL    alwaysBounceVertical;  //設置垂直方向的彈簧效果

@property(nonatomic)  BOOL    alwaysBounceHorizontal; // 設置水平方向的彈簧效果

@property(nonatomic,getter=isPagingEnabled) BOOL  pagingEnabled; //控制控件是否整頁翻動

@property(nonatomic,getter=isScrollEnabled) BOOL  scrollEnabled;  //是否能滾動

@property(nonatomic)  BOOL    showsHorizontalScrollIndicator; // 是否顯示水平方向的滾動條

@property(nonatomic)  BOOL    showsVerticalScrollIndicator;   // 是否顯示垂直方向的滾動條

@property(nonatomic)  UIEdgeInsets  scrollIndicatorInsets;  // 設置滾動范圍

@property(nonatomic)  UIScrollViewIndicatorStyle   indicatorStyle;  //設置滾動條樣式

@property(nonatomic)  CGFloat     decelerationRate ; //設置手指放開后的減速率 

@property(nonatomic) CGFloat zoomScale  //放縮比例

@property(nonatomic) BOOL  bouncesZoom   //是否實現所給的彈簧比例

@property(nonatomic) BOOL  scrollsToTop  //是否能夠滾動到頂部

}@end

UIScrollView常見方法：

- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated; // 以恆定速度為動畫設置新的偏移量

- (void)scrollRectToVisible:(CGRect)rect animated:(BOOL)animated; //設置由rect定義的區域僅僅是滾動視圖內是可見的

- (void)flashScrollIndicators;  //閃一下滾動條,暗示是否有可滾動的內容

二、UIScrollView手勢縮放

設置UIScrollView的id<UISCrollViewDelegate> delegate代理對象

設置minimumZoomScale ：縮小的最小比例

設置maximumZoomScale ：放大的最大比例

讓代理對象實現下面的方法，返回需要縮放的視圖控件

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

跟縮放相關的常用方法還有

-(void)scrollViewDidZoom:(UIScrollView *)scrollView 正在縮放的時候調用

-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale  縮放完畢的時候調用

三、 UIPagecontrol分頁效果

設置pagingEnabled=YES即可，UIScrollView會被分割成多個獨立頁面，用戶的滾動體驗則變成了頁面翻轉

一般會配合UIPageControl增強分頁效果

 UIPageControl常用屬性：

 

NSInteger numberOfPages : 總頁數

NSInteger currentPage : 當前的頁碼

BOOL hidesForSinglePage : 當只有一頁的時候，是否要隱藏視圖

@property(nonatomic,retain) UIColor *pageIndicatorTintColor;設置控制器頁碼點得顏色

@property(nonatomic,retain) UIColor *currentPageIndicatorTintColor;設置控制器當前所在頁碼點的顏色

監聽UIPageControl的頁面改變：

// 添加監聽器

[pageControl addTarget:self action:@selector(pageChange:) 

forControlEvents:UIControlEventValueChanged];

// 監聽方法

- (void)pageChange:(UIPageControl *)pageControl

{  

}

四、UIScrollView滾動視圖要實現的協議：UIScrollViewDelegate

@protocol UIScrollViewDelegate<NSObject>

@optional

- (void)scrollViewDidScroll:(UIScrollView *)scrollView；//正在執行滾動視圖的滾動操作時調用

- (void)scrollViewDidZoom:(UIScrollView *)scrollView ; //正在執行滾動視圖的放縮操作時調用

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;//執行滾動視圖的拖拽開始時調用

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset ; //執行滾動視圖的拖拽結束時調用

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;//執行滾動視圖的拖拽結束時調用(是否減速)

- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView; // 執行滾動視圖減速開始時調用 

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;  // 執行滾動視圖減速結束時調用  

- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView; //滾動視圖動畫結束時調用

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;//執行滾動視圖放縮時返回新的視圖    

- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view ; //滾動視圖放縮開始時調用

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale; //滾動視圖放縮結束時調用

- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;  //滾動視圖是否滾動到頂部 

- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;   //滾動視圖滾動到頂部時調用

@end

 

 

代碼范例解析：

  一、單張圖片案例：

   (1)

    //設置imageView，獲取圖片資源

    UIImage *img = [UIImage imageNamed:@"landscape.jpg"];

    self.imageview = [[UIImageView alloc]init];

    [self.imageview setImage:img];

    self.imageview.contentMode = UIViewContentModeScaleAspectFit;//防止圖片在變換的過程中失真

    self.imageview.frame = CGRectMake(0, 0, img.size.width, img.size.height);

        

    //設置scrollView(位置和大小即 origin.x 、origin.y、 size.width 、size.height)

    self.scrollview.contentSize = img.size; //直接將滾動視圖中存放內容的范圍大小設置為圖片的大小

    self.scrollview.contentOffset = CGPointZero;//默認origin.x = 0,orgin.y = 0

    

    //彈簧效果(所謂彈簧效果就是不論圖片被拽托到滾動圖內那兒松開后都會返回原來的位置上)

    self.scrollview.bounces = NO;

    

    //添加四條邊距(相當於相框部分)

    self.scrollview.contentInset = UIEdgeInsetsMake(10, 10, 10, 10);

    

    //滾動效果(圖片太大時,能否拖拽着移動查看其他部分)

    self.scrollview.scrollEnabled = YES;

    

    //滾動條的設置(類似於滑塊,有上下滑動的，也有左右滑動的)

    //self.scrollview.showsHorizontalScrollIndicator = NO;//水平方向

    //self.scrollview.showsVerticalScrollIndicator = NO;  //垂直方向

    

    //設置滾動條的樣式

    self.scrollview.indicatorStyle = UIScrollViewIndicatorStyleBlack;

    

    //將視圖添加到滾動視圖中

    [self.scrollview addSubview:self.imageview];

 

    //將視圖設置到滾動視圖最后面(如果在滾動視圖上添加其他的控件如UIButton，采取這種方式可以避免button控件被圖片遮蓋)

    [self.scrollview sendSubviewToBack:self.imageview];

  

    //設置滾動視圖的代理

    self.scrollview.delegate = self;

    

    //設置滾動視圖的放大和縮小的系數

    self.scrollview.minimumZoomScale = 0.8;

    self.scrollview.maximumZoomScale = 2.0;

    

   //將滾動視圖添加到視圖中

    [self.view addSubview:self.scrollview];

 

 //添加按鈕事件來滾動圖片

   - (IBAction)buttonClicked:(UIButton *)sender

    {

       CGPoint point = self.scrollview.contentOffset;

       self.scrollview.contentOffset = CGPointMake(point.x+20, point.y);

     }

 

 //代理實現UIScrollView的方法

    #pragma mark - UIScrollView

 

   - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView  //實現圖片的放縮

 

      {

   　　 return  self.imageview;

 

　　}

 

   -(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale

 

     {

 

   　　 NSLog(@"view:%@,scale:%f",view,scale); //輸出放縮后的視圖信息和放縮系數

 

     }

 

 二、圖片輪轉播放器案例：

 

  具體代碼如下：

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate> //實現滾動視圖協議
@property (strong,nonatomic)UIScrollView *scrollview; //滾動視圖控件對象  5 @property (strong,nonatomic)UIPageControl *pagecontrol;//分頁控制控件對象  6 @end

@implementation ViewController  9 
- (void)viewDidLoad { 11  [super viewDidLoad]; 12     //創建ScrollView並初始化
    self.scrollview = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)]; 14     //將滾動視圖添加到視圖控制器控制的視圖View容器中
 [self.view addSubview:self.scrollview]; 16     
    
    //創建5個imageView對象並加載圖片
    CGFloat x = 0; 20     CGFloat y = 0; 21     UIImage *image; 22     for(int i=0; i<5; i++) 23  { 24         UIImageView *imageview = [[UIImageView alloc]init]; 25         image = [UIImage imageNamed:[NSString stringWithFormat:@"s%d.jpg",i+1]]; 26  [imageview setImage:image]; 27         //設置每一個圖像視圖imageView的frame矩形區域
        imageview.frame = CGRectMake(x+self.view.frame.size.width*i, y, self.view.frame.size.width, image.size.height); 29         //設置圖像模式，使圖片變動時，圖片不失真
        imageview.contentMode = UIViewContentModeScaleAspectFit; 31         //將圖像視圖添加到滾動視圖容器中
 [self.scrollview addSubview:imageview]; 33  } 34     
    //設置scrollView
    self.scrollview.contentSize = CGSizeMake(5*self.view.frame.size.width, self.view.frame.size.height);//有多少圖片,那么滾動視圖的滾動寬度就等於圖片數量乘以你所設置的單個滾動視圖矩形區域的寬度 37     self.scrollview.contentOffset = CGPointZero;//默認滾動視圖的初始原點位置都為0 38     self.scrollview.pagingEnabled = YES;//設置滾動視圖可以進行分頁 39     self.scrollview.delegate = self;//設置滾動視圖的代理 40     
    //創建初始化並設置PageControl
    self.pagecontrol = [[UIPageControl alloc]init]; 43     self.pagecontrol.bounds = CGRectMake(0, 0, 100, 50); 44     self.pagecontrol.center = self.view.center; 45     self.pagecontrol.numberOfPages = 5; //因為有5張圖片，所以設置分頁數為5 46     self.pagecontrol.currentPage  = 0; //默認第一頁頁數為0 47     //設置分頁控制點顏色
    self.pagecontrol.pageIndicatorTintColor = [UIColor redColor];//未選中的顏色 49     self.pagecontrol.currentPageIndicatorTintColor = [UIColor greenColor];//選中時的顏色 50     //添加分頁控制事件用來分頁
 [self.pagecontrol addTarget:self action:@selector(pageControlChanged:) forControlEvents:UIControlEventValueChanged]; 52     //將分頁控制視圖添加到視圖控制器視圖中
 [self.view addSubview:self.pagecontrol]; 54     //設置試圖控制器背景色為黑色
    self.view.backgroundColor = [UIColor blackColor]; 56 } 57 #pragma mark - pageControll的事件響應
-(void)pageControlChanged:(UIPageControl*)sender 59 { 60     /*
 //NSLog(@"%ld",sender.currentPage); 62  CGRect frame; 63  frame.origin.x = self.scrollview.fram 64  e.size.width * sender.currentPage; 65  frame.origin.y = 0; 66  frame.size = self.scrollview.frame.size; 67  [self.scrollview scrollRectToVisible:frame animated:YES]; 68     */
    或者
    //計算scrollview相應地contentOffset
    CGFloat x = sender.currentPage * self.scrollview.frame.size.width; 72     self.scrollview.contentOffset = CGPointMake(x,0); 73     
} 75 
#pragma mark - scrollView的代理方法
-(void)scrollViewDidScroll:(UIScrollView *)scrollView 78 { 79     //計算pagecontroll相應地頁(滾動視圖可以滾動的總寬度/單個滾動視圖的寬度=滾動視圖的頁數)
    NSInteger currentPage = (int)(scrollView.contentOffset.x) / (int)(self.view.frame.size.width); 81     self.pagecontrol.currentPage = currentPage;//將上述的滾動視圖頁數重新賦給當前視圖頁數,進行分頁 82 } 83 @end