IOS05UIScrollView介紹圖片輪播器

2019-11-14 18:44:50

字體：大中小

來源：轉載

供稿：網友

移動設備的屏幕?大?小是極其有限的,因此直接展?示在?用戶眼前的內容也相當有限
當展?示的內容較多,超出?一個屏幕時,?用戶可通過滾動?手勢來查看屏幕以外的內容
普通的UIView不具備滾動功能,不能顯?示過多的內容
UIScrollView是?一個能夠滾動的視圖控件,可以?用來展?示?大量的內容,并且可以通過滾動查看所有的內容
在IOS中UIScrollView這個控件還是比較常用和重要的。
很多時候,我們想在UIScrollView正在滾動或滾動到某個位置或者停?止滾動時做?一些特定的操作

要想完成上述功能,前提條件就是能夠監聽到UIScrollView的整個滾動過程

• 當UIScrollView發?生?一系列的滾動操作時, 會?自動通知它的代理(delegate)對象,給

它的代理發送相應的消息,讓代理得知它的滾動情況
• 也就是說,要想監聽UIScrollView的滾動過程,就必須先給UIScrollView設置?一個代理

對象,然后通過代理得知UIScrollView的滾動過程

// ?用戶開始拖拽時調?用
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
// 滾動到某個位置時調?用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;
// ?用戶結束拖拽時調?用
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;

UIScrollView的常?見屬性

• @PRoperty(nonatomic)CGPointcontentOffset; ? 這個屬性?用來表?示UIScrollView滾動的位置

• @property(nonatomic)CGSizecontentSize;
? 這個屬性?用來表?示UIScrollView內容的尺?寸,滾動范圍(能滾多遠)

• @property(nonatomic)UIEdgeInsetscontentInset;? 這個屬性能夠在UIScrollView的4周增加額外的滾動區域

2 介紹完UIScrollView的基本屬性，下面做一個小的圖片輪播器程序：

2.1程序截圖如下圖。

2.2這個程序上有5個圖，當滑動屏幕時，屏幕上的圖片也會跟著變化，同時導航按鍵也會跟著變動，同時如果不滑動屏幕時，每過兩秒，屏幕圖片也自己變化，程序就是這么個功能，在很多APP中可以常看到，下面講代碼。

2.3 設計視圖，視圖比較簡單，只有一個Scroll View和一個page control,如下：

2.4 視圖設計好以后，然后導入圖片到項目中，這里我們簡單點做就把圖片放到項目中Imagees.xcassets中。

2.5 做完這些之后，然后就要寫代碼實現功能了，第1步，創建Scroll View和page control的屬性，如何創建屬性不講了。

//Scroll View屬性

@property (weak, nonatomic) IBOutlet UIScrollView *ScllView;

//pageControl屬性

@property (weak, nonatomic) IBOutlet UipageControl *PageControl;

2.6 創建完視圖上的兩個控件的屬性后，我們就要開始讀取圖片保存然后保存到Scroll View中了，代碼如下：

 //創建UIImageView在Scrool view中的位置    //W.H,Y值對是一樣的，但每個UIImageView的X值就會不一樣了    CGFloat FloatW=self.ScllView.frame.size.width;    CGFloat FloatH=self.ScllView.frame.size.height;    CGFloat FloatY=0;        //這里5張圖片寫死了，循環所有圖片    //創建UIimageView,然后設置每個UIimageView的位置，    for (int i=0; i<imageCont; i++) {                UIImageView *imageView=[[UIImageView alloc] init];                //計算X值，        CGFloat FloatX=i*FloatW;            imageView.frame=CGRectMake(FloatX, FloatY, FloatW, FloatH);                NSString *imagename=[NSString stringWithFormat:@"img_0%i",i+1];        imageView.image=[UIImage imageNamed:imagename];                //把UIImageView增加到Scroll View中        [self.ScllView addSubview:imageView];            }

View Code

在這里最主要的就是要計算每個UIiamgeView的X值了，其實X值也簡單因為每個圖片的W值和Scroll View一樣，所以每個UIiamgeView的X值就可以*ScllView.frame.size.width值就可以了。

2.7這樣我們就把圖片全部加到視圖上的Scroll View 中了，然后就要讓Scrool View里面的圖片可以滑動，要讓Scrool View里面的圖片可以滑動，我們就要用到代理，用到代理就要導入UIScrollViewDelegate，如下：

@interface ViewController ()<UIScrollViewDelegate>

