IOS基礎UI之(九) UIPageControl結合UIScrollView實現分頁效果 – iPhone手機開發 iPhone軟體開發教學課程

上一章已經介紹瞭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];
}

 

 

發佈留言