zoukankan      html  css  js  c++  java
  • 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必须实现的两个代理方法即可。

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

  • 相关阅读:
    September 29th 2017 Week 39th Friday
    September 28th 2017 Week 39th Thursday
    September 27th 2017 Week 39th Wednesday
    September 26th 2017 Week 39th Tuesday
    September 25th 2017 Week 39th Monday
    September 24th 2017 Week 39th Sunday
    angular2 学习笔记 ( Form 表单 )
    angular2 学习笔记 ( Component 组件)
    angular2 学习笔记 ( Http 请求)
    angular2 学习笔记 ( Router 路由 )
  • 原文地址:https://www.cnblogs.com/david-han/p/4856081.html
Copyright © 2011-2022 走看看