UIScrollView - 新特性

效果图

新特性-UIScrollView.gif
需求:
实现手动图片轮播的功能
点击,进入/跳过,直接进入主界面!

思路:

1. 显示图片(纯代码显示图片)
   创建imageView -> 创建image -> 设置imageView的frame -> 添加到self.view上面.
2. 实现轮播效.
   1. 设置contentSize属性
      self.scrollView.contentSize = CGSizeMake(self.imgW * self.pageSum, 0);
   2. 设置多张图片的frame和显示图片

   for (int i = 0; i< self.pageSum; i++) {
     self.image = [UIImage imageNamed:[NSString stringWithFormat:@"guide%d",i+1]];
     self.imageView = [[UIImageView alloc]initWithImage:self.image];
     self.imageView.frame = CGRectMake(i*self.imgW, 0, self.imgW, self.imgH);
     [self.scrollView addSubview: self.imageView];
   }
   

   3. 设置分页效果
      直接启用UIScrollView的分页,那么UIScrollView就会根UIScrollView自身的宽度,来实现分页得!
      UIScrollView的宽度 == 分页的宽度
      self.scrollView.pagingEnabled = YES; // 启动分页
   4. 实现分页控件(UIPageControl)

   1. 创建分页控制器  
     UIPageControl * pageControl = [[UIPageControl alloc]init];
   2.分页控制器总共多少页
     pageControl.numberOfPages = self.pageSum;
   3.分页控制器的frame
     pageControl.frame = CGRectMake(0, self.imgH*0.72, self.imgW, 28);
   4.未选中分页的颜色和选中分页的颜色
    pageControl.pageIndicatorTintColor = [UIColor blackColor];
    pageControl.currentPageIndicatorTintColor = [UIColor redColor];
   5.先创建UIScrollView,再创建UIPagControl(否则会被UIScrollView遮住)
     [self.view addSubview:self.scrollView];
     [self.view addSubview:pageControl];
   

   5. 让UIPageControl跟随UIScrollView动起来!(代理方法)
      1. scrollViewDidScroll(scrollView代理方法 - 滚动时调用)
      2. 获取偏移量,计算出当前的页数(偏移量/每页的宽度).加0.5是因为,如果在两页之间,则pageControl控件会动!
      3. currentPage(现在页数)

      - (void)scrollViewDidScroll:(UIScrollView *)scrollView{
      double page = scrollView.contentOffset.x/scrollView.frame.size.width;
      self.pageControl.currentPage = (int)(page+0.5);
      }
      

3. 实现“跳过”“,“进入”的功能
   1.判断当前是第0-2页/最后一页
   2.创建按钮, 设置按钮的frame, 给按钮添加点击事件

   1. [[UIButton alloc]init]
   2. skipBtn.frame = CGRectMake(self.imgW*0.5-75, skipBtnY, 150, 35);
   3. [skipBtn addTarget:self  action:@selector(didSkipBtnClick) forControlEvents:UIControlEventTouchUpInside];
   

   3.将按钮添加到self.imageView上面
   [imageView addSubview:skipBtn];
4. 优化
   1. 状态栏(无线,电池...)内容隐藏, info.plist里面配置2个键值对!
      Status bar is initially hidden－YES (状态栏最初隐藏 - YES)View controller-based status bar appearance－NO (视图控制器状态栏外观 - NO )
   2. 弹簧效果,UIScrollView自带动画效果
      self.scrollView.bounces = YES; //弹簧效果
      self.scrollView setContentOffSet: animated; //自带动画效果(滚动的时候,不会太生硬,古板!)

UIScrollView - 新特性代码