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必须实现的两个代理方法即可。

 

 

欢迎读者查阅，有错请留言。如若转载，请标明出处。