美文网首页
5、头部轮播图封装

5、头部轮播图封装

作者: 紅寶石 | 来源:发表于2017-03-12 12:22 被阅读0次

现在主流APP首页头部都会应用轮播图,将这个封装成一个类,这样只需要一行代码就可以创建一个轮播图了,😄,方便自己以后的使用;
Demo地址:https://github.com/hongbaoshi/LZWHeaderScrollView.git

创建引入:

{
    NSArray *imgArr = @[@"4.jpg",@"5.jpg",@"6.jpg",@"7.jpg"];
    LZWHeaderScrollView *headerScrollView = [[LZWHeaderScrollView alloc] initWithFrame:CGRectMake(30, 200, SCW-60, 200) andWithImgArray:imgArr andWithScrTime:5.0 andWithStartTag:100];
    headerScrollView.block = ^(NSInteger tag){
        NSLog(@"%ld",tag);
    };
    [self.view addSubview:headerScrollView];

具体实现方法:

#import <UIKit/UIKit.h>
typedef void(^LZWHeaderBackBlock)(NSInteger tag);
@interface LZWHeaderScrollView : UIView

@property(nonatomic,copy)LZWHeaderBackBlock block;

-(id)initWithFrame:(CGRect)frame andWithImgArray:(NSArray *)imgArray andWithScrTime:(NSTimeInterval)interval andWithStartTag:(NSInteger)startTag;
@end
创建方法:
#import "LZWHeaderScrollView.h"
@interface LZWHeaderScrollView()<UIScrollViewDelegate>
//传入的属性保存
@property(nonatomic,assign)float scrWidth;
@property(nonatomic,assign)float scrHeight;
@property(nonatomic,strong)NSArray *imgArr;
@property(nonatomic,assign)NSInteger startTag;
@property(nonatomic,assign)NSTimeInterval interval;

//界面属性
@property(nonatomic,strong)UIScrollView *LZWScrollView;
@property(nonatomic,strong)UIPageControl *pageControl;
@property(nonatomic,assign)int LZWTimerNumber;
//注意**这里不需要✳️号 可以理解为dispatch_time_t 已经包含了
@property (nonatomic, strong)dispatch_source_t time;

@end


@implementation LZWHeaderScrollView


- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
    }
    return self;
}


-(id)initWithFrame:(CGRect)frame andWithImgArray:(NSArray *)imgArray andWithScrTime:(NSTimeInterval)interval andWithStartTag:(NSInteger)startTag;
{
    if (self = [super initWithFrame:frame]) {
        _scrWidth = frame.size.width;
        _scrHeight = frame.size.height;
        _imgArr = imgArray;
        _startTag = startTag;
        _interval = interval;
        //创建滚动视图的界面
        [self creatUI];

        
    }
    return self;
}



-(void)creatUI
{
    NSMutableArray *imgArray = [_imgArr mutableCopy];
    [imgArray insertObject:[imgArray lastObject] atIndex:0];
    
    _LZWScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, _scrWidth, _scrHeight)];
    _LZWScrollView.showsHorizontalScrollIndicator = NO;
    _LZWScrollView.showsVerticalScrollIndicator = NO;
    _LZWScrollView.contentSize = CGSizeMake(_scrWidth*imgArray.count, _scrHeight);
    _LZWScrollView.pagingEnabled = YES;
    _LZWScrollView.bounces = YES;
    _LZWScrollView.delegate = self;
    _LZWScrollView.contentOffset = CGPointMake(_scrWidth, 0);
    [self addSubview:_LZWScrollView];
    
    for (int i =0; i<imgArray.count; i++)
    {
        UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(_scrWidth*i, 0, _scrWidth, _scrHeight)];
        imgView.userInteractionEnabled = YES;
        imgView.tag = _startTag +i -1;
        imgView.image = [UIImage imageNamed:imgArray[i]];
        
        //创建图片单击手势
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imgViewBtn:)];
        tap.numberOfTapsRequired =1;
        [imgView addGestureRecognizer:tap];
        
        [_LZWScrollView addSubview:imgView];
    }
    
    
    _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(100, _scrHeight-10, _scrWidth-200, 6)];
    [self addSubview:_pageControl];
    _pageControl.numberOfPages = _imgArr.count;
    _pageControl.currentPage = 0;
    _pageControl.currentPageIndicatorTintColor = [UIColor redColor];
    _pageControl.pageIndicatorTintColor = [UIColor whiteColor];
    
    //用gcd创建计时器
    [self creatTimerByGcd];
}