導入完UIScrollViewDelegate后，然后設置Scrool View相對應的屬性：

PagingEnabled這個分頁的屬性是每一次滑動都是滑動一整個圖片，讓屏幕只能顯示一張完整的圖片，

同時設置視圖中page control控件的個數，當然這個個數和圖片的個數是一樣多的。

 //2.滾動視圖的內容的大小    self.ScllView.contentSize=CGSizeMake(FloatW *imageCont, 0);        //去掉水平指示器    self.ScllView.showsHorizontalScrollIndicator=NO;        //設置分頁    self.ScllView.pagingEnabled=YES;        //設置pageControl顯示的頁數    self.PageControl.numberOfPages=imageCont;

2.8 做完這些，屏幕上的圖片就可能自由的滑動了，但有個小問題是屏幕上的page control這個控件不會當屏幕圖片變動時也跟著變動，

這個如何實現呢?這個要在代理方法中來做，如下：

//設置代理

self.ScllView.delegate=self;

//代理方法//代理自帶方法，視圖正在滾動的時候一直在執行-(void)scrollViewDidScroll:(UIScrollView *)scrollView{    CGFloat scrolViewW=self.ScllView.frame.size.width;            CGFloat pageCount=(self.ScllView.contentOffset.x+scrolViewW *0.5)/scrolViewW;        self.PageControl.currentPage=pageCount;}

這樣，整個圖片播放器就OK了，下面再來做個定時播放功能，當程序起動時，自動播放，多的不說了，直接上所有代碼：如下

#import "ViewController.h"#define imageCont 5@interface ViewController ()<UIScrollViewDelegate>//Scroll View屬性@property (weak, nonatomic) IBOutlet UIScrollView *ScllView;//pageControl屬性@property (weak, nonatomic) IBOutlet UIPageControl *PageControl;//定時器@property(strong,nonatomic)NSTimer *timer;@end@implementation ViewController//去掉手機最上面的狀態顯示-(BOOL)prefersstatusBarHidden{    return YES;}- (void)viewDidLoad{    [super viewDidLoad];        //創建UIImageView在Scrool view中的位置    //W.H,Y值對是一樣的，但每個UIImageView的X值就會不一樣了    CGFloat FloatW=self.ScllView.frame.size.width;    CGFloat FloatH=self.ScllView.frame.size.height;    CGFloat FloatY=0;        //這里5張圖片寫死了，循環所有圖片    //創建UIimageView,然后設置每個UIimageView的位置，    for (int i=0; i<imageCont; i++) {                UIImageView *imageView=[[UIImageView alloc] init];                //計算X值，        CGFloat FloatX=i*FloatW;            imageView.frame=CGRectMake(FloatX, FloatY, FloatW, FloatH);                NSString *imagename=[NSString stringWithFormat:@"img_0%i",i+1];        imageView.image=[UIImage imageNamed:imagename];                //把UIImageView增加到Scroll View中        [self.ScllView addSubview:imageView];            }     //2.滾動視圖的內容的大小    self.ScllView.contentSize=CGSizeMake(FloatW *imageCont, 0);        //去掉水平指示器    self.ScllView.showsHorizontalScrollIndicator=NO;        //設置分頁    self.ScllView.pagingEnabled=YES;        //設置pageControl顯示的頁數    self.PageControl.numberOfPages=imageCont;        //設置代理    self.ScllView.delegate=self;        [self addTime];}//創建定時器方法-(void)addTime{    self.timer=[NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES ];        [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];}//移除計時器-(void)removeTime{    [self.timer invalidate];    self.timer = nil;}-(void)nextPage{    int page=0;        if(self.PageControl.currentPage==imageCont-1)    {        page=0;    }    else    {        page=self.PageControl.currentPage+1;    }    CGPoint point=CGPointMake(page *self.ScllView.frame.size.width, 0);        //設置Scroll View 要顯示的圖片    [self.ScllView setContentOffset:point animated:YES];    }//代理方法//代理自帶方法，視圖正在滾動的時候一直在執行-(void)scrollViewDidScroll:(UIScrollView *)scrollView{    CGFloat scrolViewW=self.ScllView.frame.size.width;            CGFloat pageCount=(self.ScllView.contentOffset.x+scrolViewW *0.5)/scrolViewW;        self.PageControl.currentPage=pageCount;}-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{    //會將計時器永久關掉    [self removeTime];}-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)d{       [self addTime];}@end