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：

//头视图
- (void)createHeadView {
    //创建UIView存放scroll和pageContrpl
    _headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 200)];
    //设为头视图
    _tableView.tableHeaderView = _headerView;
    
}
//创建headScrollView
- (void)createHeaderScrollView {
    // 创建滑动视图
    _headScrollView = [[UIScrollView alloc] initWithFrame:_headerView.bounds];
    _headScrollView.contentSize = CGSizeMake(kScreenWidth * (_imageArray.count + 2), 200);
    //启用翻页功能
    _headScrollView.pagingEnabled = YES;
    //要设置偏移量才可以实现下面 刚进入图片显示第一张（前面还有一张图片，所以要偏移一个屏宽）
    _headScrollView.contentOffset = CGPointMake(kScreenWidth, 0);
    _headScrollView.tag = 99;
    //设置代理（tableView继承于scrollView，只写tableView代理也可以）
    _headScrollView.delegate = self;
    //隐藏水平滚动条
    _headScrollView.showsHorizontalScrollIndicator = NO;
    [_headerView addSubview:_headScrollView];
}

设置pageControl和scrollView停止滚动后的方法：

//设置pageControl
- (void)pageControl {
    //pageControl的大小
    _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 170, kScreenWidth, 30)];
    //设置页数
    _pageControl.numberOfPages = _imageArray.count;
    //已进入当前显示,还要设置偏移量来指定位置
    _pageControl.currentPage = 0;
    [_headerView addSubview:_pageControl];
}
//scrollView滚动停止后的方法
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    //计算页数
    if (scrollView.tag == 99) {
        NSInteger index = scrollView.contentOffset.x/kScreenWidth;
        NSInteger pageIndex = index - 1;
        if (index == _imageArray.count + 1) {
            scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
            pageIndex = 0;
        }else if (index == 0) {
            scrollView.contentOffset = CGPointMake(kScreenWidth *  (_imageArray.count), 0);
            pageIndex = _imageArray.count - 1;
            
        }
        _pageControl.currentPage = pageIndex;
    }
}

添加了一项可以点击的功能，即将button添加在scrollView上：

//设置 button
- (void)buttonImage {
    //设置图片
    for (int i = 0; i < _imageArray.count + 2; i ++) {
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.frame = CGRectMake(i * kScreenWidth, 0, kScreenWidth, 200);
        button.tag = i + 99;
        NSInteger index = i - 1;
        // 实现轮播功能
        if (i == 0) {
            index = _imageArray.count - 1;
        }else if(i == _imageArray.count + 1) {
            index = 0;
        }
        //将图片设置为button背景图片
        [button setBackgroundImage:_imageArray[index] forState:UIControlStateNormal];
        // 点击事件
        [button addTarget:self action:@selector(imageButtonAction:) forControlEvents:UIControlEventTouchUpInside];
        //添加显示
        [_headScrollView addSubview:button];
    }
}

轮播功能就是最后一张图片完成后，跳到第一张，也就是说，比如有5张图，要设置7个图大小的空间，第一张左滑显示第五张，第五张右滑显示第一张，例如：E-A-B-C-D-E-A.实际上是视觉上的“欺骗“。我在ScrollView（1）中写的方法要比现在这种简单易用，推荐第一种方法。

点击图片实现跳转的方法。

#pragma mark-
#pragma mark- button事件方法
- (void)imageButtonAction:(UIButton *)button{
    //轮播图一般只有几个，因此可以这样判断跳转（如果多了 就不可以这样了）
    NSInteger index = button.tag - 99;
    if (index == 1) {
            FirstViewController *firstVC = [[FirstViewController alloc] init];
        [self.navigationController pushViewController:firstVC animated:YES];
    }else if (index == 2) {
        SecondViewController *secondVC = [[SecondViewController alloc] init];
        [self.navigationController pushViewController:secondVC animated:YES];
    }
}

 跳转是用的navigationController，使用push方法跳到另一个界面。只是在两个Controller中写了title（重写init方法），没有做更多的操作，毕竟是scrollView的实现。

 viewDidLoad方法：

- (void)viewDidLoad {
    [super viewDidLoad];
    //设置代理
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    //图片数组
    _imageArray = [[NSMutableArray alloc] init];
    //循环添加图片
    for (int i = 0; i < 5; i ++) {
        NSString *imageName = [NSString stringWithFormat:@"image%d.jpg",i + 1];
        [_imageArray addObject:[UIImage imageNamed:imageName]];
    }
    //添加头视图
    [self createHeadView];
    //添加ScrollView
    [self createHeaderScrollView];
    
}

效果图：可以看见下面的白色圆点的移动（系统自带圆点，也可以自己设置）

 

 

至于cell中的文字及其其他设置，不必要赘述，只是设置tableView必须实现的两个代理方法即可。

 

 

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