iOS開發UI篇—UIScrollView控制項實現圖片輪播

標籤：

iOS開發UI篇—UIScrollView控制項實現圖片輪播

一、實現效果

實現圖片的自動輪播

          

二、實現代碼

storyboard中布局

代碼：

  1 #import "YYViewController.h"  2   3 @interface YYViewController () <UIScrollViewDelegate>  4 @property (weak, nonatomic) IBOutlet UIScrollView *scrollview;  5 /**  6  *  頁碼  7  */  8 @property (weak, nonatomic) IBOutlet UIPageControl *pageControl;  9  10 @property (nonatomic, strong) NSTimer *timer; 11 @end 12  13 @implementation YYViewController 14  15 - (void)viewDidLoad 16 { 17     [super viewDidLoad]; 18      19 //    圖片的寬 20     CGFloat imageW = self.scrollview.frame.size.width; 21 //    CGFloat imageW = 300; 22 //    圖片高 23     CGFloat imageH = self.scrollview.frame.size.height; 24 //    圖片的Y 25     CGFloat imageY = 0; 26 //    圖片中數 27     NSInteger totalCount = 5; 28 //   1.添加5張圖片 29     for (int i = 0; i < totalCount; i++) { 30         UIImageView *imageView = [[UIImageView alloc] init]; 31 //        圖片X 32         CGFloat imageX = i * imageW; 33 //        設定frame 34         imageView.frame = CGRectMake(imageX, imageY, imageW, imageH); 35 //        設定圖片 36         NSString *name = [NSString stringWithFormat:@"img_0%d", i + 1]; 37         imageView.image = [UIImage imageNamed:name]; 38 //        隱藏指示條 39         self.scrollview.showsHorizontalScrollIndicator = NO; 40          41         [self.scrollview addSubview:imageView]; 42     } 43      44 //    2.設定scrollview的滾動範圍 45     CGFloat contentW = totalCount *imageW; 46     //不允許在垂直方向上進行滾動 47     self.scrollview.contentSize = CGSizeMake(contentW, 0); 48      49 //    3.設定分頁 50     self.scrollview.pagingEnabled = YES; 51      52 //    4.監聽scrollview的滾動 53     self.scrollview.delegate = self; 54      55     [self addTimer]; 56 } 57  58 - (void)nextImage 59 { 60     int page = (int)self.pageControl.currentPage; 61     if (page == 4) { 62         page = 0; 63     }else 64     { 65         page++; 66     } 67      68 //  滾動scrollview 69     CGFloat x = page * self.scrollview.frame.size.width; 70     self.scrollview.contentOffset = CGPointMake(x, 0); 71 } 72  73 // scrollview滾動的時候調用 74 - (void)scrollViewDidScroll:(UIScrollView *)scrollView 75 { 76     NSLog(@"滾動中"); 77 //    計算頁碼 78 //    頁碼 = (contentoffset.x + scrollView一半寬度)/scrollView寬度 79     CGFloat scrollviewW =  scrollView.frame.size.width; 80     CGFloat x = scrollView.contentOffset.x; 81     int page = (x + scrollviewW / 2) /  scrollviewW; 82     self.pageControl.currentPage = page; 83 } 84  85 // 開始拖拽的時候調用 86 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView 87 { 88 //    關閉定時器(注意點; 定時器一旦被關閉,無法再開啟) 89 //    [self.timer invalidate]; 90     [self removeTimer]; 91 } 92  93 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate 94 { 95 //    開啟定時器 96     [self addTimer]; 97 } 98  99 /**100  *  開啟定時器101  */102 - (void)addTimer{103     104     self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];105 106 }106 /**107  *  關閉定時器108  */109 - (void)removeTimer110 {111     [self.timer invalidate];112 }113 @end

提示：以下兩個屬性已經和storyboard中的控制項進行了連線。

@property (weak, nonatomic) IBOutletUIScrollView *scrollview;

@property (weak, nonatomic) IBOutletUIPageControl *pageControl;

補充：定時器NSTimer

   定時器 適合用來隔一段時間做一些間隔比較長的操作

 NSTimeInterval:多長多件操作一次

 target :操作誰

 selector : 要操作的方法

 userInfo: 傳遞參數

 repeats: 是否重複

  self.timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];

iOS開發UI篇—UIScrollView控制項實現圖片輪播