1.介绍 一个封装好的UIScrollView子类,实现视图的自由滚动和定时切换视图,以及对应的文字描述,滚动视图不限。类似于淘宝app首页的滚动效果
2.效果展示图
3.代码片段
/******************************* WXScrollView.h *************************************/
//分页符的风格(居中,居左,居右)
typedef NS_ENUM(NSUInteger, UIPageControlShowStycle) {
UIPageControlShowStycleNone,
UIPageControlShowStycleLeft,
UIPageControlShowStycleRight,
UIPageControlShowStycleCenter,
};
//文字介绍风格 (居中,居左,居右)
typedef NS_ENUM(NSUInteger, UITitleShowStycle) {
UITitleShowStycleNone,
UITitleShowStycleLeft,
UITitleShowStycleRight,
UITitleShowStycleCenter,
};
@interface WXScrollView : UIScrollView <UIScrollViewDelegate> {
//视图label
UILabel *_Label;
//循环滚动的三个视图
UIImageView *_leftImageView;
UIImageView *_rightImageView;
UIImageView *_centerImageView;
//三个视图label
UILabel *_leftLabel;
UILabel *_rightLabel;
UILabel *_centerLabel;
//滑动定时器
NSTimer *_moveTimer;
BOOL _isTimeUp;
}
@property (retain,nonatomic,readonly) UIPageControl *pageControl;
@property (retain,nonatomic,readwrite) NSArray *imageNameArray;
@property (retain,nonatomic,readonly) NSArray *WdTitleArray;
@property (assign,nonatomic,readwrite) UIPageControlShowStycle pageControlShowStycle;
@property (assign,nonatomic,readwrite) UITitleShowStycle *titleShowStycle;
- (void) setWdTitleArray:(NSArray *)WdTitleArray titleShowStycle:(UITitleShowStycle )wdTitleStycle;
@end
初始化布局
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.bounces = NO;//内容遇到边框是否反弹
self.showsHorizontalScrollIndicator = NO;//是否显示水平滚动条
self.shouldGroupAccessibilityChildren = NO;
self.delegate = self;
self.pagingEnabled = YES;
//self.contentOffset = CGPointMake(0, 0);
//内容宽度,不需要所有视图的宽度
self.contentSize = CGSizeMake(kUIScreenWidth * 3, kUIScreenHeight);
//视图创建
_leftImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kUIScreenWidth, kUIScreenHeight)];
[self addSubview:_leftImageView];
_centerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(kUIScreenWidth, 0, kUIScreenWidth, kUIScreenHeight)];
[self addSubview:_centerImageView];
_rightImageView = [[UIImageView alloc] initWithFrame:CGRectMake(kUIScreenWidth*2, 0, kUIScreenWidth, kUIScreenHeight)];
[self addSubview:_rightImageView];
//创建定时器,3秒调用changeImgViewAction方法,实现视图循环切换
_moveTimer = [NSTimer scheduledTimerWithTimeInterval:3.f
target:self
selector:@selector(changeImgViewAction)
userInfo:nil
repeats:YES];
_isTimeUp = NO;
}
return self;
}
</pre>计时器控制视图滚动</div><div><p style="margin-top:0px; margin-bottom:0px; font-size:18px; font-family:Menlo; color:rgb(232,35,0)"></p><p style="margin-top:0px; margin-bottom:0px; font-size:18px; font-family:Menlo; color:rgb(232,35,0)"></p><p style="margin-top:0px; margin-bottom:0px; font-size:18px; font-family:Menlo; color:rgb(119,121,151)"></p><pre name="code" class="objc">#pragma mark - 计时器控制视图滚动
- (void) changeImgViewAction {
[self setContentOffset:CGPointMake(kUIScreenWidth * 2, 0) animated:YES];
_isTimeUp = YES;
//调用scrollViewDidEndDecelerating:(UIScrollView)
[NSTimer scheduledTimerWithTimeInterval:0.4 target:self selector:@selector(scrollViewDidEndDecelerating:) userInfo:nil repeats:NO];
}
#pragma mark - 图片停止时,调用该函数使得滚动视图复用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
if (self.contentOffset.x == 0) {
currentImage = (currentImage - 1)%_imageNameArray.count;
_pageControl.currentPage = (_pageControl.currentPage - 1)%_imageNameArray.count;
} else if (self.contentOffset.x == kUIScreenWidth * 2) {
currentImage = (currentImage + 1) % _imageNameArray.count;
_pageControl.currentPage = (_pageControl.currentPage + 1)%_imageNameArray.count;
} else {
return;
}
//左边视图
_leftImageView.image = [UIImage imageNamed:_imageNameArray[(currentImage - 1) % _imageNameArray.count]];
_leftLabel.text = _WdTitleArray[(currentImage-1) % _imageNameArray.count];
//中间视图
_centerImageView.image = [UIImage imageNamed:_imageNameArray[currentImage % _imageNameArray.count]];
_centerLabel.text = _WdTitleArray[currentImage % _imageNameArray.count];
//右边视图
_rightImageView.image = [UIImage imageNamed:_imageNameArray[(currentImage + 1) % _imageNameArray.count]];
_rightLabel.text = _WdTitleArray[(currentImage + 1) % _imageNameArray.count];
//self.contentOffset = CGPointMake(0, 0);
//手动控制图片滚动取消三秒的计时器
if (!_isTimeUp) {
[_moveTimer setFireDate:[NSDate dateWithTimeIntervalSinceNow:3.f]];
}
_isTimeUp = NO;
}
获取图片
#pragma mark - 设置图片,名字
- (void) setImageNameArray:(NSArray *)imageNameArray {
_imageNameArray = imageNameArray;
//获取图片数据
_leftImageView.image = [UIImage imageNamed:_imageNameArray[0]];
_centerImageView.image = [UIImage imageNamed:_imageNameArray[1]];
_rightImageView.image = [UIImage imageNamed:_imageNameArray[2]];
}
设置文本风格,加载文本数据
#pragma mark - 设置文本的风格(居左,居中,居右)
- (void) setWdTitleArray:(NSArray *)WdTitleArray titleShowStycle:(UITitleShowStycle )wdTitleStycle {
_WdTitleArray = WdTitleArray;
if (wdTitleStycle == UITitleShowStycleNone) {
return;
}
_leftLabel = [[UILabel alloc] init];
_centerLabel = [[UILabel alloc] init];
_rightLabel = [[UILabel alloc] init];
_leftLabel.textColor = [UIColor redColor];
_centerLabel.textColor = [UIColor redColor];
_rightLabel.textColor = [UIColor redColor];
_leftLabel.frame = CGRectMake(10, kUIScreenHeight - 40, kUIScreenWidth, 20);
[_leftImageView addSubview:_leftLabel];
_centerLabel.frame = CGRectMake(10, kUIScreenWidth - 40, kUIScreenWidth, 20);
[_centerImageView addSubview:_centerLabel];
_rightLabel.frame = CGRectMake(10, kUIScreenHeight - 40, kUIScreenWidth, 20);
[_rightImageView addSubview:_rightLabel];
if (wdTitleStycle == UITitleShowStycleLeft) {
_leftLabel.textAlignment = NSTextAlignmentLeft;
_rightLabel.textAlignment = NSTextAlignmentLeft;
_centerLabel.textAlignment = NSTextAlignmentLeft;
} else if (wdTitleStycle == UITitleShowStycleCenter) {
_leftLabel.textAlignment = NSTextAlignmentCenter;
_rightLabel.textAlignment = NSTextAlignmentCenter;
_centerLabel.textAlignment = NSTextAlignmentCenter;
} else {
_leftLabel.textAlignment = NSTextAlignmentRight;
_centerLabel.textAlignment = NSTextAlignmentRight;
_rightLabel.textAlignment = NSTextAlignmentRight;
}
//获取文本数组中的数据
_leftLabel.text = _WdTitleArray[0];
_centerLabel.text = _WdTitleArray[1];
_rightLabel.text = _WdTitleArray[2];
}
#pragma mark - 创建pageControl,指定其显示样式
- (void) setPageControlShowStycle:(UIPageControlShowStycle)pageControlShowStycle {
if (pageControlShowStycle == UIPageControlShowStycleNone) {
return;
}
_pageControl = [[UIPageControl alloc] init];
_pageControl.numberOfPages = _imageNameArray.count;
if (pageControlShowStycle == UIPageControlShowStycleLeft) {
_pageControl.frame = CGRectMake(10, Hight + kUIScreenHeight - 20, 20 * _pageControl.numberOfPages, 100);
} else if (pageControlShowStycle == UIPageControlShowStycleCenter) {
_pageControl.frame = CGRectMake(0, 0, 20 * _pageControl.numberOfPages, 100);
_pageControl.center = CGPointMake(kUIScreenWidth/2.0, Hight + kUIScreenHeight - 10);
}
else {
_pageControl.frame = CGRectMake(kUIScreenWidth - 20 * _pageControl.numberOfPages, Hight + kUIScreenHeight - 20, 20 * _pageControl.numberOfPages, 100);
}
_pageControl.currentPage = 0;
_pageControl.enabled = NO;
[self performSelector:@selector(addPageControl) withObject:nil afterDelay:0.1f];
}
//分页符添加到WXScrollView的父视图上
- (void) addPageControl {
[[self superview] addSubview:_pageControl];
}
数据加到model中
#import "WXDataModel.h"
#define PLISTFILENAME @"AdDataPlist.plist"
#define PATH [[NSBundle mainBundle]pathForResource:PLISTFILENAME ofType:nil]
@implementation WXDataModel
#pragma - 初始化方法获得数据,加载到model中
//获取图片数据
- (id)initWithImageName
{
self = [super init];
if (self)
{
_imageNameArray = [NSArray arrayWithContentsOfFile:PATH][0];
}
return self;
}
//获取图片和文本数据
- (id)initWithImageNameAndAdTitleArray
{
_WdTitleArray = [NSArray arrayWithContentsOfFile:PATH][1];
return [self initWithImageName];
}
ViewController 显示
#import "ViewController.h"
#import "WXScrollView.h"
#import "WXDataModel.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor orangeColor];
//创建scrollView视图
[self creatScrollView];
}
#pragma mark - 创建scrollView视图
- (void) creatScrollView {
WXScrollView *scrollView = [[WXScrollView alloc] initWithFrame:CGRectMake(0, 35, 375, 235)];
// WXDataModel *dataModel = [WXDataModel adDataModelWithImageNameAndAdTitleArray];
WXDataModel *dataModel = [[WXDataModel alloc] initWithImageNameAndAdTitleArray];
scrollView.imageNameArray = dataModel.imageNameArray;
//设置pageControl的风格
scrollView.pageControlShowStycle = UIPageControlShowStycleRight;
scrollView.pageControl.pageIndicatorTintColor = [UIColor whiteColor];
scrollView.pageControl.currentPageIndicatorTintColor = [UIColor redColor];
//设置label的风格(居中)
[scrollView setWdTitleArray:dataModel.WdTitleArray titleShowStycle:UITitleShowStycleLeft];
[self.view addSubview:scrollView];
}
@end