iOS开发自定义轮播图即自定义banner滚动图

释放双眼,带上耳机,听听看~!

以前老是用别人写的banner滚动图,用起来总感觉不顺手,很多东西改了再改,结果改的面目全非,本着创新精神,博主今天自己封装了一个banner滚动图,这里资源来自爱卡汽车的banner滚动图,这不算侵权吧,仅仅写一个小Demo而已,首先来看下效果吧

下面看代码:

//
//  TopScrollView.h
//  无限轮播
//
//  Created by 刘浩浩 on 16/6/12.
//  Copyright © 2016年 CodingFire. All rights reserved.
//
#import <UIKit/UIKit.h>
@class TopScrollView;
@protocol TopScrollViewDelegate <NSObject>
/*
*UIScrollViewDelegate  协议方法,把点击的图片的位置传给使用者
*/
-(void)didClickScrollViewWithIndex:(NSInteger)index;
@end
@interface TopScrollView : UIView<UIScrollViewDelegate>
@property (weak,nonatomic) id<TopScrollViewDelegate>delegate;
/*
*初始化scrollView及其部件
*/
-(instancetype)initWithDataArray:(NSMutableArray *)dataArray;
@end
//
//  TopScrollView.m
//  无限轮播
//
//  Created by 刘浩浩 on 16/6/12.
//  Copyright © 2016年 CodingFire. All rights reserved.
//
#import "TopScrollView.h"
#import "DataModel.h"
#import "UIImageView+WebCache.h"
@implementation TopScrollView
{
UIScrollView *_mainScrollView;
UILabel *contentLabel;
UIImageView *currentImageView;
NSInteger _currentIndex;
NSMutableArray *_dataArray;
UIView *pageSubView;
}
/*
*初始化部件,添加点击手势和定时器
*/
-(instancetype)initWithDataArray:(NSMutableArray *)dataArray
{
if (self=[super initWithFrame:CGRectMake(0, 64, WIDTH, 170)]) {
_mainScrollView = [[UIScrollView alloc] init];
_mainScrollView.frame = CGRectMake(0, 0, WIDTH, 170);
_mainScrollView.contentSize = CGSizeMake(WIDTH*3, 170);
_mainScrollView.backgroundColor = [UIColor whiteColor];
_mainScrollView.delegate = self;
_mainScrollView.pagingEnabled = YES;
_mainScrollView.userInteractionEnabled=YES;
_mainScrollView.showsHorizontalScrollIndicator = NO;
_mainScrollView.showsVerticalScrollIndicator=NO;
_mainScrollView.bounces = NO;
[_mainScrollView setContentOffset:CGPointMake(WIDTH, 0)];
[self addSubview:_mainScrollView];
_currentIndex = 0;
_dataArray=[NSMutableArray arrayWithArray:dataArray];
[self setUpWithDataArray:_dataArray];
[self cretPageControlAndTitle];
// 手势
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapClick)];
[self addGestureRecognizer:tap];
[NSTimer scheduledTimerWithTimeInterval:4 target:self selector:@selector(timerAction) userInfo:nil repeats:YES];
}
return self;
}
/*
*创建标题和pageControl,此处pageCOntrol为自定义的,如需要可修改为系统的,或更换图片即可
*/
-(void)cretPageControlAndTitle
{
contentLabel = [[UILabel alloc] init];
contentLabel.frame = CGRectMake(0, self.frame.size.height-30, WIDTH, 30);
contentLabel.textAlignment = NSTextAlignmentLeft;
contentLabel.font=[UIFont systemFontOfSize:12];
contentLabel.text = ((DataModel *)[_dataArray firstObject]).title;
contentLabel.backgroundColor = [UIColor blackColor];
contentLabel.textColor=[UIColor whiteColor];
contentLabel.alpha=0.6;
[self addSubview:contentLabel];
pageSubView=[[UIView alloc]initWithFrame:CGRectMake(0, self.frame.size.height-30, WIDTH, 30)];
pageSubView.backgroundColor=[UIColor clearColor];
[self addSubview:pageSubView];
for(int i=0;i<_dataArray.count;i++)
{
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"News_Pic_Number02@2x.png"]];
imageView.frame = CGRectMake(WIDTH-(_dataArray.count*12)-10+i*12, 11, 7, 7);
if(i == 0)
{
imageView.image = [UIImage imageNamed:@"News_Pic_Number01@2x.png"];
}
[pageSubView addSubview:imageView];
}
}
/*
*定时器方法,使banner页无限轮播
*/
-(void)timerAction
{
UIImageView *imageView = [pageSubView.subviews objectAtIndex:_currentIndex];
imageView.image = [UIImage imageNamed:@"News_Pic_Number02@2x.png"];
if (_currentIndex+1<_dataArray.count) {
_currentIndex++;
}
else
{
_currentIndex=0;
}
[UIView animateWithDuration:1 animations:^{
[_mainScrollView setContentOffset:CGPointMake(WIDTH*2, 0)];
} completion:^(BOOL finished) {
[_mainScrollView setContentOffset:CGPointMake(WIDTH, 0)];
[self setUpWithDataArray:_dataArray];
}];
contentLabel.text = ((DataModel *)[_dataArray objectAtIndex:_currentIndex]).title;
UIImageView *imageView1 = [pageSubView.subviews objectAtIndex:_currentIndex];
imageView1.image = [UIImage imageNamed:@"News_Pic_Number01@2x.png"];
}
/*
*此处为scrollView的复用,比目前网上大部分的同类型控件油画效果好,只需要三张图片依次替换即可实现轮播,不需要有几张图就使scrollView的contentSize为图片数*宽度
*/
-(void)setUpWithDataArray:(NSArray *)dataArray
{
for(UIView *view in _mainScrollView.subviews)
{
if([view isKindOfClass:[UIImageView class]])
[view removeFromSuperview];
}
// 中间图
currentImageView = [[UIImageView alloc] init];
[currentImageView sd_setImageWithURL:[NSURL URLWithString:((DataModel *)[dataArray objectAtIndex:_currentIndex]).imgURL]];
currentImageView.userInteractionEnabled=YES;
currentImageView.frame = CGRectMake(WIDTH, 0, WIDTH, 170);
[_mainScrollView addSubview:currentImageView];
// 左侧图
UIImageView *preImageView = [[UIImageView alloc] init];
NSString *imageStr = _currentIndex-1>=0?((DataModel *)[dataArray objectAtIndex:_currentIndex-1]).imgURL:((DataModel *)[dataArray lastObject]).imgURL;
preImageView.userInteractionEnabled=YES;
[preImageView sd_setImageWithURL:[NSURL URLWithString:imageStr]];
preImageView.frame = CGRectMake(0, 0, WIDTH, 170);
[_mainScrollView addSubview:preImageView];
// 右侧
UIImageView *nextImageView = [[UIImageView alloc] init];
nextImageView.userInteractionEnabled=YES;
NSString *imageStr1 = _currentIndex+1<dataArray.count?((DataModel *)[dataArray objectAtIndex:_currentIndex+1]).imgURL:((DataModel *)[dataArray firstObject]).imgURL;
[nextImageView sd_setImageWithURL:[NSURL URLWithString:imageStr1]];
nextImageView.frame = CGRectMake(WIDTH*2, 0, WIDTH, 170);
[_mainScrollView addSubview:nextImageView];
}
/*
*图片的点击响应方法
*/
-(void)tapClick
{
if ([self.delegate respondsToSelector:@selector(didClickScrollViewWithIndex:)]) {
[self.delegate didClickScrollViewWithIndex:_currentIndex];
}
}
/*
*UIScrollViewDelegate  协议方法,拖动图片的处理方法
*/
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
if(scrollView == _mainScrollView)
{
UIImageView *imageView = [pageSubView.subviews objectAtIndex:_currentIndex];
imageView.image = [UIImage imageNamed:@"News_Pic_Number02@2x.png"];
int index = scrollView.contentOffset.x/WIDTH;
if(index>1)
{
_currentIndex = _currentIndex+1<_dataArray.count?_currentIndex+1:0;
[UIView animateWithDuration:1 animations:^{
[_mainScrollView setContentOffset:CGPointMake(WIDTH*2, 0)];
} completion:^(BOOL finished) {
[_mainScrollView setContentOffset:CGPointMake(WIDTH, 0)];
[self setUpWithDataArray:_dataArray];
}];        }
else if(index<1)
{
_currentIndex = _currentIndex-1>=0?_currentIndex-1:_dataArray.count-1;
[UIView animateWithDuration:1 animations:^{
[_mainScrollView setContentOffset:CGPointMake(0, 0)];
} completion:^(BOOL finished) {
[_mainScrollView setContentOffset:CGPointMake(WIDTH, 0)];
[self setUpWithDataArray:_dataArray];
}];
}
else
NSLog(@"没滚动不做任何操作");
contentLabel.text = ((DataModel *)[_dataArray objectAtIndex:_currentIndex]).title;
UIImageView *imageView1 = [pageSubView.subviews objectAtIndex:_currentIndex];
imageView1.image = [UIImage imageNamed:@"News_Pic_Number01@2x.png"];
}
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
@end
//
//  DataModel.h
//  无限轮播
//
//  Created by 刘浩浩 on 16/6/12.
//  Copyright © 2016年 CodingFire. All rights reserved.
//
#import <Foundation/Foundation.h>
@interface DataModel : NSObject
/*
*此模型不可省略,为的是传入图片链接,标题,链接地址,内容ID等数据
*/
@property(nonatomic,strong)NSString *imgURL;
@property(nonatomic,strong)NSString *title;
@property(nonatomic,strong)NSString *webLink;
@property(nonatomic,strong)NSString *contentID;
@end

以上就是工程中的主要代码,下面附上下载地址,请自取banner滚动图自定义

人已赞赏
iOS文章

Xcode报错Expected selector for Objective-C and Expected method body

2021-2-3 10:22:22

iOS文章

iOS开发图文混排之cell自适应

2021-2-3 11:37:24

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索