首页 技术 正文
技术 2022年11月20日
0 收藏 912 点赞 4,387 浏览 4065 个字

代码地址如下:
http://www.demodashi.com/demo/11959.html

ImageCarousel

简单封装的图片轮播器

内存过大由于我加载的图片分辨率较高(4k)

文件目录

使用

初始化自定义view,并提供title和图片数组,设置控制器代理

shufflingView *myView = [[shufflingView alloc]
initWithFrame:CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width,
230)]; NSArray *picDataArray = @[ @"1", @"2", @"3", @"4", @"5" ];
NSArray *titleDataArray = @[ @"1", @"2", @"3", @"4", @"5" ]; myView.picDataArray = [picDataArray copy]; myView.titleDataArray = [titleDataArray copy]; myView.titleLabelTextColor =
[UIColor colorWithRed:255/255 green:0 blue:0 alpha:1.0]; myView.isAutomaticScroll = YES; myView.automaticScrollDelay = 2; myView.carouselViewStyle = ImageCarouselStyleBoth; myView.pageIndicatorTintColor = [UIColor colorWithRed:255/255 green:0/255 blue:255/255 alpha:1.0]; myView.pageControlCurrentColor =
[UIColor colorWithRed:0/255 green:255/255 blue:255/255 alpha:1.0]; myView.delegate = self; myView.picDataArray = [picDataArray copy]; [self.view addSubview:myView];

自定义view


typedef NS_ENUM(NSInteger, ImageCarouselStyleType) {
ImageCarouselStyleNone,
ImageCarouselStyleTitle,
ImageCarouselStylePageControl,
ImageCarouselStyleBoth
};
@protocol CarouselViewDelegate <NSObject>@optional- (void)didClick:(NSInteger)index;@end@interface shufflingView : UIView
{
float _automaticScrollDelay;
ImageCarouselStyleType _carouselViewStyle;
}
@property(nonatomic, strong) NSArray *picDataArray;
@property(nonatomic, strong) NSArray *titleDataArray;
@property(nonatomic, weak) UIFont *titleLabelTextFont;
@property(nonatomic, weak) UIColor *titleLabelTextColor;
@property(nonatomic, weak) UIColor *pageIndicatorTintColor;
@property(nonatomic, weak) UIColor *pageControlCurrentColor;// 是否自动滚动
@property(nonatomic, assign) BOOL isAutomaticScroll;
// 滚动时间间隔
@property(nonatomic, assign) float automaticScrollDelay;
/// 枚举
@property(nonatomic, assign) ImageCarouselStyleType carouselViewStyle;@property(nonatomic, weak) id<CarouselViewDelegate> delegate;

采用一个scrollivew和三个imageview

// 默认滚动到中间imageview
[_mainScrollView setContentOffset:CGPointMake(self.bounds.size.width, 0)
animated:NO]; // 添加三个imageView
_leftImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, KViewW, KViewH)];
_rightImageView = [[UIImageView alloc]initWithFrame:CGRectMake(2*KViewW, 0, KViewW, KViewH)]; _centerImageView = [[UIImageView alloc]initWithFrame:CGRectMake(KViewW, 0, KViewW, KViewH)];
_centerImageView.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]
initWithTarget:self
action:@selector(scrollViewClick:)]; [_centerImageView addGestureRecognizer:tap]; [self.mainScrollView addSubview:_leftImageView];
[self.mainScrollView addSubview:_rightImageView];
[self.mainScrollView addSubview:_centerImageView];

核心代码

根据scrollview的偏移量来计算当前位于的imageView。然后重置左右两个image的图片

#pragma mark - 无限滚动核心
- (void)reloadImageViews {
// 获取当前offset
CGPoint scrollViewOffset = [_mainScrollView contentOffset];
// 如果当前位于centerImageView
if (scrollViewOffset.x == 2 * _mainScrollView.bounds.size.width) {
if (_currentImageIndex == kImageCount - 1) {
_currentImageIndex = 0;
}else { _currentImageIndex = (_currentImageIndex +1) % kImageCount;
} } else if (scrollViewOffset.x == 0) {
if (_currentImageIndex == 0) {
_currentImageIndex = kImageCount - 1;
}else { _currentImageIndex = (_currentImageIndex -1) % kImageCount;
} } _centerImageView.image =
[UIImage imageNamed:_picDataArray[self.currentImageIndex]]; // 重新设置左右图片
_leftImageView.image =
[UIImage imageNamed:_picDataArray[self.leftImageIndex]]; _rightImageView.image =
[UIImage imageNamed:_picDataArray[self.rightImageIndex]]; _titleLabel.text = _titleDataArray[self.currentImageIndex];
_pageControl.currentPage = self.currentImageIndex;}

滚动过程中调整pageControl

// MARK: - 滚动过程中
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint scrollViewOffset = scrollView.contentOffset; if (scrollViewOffset.x > 1.5 * _mainScrollView.bounds.size.width) { _pageControl.currentPage = self.rightImageIndex; _titleLabel.text = _titleDataArray[self.rightImageIndex]; } else if (scrollViewOffset.x < 0.5 * _mainScrollView.bounds.size.width) { _pageControl.currentPage = self.leftImageIndex; _titleLabel.text = _titleDataArray[self.leftImageIndex];
} else {
_pageControl.currentPage = self.currentImageIndex; _titleLabel.text = _titleDataArray[self.currentImageIndex];
}
}

效果

ios图片轮播效果

代码地址如下:
http://www.demodashi.com/demo/11959.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,954
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,479
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,291
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,108
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,740
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,774