iOS 開發之頭部滾動展示視圖

標籤：

效果：

 

//

//  RootViewController.m

//  頭部滾動展示視圖

//

//  Created by 寒竹子 on 15/4/1.

//  Copyright (c) 2015年 摩天居士. All rights reserved.

//  頭部滾動廣告視圖

 

#define SCREEN_SIZE [UIScreen mainScreen].bounds.size

#define KImageCnt 5

#define KImage_H  250

 

#import "RootViewController.h"

 

@interface RootViewController ()<UIScrollViewDelegate>

 

@property (nonatomic, strong) UIScrollView * scrollView;

@property (nonatomic, strong) UIPageControl * pageControl;

@property (nonatomic, strong) NSTimer * timer;

 

@end

 

@implementation RootViewController

 

/**

 *  scrollView

 */

- (UIScrollView *)scrollView

{

    if (_scrollView == nil) {

        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_SIZE.width, KImage_H)];

        _scrollView.pagingEnabled = YES;

        _scrollView.showsHorizontalScrollIndicator = NO;

    }

    

    return _scrollView;

}

 

/**

 *  PageControl

 */

- (UIPageControl *)pageControl

{

    if (_pageControl == nil) {

        _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, self.scrollView.frame.size.height - 30, SCREEN_SIZE.width, 20)];

        

        _pageControl.currentPageIndicatorTintColor = [UIColor colorWithRed:65 / 255.0 green:168 / 255.0 blue:100/255.0 alpha:1.0];

        _pageControl.pageIndicatorTintColor = [UIColor grayColor];

    }

    return _pageControl;

}

 

/**

 *  初始化UI

 */

- (void)setupUI

{

    [self.view addSubview:self.scrollView];

    [self.view addSubview:self.pageControl];

    

    CGFloat imageY = 0;

    CGFloat imageW = SCREEN_SIZE.width;

    CGFloat imageH = KImage_H;

    

    for (int i = 0; i < KImageCnt; i++) {

        UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i * imageW, imageY, imageW, imageH)];

        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"image_%i.jpg", i+1]];

        [self.scrollView addSubview:imageView];

    }

    

    // 設定scrollView屬性

    self.scrollView.contentSize = CGSizeMake(KImageCnt * imageW, 0);

    

    self.scrollView.delegate = self;

    self.pageControl.numberOfPages = KImageCnt;

    

    // 設定自動播放

    [self turnOnTimer];

}

 

/**

 *  開啟定時器

 */

- (void)turnOnTimer

{

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

    

    // 為了防止單線程弊端

    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];

}

 

/**

 *  關閉定時器

 */

- (void)turnOffTimer

{

    [self.timer invalidate];

    self.timer = nil;

}

 

/**

 *  自動播放圖片

 */

- (void)playImage

{

    int i = self.pageControl.currentPage;

    if (i == KImageCnt - 1) {

        i = -1;

    }

    i++;

    [self.scrollView setContentOffset:CGPointMake(i * self.scrollView.frame.size.width, 0) animated:YES];

}

 

- (void)viewDidLoad {

    [super viewDidLoad];

    

    [self setupUI];

}

 

#pragma mark - UIScrollViewDelegate

 

/**

 *  使用者準備拖拽的時候關閉定時器

 */

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView

{

    [self turnOffTimer];

}

 

/**

 *  使用者停止拖拽的時候新開啟一個定時器

 */

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate

{

    [self turnOnTimer];

}

 

// 判斷定時器滾動的時候 判斷滾動的位置 以讓pageControl顯示當前的page

// 在總寬度上加上半個scrollView的寬度 是為了實現拖動到一半時左右的效果

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

    self.pageControl.currentPage = (self.scrollView.frame.size.width * 0.5 + self.scrollView.contentOffset.x) / self.scrollView.frame.size.width;

}

 

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    

}

 

@end

 

iOS 開發之頭部滾動展示視圖