iOS 轮播图的第三方库

最新推荐文章于 2018-10-11 15:01:07 发布

weixin_34417200

最新推荐文章于 2018-10-11 15:01:07 发布

阅读量464

点赞数

文章标签：移动开发 ui

原文链接：https://my.oschina.net/sgcllr/blog/826011

版权

为什么80%的码农都做不了架构师？>>>

第三方库（继承自UIView）实现的功能：解析数组，图片的自动轮播，循环拖动，为每张图片添加标题框。

对外声明的两个方法

一：无需添加标题框

-(void)setupUIwithArr:(NSArray*)arr andPageControlFrame:(CGRect)PCrect
      SetTimeInterval:(NSTimeInterval )interval KeyInDictWith:(NSString *)picName  addTapAction:(ClickAction)Tap ;
 /*
 @param arr      待解析的数组
 @param PCrect   PageControl的位置
 @param interval 自动滚动的时间间隔
 @param picName  字典中图片对应的key（需为网络地址）
 @param Tap      图片的点击事件(点击一次触发),同时以NSInteger类型参数的形式返回当前图片的页数。
 */

二：需要添加标题框

-(void)setupUIwithArr:(NSArray*)arr andPageControlFrame:(CGRect)PCrect
      SetTimeInterval:(NSTimeInterval )interval PicKeyInDictWith:(NSString *)picName  TitleKeyInDictWith:(NSString *)titName addTapAction:(ClickAction)Tap ;
 /*
 @param arr      待解析的数组
 @param PCrect   PageControl的位置
 @param interval 自动滚动的时间间隔
 @param picName  字典中图片对应的key（需为网络地址）
 @param titName  字典中标题文字对应的key
 @param Tap      图片的点击事件(点击一次触发),同时以NSInteger类型参数的形式返回当前图片的页数。
 */

实例代码：

 1.调用方法前请事先用initWithFrame方法确定ScrollView的位置
 ChaoyueSC *sc= [[ChaoyueSC alloc]initWithFrame:CGRectMake(0, 0, 120, 100)];
 2.调用两方法其中之一
 [sc setupUIwithArr:arr andPageControlFrame:CGRectMake(SW -arr.count*15 , SW/2.5 - 30, arr.count*15 ,25) SetTimeInterval:5 PicKeyInDictWith:@"picUrl" TitleKeyInDictWith:@"description" addTapAction:action];
 3.添加Scrollview
 [self addSubview:sc];

具体实现：

构建UI与数据加载分隔开

①构建UI

1.重写

//重写init方法
-(instancetype)init
{
    if (self = [super init]) {
        [self initSubViews];
    }
    return self;
}
//重写initWithFrame方法
-(instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self initSubViews];
    }
    return self;
}
- (void)initSubViews
{
//ScrolView的搭建
    [self setupSC];
//pageControl的搭建
    [self setupPC];
}

2.初始化ScrolView

-(void)setupSC{
//ScrolView的Frame与UIView的Frame一致  
    self.sc = [[UIScrollView alloc]initWithFrame:self.bounds];
//签署代理
    self.sc.delegate=self;
//设置按页滚动
    self.sc.pagingEnabled=YES;
//隐藏水平拖动条
    self.sc.showsHorizontalScrollIndicator=NO;

    [self addSubview:self.sc];
}

注意:bounds和frame的区别
-(CGRect)frame{
return CGRectMake(self.frame.origin.x,self.frame.origin.y,self.frame.size.width,self.frame.size.height);
}
-(CGRect)bounds{
return CGRectMake(0,0,self.frame.size.width,self.frame.size.height);
}
bounds的坐标是(0,0)点，而frame的坐标是不确定的（相对于父View的坐标位置）。
3.初始化PageControl

- (void)setupPC
{
    self.pc=[[UIPageControl alloc]init];
//设置初始索引位置
    self.pc.currentPage=0;
//设置索引相颜色
    self.pc.currentPageIndicatorTintColor=[UIColor orangeColor];
    [self addSubview:self.pc];
//上层显示
    [self bringSubviewToFront:self.pc];
}

②数据赋值

//轮播图需要设置标题框
-(void)setupUIwithArr:(NSArray*)arr andPageControlFrame:(CGRect)PCrect
      SetTimeInterval:(NSTimeInterval )interval PicKeyInDictWith:(NSString *)picName  TitleKeyInDictWith:(NSString *)titName addTapAction:(ClickAction)Tap
{
    //PageControl设置frame
    self.pc.frame = PCrect;
    //赋值给全局变量
    self.picName=picName;
    self.titName=titName;
    self.interval=interval; 
    _action=Tap;
    //解析数组
    [self setupWithArr:arr];
    //数组只有一个元素时（即一张图片时）不滚动
    if (arr.count >1) {
    //
    [self setupTimer];
    }
}

