ScrollView（2）輪播圖－點擊跳轉

輪播圖的實現就是使用的ScrollView.它具備滑動切換功能。咱們在淘寶上、新聞頁看到的圖片能夠選擇滾動的都是用ScrollView實現的。在輪播圖中用到的屬性有：UIPageControl 、UIView、UIScrollView 、UITableViewDelegate。並設置爲全局變量。

UIPageControl *_pageControl;
UIView *_headerView;
UIScrollView *_headScrollView;

 

用Main.storyboard直接設置。

在viewController.h中寫入代碼：

//連線
@property (weak, nonatomic) IBOutlet UITableView *tableView;
//圖片存放數組
@property(nonatomic,strong)NSMutableArray *imageArray;

具體寫法以下：

步驟：

1. 對於tableView 應該先設置代理；
2. 將圖片循環添加到數組imageArray中；
3. 建立一個視圖，並將其設置爲tableView的頭視圖；
4. 建立headScrollView視圖，並設置其一系列的屬性：啓用翻頁、滾動條、代理（tableView繼承於scrollView，只寫tableView代理也能夠）等；將其加載到頭視圖中（觸摸都處於打開狀態）；
5. 設置pageControl及其屬性－大小、頁數、偏移量。
6. ScrollView的DidEndDecelerating（當滾動視圖嘎然而止），顯示當前的圖片。
7. 設置button。

根據以上步驟代碼以下：

建立頭視圖、scrollView：

 1 //頭視圖
 2 - (void)createHeadView {
 3     //建立UIView存放scroll和pageContrpl
 4     _headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 200)];
 5     //設爲頭視圖
 6     _tableView.tableHeaderView = _headerView;
 7     
 8 }
 9 //建立headScrollView
10 - (void)createHeaderScrollView {
11     // 建立滑動視圖
12     _headScrollView = [[UIScrollView alloc] initWithFrame:_headerView.bounds];
13     _headScrollView.contentSize = CGSizeMake(kScreenWidth * (_imageArray.count + 2), 200);
14     //啓用翻頁功能
15     _headScrollView.pagingEnabled = YES;
16     //要設置偏移量才能夠實現下面 剛進入圖片顯示第一張（前面還有一張圖片，因此要偏移一個屏寬）
17     _headScrollView.contentOffset = CGPointMake(kScreenWidth, 0);
18     _headScrollView.tag = 99;
19     //設置代理（tableView繼承於scrollView，只寫tableView代理也能夠）
20     _headScrollView.delegate = self;
21     //隱藏水平滾動條
22     _headScrollView.showsHorizontalScrollIndicator = NO;
23     [_headerView addSubview:_headScrollView];
24 }

設置pageControl和scrollView中止滾動後的方法：

 1 //設置pageControl
 2 - (void)pageControl {
 3     //pageControl的大小
 4     _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 170, kScreenWidth, 30)];
 5     //設置頁數
 6     _pageControl.numberOfPages = _imageArray.count;
 7     //已進入當前顯示,還要設置偏移量來指定位置
 8     _pageControl.currentPage = 0;
 9     [_headerView addSubview:_pageControl];
10 }
11 //scrollView滾動中止後的方法
12 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
13     //計算頁數
14     if (scrollView.tag == 99) {
15         NSInteger index = scrollView.contentOffset.x/kScreenWidth;
16         NSInteger pageIndex = index - 1;
17         if (index == _imageArray.count + 1) {
18             scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
19             pageIndex = 0;
20         }else if (index == 0) {
21             scrollView.contentOffset = CGPointMake(kScreenWidth *  (_imageArray.count), 0);
22             pageIndex = _imageArray.count - 1;
23             
24         }
25         _pageControl.currentPage = pageIndex;
26     }
27 }

添加了一項能夠點擊的功能，即將button添加在scrollView上：

 1 //設置 button
 2 - (void)buttonImage {
 3     //設置圖片
 4     for (int i = 0; i < _imageArray.count + 2; i ++) {
 5         UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
 6         button.frame = CGRectMake(i * kScreenWidth, 0, kScreenWidth, 200);
 7         button.tag = i + 99;
 8         NSInteger index = i - 1;
 9         // 實現輪播功能
10         if (i == 0) {
11             index = _imageArray.count - 1;
12         }else if(i == _imageArray.count + 1) {
13             index = 0;
14         }
15         //將圖片設置爲button背景圖片
16         [button setBackgroundImage:_imageArray[index] forState:UIControlStateNormal];
17         // 點擊事件
18         [button addTarget:self action:@selector(imageButtonAction:) forControlEvents:UIControlEventTouchUpInside];
19         //添加顯示
20         [_headScrollView addSubview:button];
21     }
22 }

輪播功能就是最後一張圖片完成後，跳到第一張，也就是說，好比有5張圖，要設置7個圖大小的空間，第一張左滑顯示第五張，第五張右滑顯示第一張，例如：E-A-B-C-D-E-A.其實是視覺上的「欺騙「。我在ScrollView（1）中寫的方法要比如今這種簡單易用，推薦第一種方法。

點擊圖片實現跳轉的方法。

 1 #pragma mark-
 2 #pragma mark- button事件方法
 3 - (void)imageButtonAction:(UIButton *)button{
 4     //輪播圖通常只有幾個，所以能夠這樣判斷跳轉（若是多了 就不能夠這樣了）
 5     NSInteger index = button.tag - 99;
 6     if (index == 1) {
 7             FirstViewController *firstVC = [[FirstViewController alloc] init];
 8         [self.navigationController pushViewController:firstVC animated:YES];
 9     }else if (index == 2) {
10         SecondViewController *secondVC = [[SecondViewController alloc] init];
11         [self.navigationController pushViewController:secondVC animated:YES];
12     }
13 }

 跳轉是用的navigationController，使用push方法跳到另外一個界面。只是在兩個Controller中寫了title（重寫init方法），沒有作更多的操做，畢竟是scrollView的實現。

 viewDidLoad方法：

 1 - (void)viewDidLoad {
 2     [super viewDidLoad];
 3     //設置代理
 4     self.tableView.delegate = self;
 5     self.tableView.dataSource = self;
 6     //圖片數組
 7     _imageArray = [[NSMutableArray alloc] init];
 8     //循環添加圖片
 9     for (int i = 0; i < 5; i ++) {
10         NSString *imageName = [NSString stringWithFormat:@"image%d.jpg",i + 1];
11         [_imageArray addObject:[UIImage imageNamed:imageName]];
12     }
13     //添加頭視圖
14     [self createHeadView];
15     //添加ScrollView
16     [self createHeaderScrollView];
17     
18 }

效果圖：能夠看見下面的白色圓點的移動（系統自帶圓點，也能夠本身設置）

 

 

至於cell中的文字及其其餘設置，沒必要要贅述，只是設置tableView必須實現的兩個代理方法便可。

 

 

歡迎讀者查閱，有錯請留言。如若轉載，請標明出處。