IOS基礎UI之(九) UIPageControl結合UIScrollView實現分頁效果

IOS基礎UI之(九) UIPageControl結合UIScrollView實現分頁效果

上一章已經介紹了UIScrollView，現在使用 UIPageControl結合UIScrollView實現分頁效果。話不多說，馬上看看！！！

一： UIPageControl屬性和方法

 

   //一共有多少頁    @property(nonatomic) NSInteger numberOfPages;        //當前顯示的頁碼    @property(nonatomic) NSInteger currentPage;        //只有一頁時，是否需要隱藏頁碼指標    @property(nonatomic) BOOL hidesForSinglePage;        //這個屬性如果設定為YES，點擊時並不會改變控制器顯示的當前頁碼點，必須手動調用 - (void)updateCurrentPageDisplay;    //這個方法，才會更新。    @property(nonatomic) BOOL defersCurrentPageDisplay;        //除當前頁碼外其他頁碼指標的顏色    @property(nullable, nonatomic,strong) UIColor *pageIndicatorTintColor        //當前頁碼指標的顏色    @property(nullable, nonatomic,strong) UIColor *currentPageIndicatorTintColor        //更新控制器當前頁碼    - (void)updateCurrentPageDisplay;        //用於頁數會變化的情況下進行大小動態處理    - (CGSize)sizeForNumberOfPages:(NSInteger)pageCount;

 

 

 

二、圖片輪播例子

1.匯入圖片，storyboard布局UIPageControl結合UIScrollView（略）

 

2.設定UIScrollVIew的內容，尺寸，設定可分頁。設定UIPageControl的總頁數

 

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;- (void)viewDidLoad {    [super viewDidLoad];            CGFloat imgY = 0;    CGFloat width = self.scrollView.frame.size.width;    CGFloat height = self.scrollView.frame.size.height;    // 1.添加5張圖片到scrollView中    ZXHImageCount圖片個數    for (int i = 0; i
 
 
3.定義定時器
/** *  定時器 */@property(strong,nonatomic) NSTimer *timer;/** *  定時器 */-(void)addTimer{    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];}/** *  停止定時器 */-(void)stopTimer{    [self.timer invalidate];    self.timer = nil;}
 
 

4.定時器調用顯示下一張圖片
 
-(void)nextImage{    // 1.增加pageControl的頁碼    int page = 0;    if (self.pageControl.currentPage != ZXHImageCount - 1) {        page = (int)self.pageControl.currentPage + 1;    }        // 2.計算scrollView滾動的位置    CGFloat offSetX = page * self.scrollView.frame.size.width;    CGPoint point =  CGPointMake(offSetX,0);    //self.scrollView.contentOffset = point;    [self.scrollView setContentOffset:point animated:YES];    //線程    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];}


 
5.手動拖拽停止定時器自動翻頁，拖拽停止時開始自動翻頁。
 
#pragma mark 代理方法/** *  當scrollView正在滾動就會調用 * *  @param scrollView */-(void)scrollViewDidScroll:(UIScrollView *)scrollView{    // 根據scrollView的滾動位置決定pageControl顯示第幾頁    CGFloat imageWidth = self.scrollView.frame.size.width;    int page = (self.scrollView.contentOffset.x + imageWidth * 0.5)/imageWidth;    self.pageControl.currentPage = page;}/** *  開始拖拽的時候調用 */-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{    //停止定時器    [self stopTimer];}/** *  停止拖拽的時候調用 */-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{    //開啟定時器    [self addTimer];}