1. 程式人生 > >iOS開發UI基礎—29UIScrollView控制元件實現圖片輪播

iOS開發UI基礎—29UIScrollView控制元件實現圖片輪播

一、實現效果

實現圖片的自動輪播

          

二、實現程式碼

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 [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes]; 106 } 107 /** 108 * 關閉定時器 109 */ 110 - (void)removeTimer 111 { 112 [self.timer invalidate]; 113 } 114 @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];