美文网首页
UIScrollView - 图片轮播器

UIScrollView - 图片轮播器

作者: js_huh | 来源:发表于2017-08-28 22:37 被阅读74次

效果图

UIScrollView - 图片轮播.gif
需求:
1.图片横向手动滚动
2.图片横向定时滚动
3.TextVie的滚动,不影响UIScrollView
思路:
  1. 图片横向手动滚动
  • 1.1 自定义图片
 UIImageView *imgViewText = [UIImageView alloc]initWithImage :XXX];
imgViewText.frame = CGRectMake(X,Y,W,H);
[self.scrollView addSubView:imgViewText];
  • 1.2 设置contentSize
CGFloat imgMaxX = CGRectGetMaxX(imgViewText.frame);
self.scrollView.contentSize = CGSizeMake(imgMaxX,0);
  • 1.3 实现手动分页
    1.3.1 启用PageControl控件
    self.scrollView.pagingEnabled = YES;
    1.3.2 使用PageControl控件
    1. currentPage (当前第几页)
    2. numberOfPages(共有几页)
    self.pageControl.numberOfPages = self.pageSum;
    1.3.3 通过代理(滚动事件),实现滚动和PageControl控件的同步
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView{
      //获取滚动时的偏移量
      self.scrollOffset = self.scrollView.contentOffset;
       //最初方法没有*0.5,这样如果将图片滚动到中间位置,pageControl不会改变为下一页(就是那个点,不会改变)!
      self.pageNo = (self.scrollOffset.x + self.scrollVisibleW *0.5)/self.scrollVisibleW;
      self.pageControl.currentPage = self.pageNo;
    }
    

2.图片横向定时滚动

self.timerImgScroll = [NSTimer scheduledTimerWithTimeInterval: 2.0 
target:self 
selector: @selector(autoImgScoll) 
userInfo:nil 
repeats:YES];

每隔2秒,
调用self的autoImgScoll方法一次,
(self调用self的autoImgScoll方法一次)
不发送消息,
重复调用
  • 2.2 滚动( 更改contentOffSet )
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;//分页指示器
@property (assign, nonatomic) int pageNo; //分页码
@property(nonatomic) int  pageSum;// 总页数

-(void)autoImgScoll{
    self.pageNo ++; 
    if(self.pageNo >= self.pageSum){
        self.pageNo = 0;
    }
    CGFloat  offsetScroll = (CGFloat)self.pageNo * self.scrollVisibleW;
    self.scrollView.contentOffset = CGPointMake(offsetScroll, 0);
}

3.解决Bug

  • 3.1 当拖拽UIScrollView时,保持一段时间不放手,然后再次放手,则ScrollView会快速的切换图片,这是因为在拖拽时候,没有停止计时器!
    解决方法: 拖拽时候,停止计时器! 停止拖拽后,开启新的计时器! [self.timer invalidate] - 销毁计时器
  • 3.2 当拖拽/滚动界面上其他控件时, UIScrollView停止滚动?
    原因: 能拖拽/滚动的控件都是继承自UIScrollView
    界面只有一个线程处理UIScrollView的事件,所以,拖拽了别的控件,那么UIScrollView就不会处理!
    解决方法:
    更改timer的优先等级,
    控件的默认等级,NSRunLoopCommonModes,
    但是网络和计时器的等级NSDefaultRunLoopModes
    代码:
      //获取当前运行的线程
      //把计时器,放入当前线程中
      //获取当前运行的线程,将’计时器’添加到当前线程,调整当前线程的优先等级
      NSRunLoop *currentLoop = [NSRunLoop currentRunLoop];
      [currentLoop addTimer:self.timerImgScroll forMode:NSRunLoopCommonModes];
    

UIScrollView - 图片轮播器(完整代码)

相关文章

网友评论

      本文标题:UIScrollView - 图片轮播器

      本文链接:https://www.haomeiwen.com/subject/falcdxtx.html