iOS开发-banner滚动图自定义

简介: iOS开发-banner滚动图自定义

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

image.png

下面看代码:

//
//  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滚动图自定义

目录
相关文章
|
6天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
13天前
|
安全 数据处理 Swift
深入探索iOS开发中的Swift语言特性
本文旨在为开发者提供对Swift语言在iOS平台开发的深度理解,涵盖从基础语法到高级特性的全面分析。通过具体案例和代码示例,揭示Swift如何简化编程过程、提高代码效率,并促进iOS应用的创新。文章不仅适合初学者作为入门指南,也适合有经验的开发者深化对Swift语言的认识。
35 9
|
9天前
|
设计模式 Swift iOS开发
探索iOS开发:从基础到高级,打造你的第一款App
【10月更文挑战第40天】在这个数字时代,掌握移动应用开发已成为许多技术爱好者的梦想。本文将带你走进iOS开发的世界,从最基础的概念出发,逐步深入到高级功能实现,最终指导你完成自己的第一款App。无论你是编程新手还是有志于扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。让我们一起开始这段旅程吧!
|
13天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
|
11天前
|
iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第39天】在苹果的生态系统中,SwiftUI框架以其声明式语法和易用性成为开发者的新宠。本文将深入SwiftUI的核心概念,通过实际案例展示如何利用这一框架快速构建用户界面,并探讨其对iOS应用开发流程的影响。
|
14天前
|
JSON 前端开发 API
探索iOS开发之旅:打造你的第一个天气应用
【10月更文挑战第36天】在这篇文章中,我们将踏上一段激动人心的旅程,一起构建属于我们自己的iOS天气应用。通过这个实战项目,你将学习到如何从零开始搭建一个iOS应用,掌握基本的用户界面设计、网络请求处理以及数据解析等核心技能。无论你是编程新手还是希望扩展你的iOS开发技能,这个项目都将为你提供宝贵的实践经验。准备好了吗?让我们开始吧!
|
17天前
|
存储 数据可视化 Swift
探索iOS开发之旅:从新手到专家
【10月更文挑战第33天】在这篇文章中,我们将一起踏上一场激动人心的iOS开发之旅。无论你是刚刚入门的新手,还是已经有一定经验的开发者,这篇文章都将为你提供宝贵的知识和技能。我们将从基础的iOS开发概念开始,逐步深入到更复杂的主题,如用户界面设计、数据存储和网络编程等。通过阅读这篇文章,你将获得成为一名优秀iOS开发者所需的全面技能和知识。让我们一起开始吧!
|
1月前
|
Java Android开发 Swift
安卓与iOS开发对比:平台选择对项目成功的影响
【10月更文挑战第4天】在移动应用开发的世界中,选择合适的平台是至关重要的。本文将深入探讨安卓和iOS两大主流平台的开发环境、用户基础、市场份额和开发成本等方面的差异,并分析这些差异如何影响项目的最终成果。通过比较这两个平台的优势与挑战,开发者可以更好地决定哪个平台更适合他们的项目需求。
114 1
|
1月前
|
设计模式 安全 Swift
探索iOS开发:打造你的第一个天气应用
【9月更文挑战第36天】在这篇文章中,我们将一起踏上iOS开发的旅程,从零开始构建一个简单的天气应用。文章将通过通俗易懂的语言,引导你理解iOS开发的基本概念,掌握Swift语言的核心语法,并逐步实现一个具有实际功能的天气应用。我们将遵循“学中做,做中学”的原则,让理论知识和实践操作紧密结合,确保学习过程既高效又有趣。无论你是编程新手还是希望拓展技能的开发者,这篇文章都将为你打开一扇通往iOS开发世界的大门。
|
1月前
|
搜索推荐 IDE API
打造个性化天气应用:iOS开发之旅
【9月更文挑战第35天】在这篇文章中,我们将一起踏上iOS开发的旅程,通过创建一个个性化的天气应用来探索Swift编程语言的魅力和iOS平台的强大功能。无论你是编程新手还是希望扩展你的技能集,这个项目都将为你提供实战经验,帮助你理解从构思到实现一个应用的全过程。让我们开始吧,构建你自己的天气应用,探索更多可能!
66 1
下一篇
无影云桌面