-(void)imgViewBtn:(UITapGestureRecognizer *)tap
{
    self.block(tap.view.tag);
}

-(void)creatTimerByGcd
{
    __weak LZWHeaderScrollView *weakself = self;
    _LZWTimerNumber = 0;
    //获得队列
    dispatch_queue_t queue = dispatch_get_global_queue(0, 0);
    //创建一个定时器
    self.time = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, queue);
    //设置开始时间
    dispatch_time_t start = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0 * NSEC_PER_SEC));
    //设置时间间隔
    uint64_t interval = (uint64_t)(_interval* NSEC_PER_SEC);
    //设置定时器
    dispatch_source_set_timer(self.time, start, interval, 0);
    //设置回调
    dispatch_source_set_event_handler(self.time, ^{
        
        //回到主线程,执行定时任务
        dispatch_async(dispatch_get_main_queue(), ^{
            [weakself scrollHeaderImage];
        });
        //设置当执行五次是取消定时器
        
        //        if(count == 5){
        //
        //            dispatch_cancel(self.time);
        //
        //        }
    });
    //由于定时器默认是暂停的所以我们启动一下
    //启动定时器
    dispatch_resume(self.time);
}

-(void)scrollHeaderImage
{
    _LZWTimerNumber++;
    if (_LZWTimerNumber == _imgArr.count+1) {
        _LZWTimerNumber = 1;
    }
    
    _LZWScrollView.contentOffset = CGPointMake(_LZWTimerNumber*_scrWidth, 0);
    _pageControl.currentPage = _LZWTimerNumber -1;

}



#pragma mark ----UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (scrollView.contentOffset.x<0) {
        scrollView.contentOffset = CGPointMake(_scrWidth*_imgArr.count, 0);
    }
    if (scrollView.contentOffset.x>_scrWidth*_imgArr.count) {
        scrollView.contentOffset = CGPointMake(0, 0);
    }
}

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    int currentPage = scrollView.bounds.origin.x/_scrWidth - 1;
    _pageControl.currentPage = currentPage;
    _LZWTimerNumber = currentPage + 1;
}



@end

相关文章

  • 5、头部轮播图封装

    现在主流APP首页头部都会应用轮播图,将这个封装成一个类,这样只需要一行代码就可以创建一个轮播图了,?,方便自己以...

  • Vue项目中使用elementUI中的Carousel 走马灯实

    轮播图效果 如需封装可参考如下: 封装Carousel走马灯实现轮播图效果[https://www.jianshu...

  • jdM站首页

    导航变色方法封装 banner轮播图方法封装 倒计时秒杀方法

  • html匿名

    集装箱(container) 头部(header) 导航(nav) 轮播图(banner) 搜索(search) ...

  • 封装轮播图

    分为3个方面 一、HTML 布局原理: swipper-container相对定位relative,宽度仅为一张图...

  • 轮播图封装

    最近在做项目发现很多APP界面的头部/中部/底部都有轮播图的广告,其实就是自定义View展示在UITableVie...

  • swift 轮播图无限滚动 控件的封装

    swift 轮播图无限滚动 控件的封装 这篇文章主要记录自己是怎么一步一步封装一个 轮播图, 记录了整个过程和遇到...

  • CollectionViewcollectionView头部添加

    记录下CollectionViewcollectionView使用Header头部添加轮播图 关键点:flowLa...

  • 轮播图心得

    一、轮播图 1.传统轮播图: 运动的封装:(1)定时器的使用,创建定时器setInterval();每隔指定的时间...

  • iOS 轮播图的实现逻辑(四种方法)

    现在的App开发中,轮播图几乎是一个不可避免的都会用到的。个人封装过轮播图,也看过很多种不同的轮播图,目前掌握的轮...

网友评论

      本文标题:5、头部轮播图封装

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