//轮播图不需要设置标题框
-(void)setupUIwithArr:(NSArray*)arr andPageControlFrame:(CGRect)PCrect
      SetTimeInterval:(NSTimeInterval )interval KeyInDictWith:(NSString *)picName  addTapAction:(ClickAction)Tap{
    [self setupUIwithArr:arr andPageControlFrame:PCrect SetTimeInterval:interval PicKeyInDictWith:picName TitleKeyInDictWith:nil addTapAction:Tap];

}

//解析数组
-(void)setupWithArr:(NSArray *)arr{
    //防止arr未赋值时调用
    if (arr.count == 0) {
        return;
    }
    //设置scrolView的数据
    if (arr.count==1) {
        //只有一张图时不滚动
        self.sc.contentOffset = CGPointMake(0, 0);
        self.sc.contentSize=CGSizeMake(SW,0);
        [self.pc removeFromSuperview];
        NSDictionary*dict=arr[0];
        UIImageView*iv=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, SW, SH)];
        [iv sd_setImageWithURL:[NSURL URLWithString:dict[self.picName]]];
      //需要设置title
        if (self.titName!=nil) {
            [self setupTitView];
            [iv addSubview:self.titView];
            self.label.text=dict[self.titName];
        }
        //人机交互
        self.sc.userInteractionEnabled=YES;
        iv.userInteractionEnabled=YES;
        //添加手势
        [self TapGes];
        [iv addGestureRecognizer:self.tap]；     
        [self.sc addSubview:iv];       
    }else{
//多张图
    //设置初始偏移量
        self.sc.contentOffset = CGPointMake(SW, 0);
        self.sc.contentSize=CGSizeMake(SW*(arr.count+2),0);
    //设置pageControl的数据  
    self.pc.numberOfPages = arr.count;
    self.pc.currentPage = 0;
    //画UI
    for (int i=0; i<arr.count+2; i++) {
        int num=0;  
        if (i==0) {
            num = (int)arr.count-1;
        }else if(i==arr.count+1){
            num = 0;
        }else{
            num = i-1;
        }      
        NSDictionary*dict=arr[num];      
        UIImageView*iv=[[UIImageView alloc]initWithFrame:CGRectMake(i*SW, 0, SW, SH)];
        [iv sd_setImageWithURL:[NSURL URLWithString:dict[self.picName]]];
        //设置标题框
        if (self.titName!=nil) {
            [self setupTitView];
            [iv addSubview:self.titView];
            self.label.text=dict[self.titName];
        }
        //人机交互
        self.sc.userInteractionEnabled=YES;
        iv.userInteractionEnabled=YES;
        //添加手势
        [self TapGes];
        [iv addGestureRecognizer:self.tap];
        [self.sc addSubview:iv];
    }
    }
}

③ScrollViewDelegate

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{   //确保滑动一页后才调用这个方法
    if((int)scrollView.contentOffset.x % (int)SW != 0){
        return;
    }
    int i =  scrollView.contentOffset.x/SW;
    
    //当图片显示最后一页时
    if (self.pc.numberOfPages+1 == i) {
        self.pc.currentPage = 0;
        scrollView.contentOffset = CGPointMake(SW, 0);
    }
    
    //偏移到第一页
    else if (i == 0) {
        self.pc.currentPage = 1;
        scrollView.contentOffset = CGPointMake(2*SW, 0);
    }
    //正常情况
    else{
        self.pc.currentPage = i-1;
    }
}
//结束缓冲时调用的方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    [self setupTimer];
}
//用户开始拖拽时调用的方法
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    //计时器停止
    [self.timer invalidate];
}

④Timer方法

-(void)setupTimer
{
    //自动滚动
    self.timer=[NSTimer timerWithTimeInterval:self.interval target:self selector:@selector(TimerAction)userInfo:nil repeats:YES];
    // NSRunLoop就是APP本身的计时器
    NSRunLoop*loop=[NSRunLoop mainRunLoop];
    [loop addTimer:self.timer forMode:NSRunLoopCommonModes]; 
}
-(void)TimerAction{
    //往下一页走
    self.pc.currentPage++;
    [self.sc setContentOffset:CGPointMake(self.sc.contentOffset.x+SW, 0) animated:YES];
}

⑤手势操作

-(void)TapGes
{
    //单击
    self.tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(GestureFuction:)];
    
    //点击次数
    self.tap.numberOfTapsRequired = 1;
    
}
-(void)GestureFuction:(UITapGestureRecognizer *)tap{
    //返回当前页数
    self.action(self.pc.currentPage);
}

转载于:https://my.oschina.net/sgcllr/blog/826011