UIScrollView實現圖片循環滾動

首先,準備工做就不說了,新建一個工程,建立一個 UIViewController 子類,並在應用中加入三個圖片(1,2,3.jpg)app

設置建立的 UIViewController 子類 爲應用根視圖控制對象spa

    AXRollController *rollController = [[AXRollController alloc] init];
    [[self window] setRootViewController:rollController];

在 UIViewController 子類中添加 scrollView,imageViewOne,imageViewTwo,imageViewThree 實例變量。並重寫 viewDidLoad 方法,初始化實例變量,將 ImageView 的視圖都加入到 scrollView 的子視圖代理

    /* 獲取應用屏幕Frame */
    CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
    /* 建立 UIScrollView, 並加入視圖控制器視圖 */
    scrollView = [[UIScrollView alloc] initWithFrame:screenRect];
    [scrollView setPagingEnabled:YES];
    [[self view] addSubview:scrollView];
    /* 得到 scroll 取景, 設置三倍寬度 */
    CGRect bigRect = screenRect;
    bigRect.size.width *= 3.0;
    /* 設置取景寬度 */
    [scrollView setContentSize:bigRect.size];
    
    /* 建立第一個 UIImageView, 並加入到 scrollView */
    imageViewOne = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.jpg"]];
    [imageViewOne setContentMode:UIViewContentModeScaleAspectFit];
    [scrollView addSubview:imageViewOne];
    
    /* 建立第二個 UIImageView, 並加入到 scrollView */
    imageViewTwo = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"2.jpg"]];
    [imageViewTwo setContentMode:UIViewContentModeScaleAspectFit];
    [scrollView addSubview:imageViewTwo];
    
    /* 建立第三個 UIImageView, 並加入到 scrollView */
    imageViewThree = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"3.jpg"]];
    [imageViewThree setContentMode:UIViewContentModeScaleAspectFit];
    [scrollView addSubview:imageViewThree];
    
    /* 初始化三個 UIImageView 的 Frame */
    [self setAllViewFrame];
    
    /* 設置 scrollView 初始偏移量, 顯示第二個 UIImageView */
    CGPoint p = CGPointZero;
    p.x = scrollView.frame.size.width;
    [scrollView setContentOffset:p animated:NO];
    /* 設置代理對象 */
    [scrollView setDelegate:self];

setAllViewFrame,設置三個 UIImageView 的 Framecode

    [imageViewOne setFrame:CGRectMake(scrollView.frame.origin.x,  scrollView.frame.origin.y, scrollView.frame.size.width, scrollView.frame.size.height)];
    [imageViewTwo setFrame:CGRectMake(scrollView.frame.size.width, scrollView.frame.origin.y, scrollView.frame.size.width, scrollView.frame.size.height)];
    [imageViewThree setFrame:CGRectMake(scrollView.frame.size.width * 2, scrollView.frame.origin.y, scrollView.frame.size.width, scrollView.frame.size.height)];

實現 UIScrollerView 的代理方法,scrollViewDidEndDecelerating:。當前 page(0,1[當前],2) 頁爲 1,則表明未動,返回;當前 page 頁爲 0,則表明右移,0->1/2->0/1->2;當前 page 頁爲 1,則表明左移,3->1/0->3/1->0。對象

    NSLog(@"%@", NSStringFromSelector(_cmd));
    CGFloat pageWidth = scrView.frame.size.width;
    NSLog(@"pageWidth = %f", pageWidth);
    NSLog(@"offset = %f", scrView.contentOffset.x);
    int page = floor((scrView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    NSLog(@"page = %d", page);
    if (page == 1) {
        /* 當前頁,未動,返回 */
        return;
    } else if (page == 0) {
        /* 前一頁,右移 */
        [self imageMoveToRight];
    } else {
        /* 前一頁,左移 */
        [self imageMoveToLeft];
    }
    CGPoint p = CGPointZero;
    p.x = pageWidth;
    [scrView setContentOffset:p animated:NO];

右移的方法,imageMoveRight圖片

    UIImageView *tempView = imageViewTwo;
    imageViewTwo = imageViewOne;
    imageViewOne = imageViewThree;
    imageViewThree = tempView;
    /* 重設置全部 UIImageView 視圖 Frame */
    [self setAllViewFrame];

左移的方法,imageMoveLeftcmd

    UIImageView *tempView = imageViewTwo;
    imageViewTwo = imageViewThree;
    imageViewThree = imageViewOne;
    imageViewOne = tempView;
    /* 重設置全部 UIImageView 視圖 Frame */
    [self setAllViewFrame];

基於 Xcode 5.0.2 編寫it

相關文章
相關標籤/搜索