IOS开发UI篇--YXFilmSelectView(一个酷炫的电影选票View)
2016-01-05 13:07
399 查看
一、项目简介
该项目利用UIScrollView的各种滚动事件的监听,仿造时光网选择电影票的UI而开发的一个自定义View。使用简单,可扩展性很强。具备点击每个Item进行选票功能,选票居中功能,滑动时自动选择距离中间最近的View处于选中状态,而且对于滑动时松开手的时候是否有初始速度进行了区分处理。案例演示如下:![](http://img.my.csdn.net/uploads/201601/05/1451968837_3300.gif)
二、项目讲解
1、初始化UIScrollView中每个Item的View,把每个View放到_viewArray数组中,方便接下来的定位和管理。每一个View中包含一个UIImageView,把每一个UIImageView放在_imageViewArray数组中,方便接下来的进行随着滑动的放大和缩小操作。
-(instancetype)initViewWithImageArray:(NSArray *)imageArray{ if (!imageArray) { return nil; } if (imageArray.count<1) { return nil; } NSInteger totalNum = imageArray.count; self = [super initWithFrame:CGRectMake(0, 40, SCREEN_WIDTH, 120)]; if (self) { _scrollview = [[UIScrollView alloc] initWithFrame:self.bounds]; _scrollview.contentSize = CGSizeMake(LEFT_SPACE*2+SELECT_VIEW_WIDTH+(totalNum-1)*NORMAL_VIEW_WIDTH+(totalNum-1)*ITEM_SPACE, 120); _scrollview.delegate = self; _scrollview.showsHorizontalScrollIndicator = NO; _scrollview.decelerationRate = UIScrollViewDecelerationRateFast; [self addSubview:_scrollview]; UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(-SCREEN_WIDTH, 0, _scrollview.contentSize.width+SCREEN_WIDTH*2, _scrollview.contentSize.height-20)]; backView.backgroundColor = [UIColor lightGrayColor]; [_scrollview addSubview:backView]; _imageViewArray = [NSMutableArray array]; _viewArray = [NSMutableArray array]; CGFloat offsetX = LEFT_SPACE; for (int i=0; i<totalNum; i++) { UIView *view = [[UIView alloc] initWithFrame:CGRectMake(offsetX, 0, NORMAL_VIEW_WIDTH, NORMAL_VIEW_HEIGHT)]; [_scrollview addSubview:view]; [_viewArray addObject:view]; offsetX += NORMAL_VIEW_WIDTH+ITEM_SPACE; CGRect rect; if (i==0) { rect = CGRectMake(-(SELECT_VIEW_WIDTH-NORMAL_VIEW_WIDTH)/2, 0, SELECT_VIEW_WIDTH, SELECT_VIEW_HEIGHT); }else{ rect = CGRectMake(0, 0, NORMAL_VIEW_WIDTH, NORMAL_VIEW_HEIGHT); } UIImageView *imageView = [[UIImageView alloc] initWithFrame:rect]; imageView.image = imageArray[i]; imageView.tag = i; imageView.userInteractionEnabled = YES; UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clickImage:)]; [imageView addGestureRecognizer:tap]; [view addSubview:imageView]; [_imageViewArray addObject:imageView]; } } return self; }
2、在滑动的过程中,我们实时的需要改变计算哪一个Item距离中间最近,在过渡到最中间的过程中,选中的Item距离中间越近,选中Item的frame越大,反则越小。
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{ int currentIndex = scrollView.contentOffset.x/(NORMAL_VIEW_WIDTH+ITEM_SPACE); if (currentIndex>_imageViewArray.count-2||currentIndex<0) { return; } int rightIndex = currentIndex+1; UIImageView *currentImageView = _imageViewArray[currentIndex]; UIImageView *rightImageView = _imageViewArray[rightIndex]; CGFloat scale = (scrollView.contentOffset.x-currentIndex*(NORMAL_VIEW_WIDTH+ITEM_SPACE))/(NORMAL_VIEW_WIDTH+ITEM_SPACE); //NSLog(@"%f",scale); CGFloat width = SELECT_VIEW_WIDTH-scale*(SELECT_VIEW_WIDTH-NORMAL_VIEW_WIDTH); CGFloat height = SELECT_VIEW_HEIGHT-scale*(SELECT_VIEW_HEIGHT-NORMAL_VIEW_HEIGHT); if (width<NORMAL_VIEW_WIDTH) { width = NORMAL_VIEW_WIDTH; } if (height<NORMAL_VIEW_HEIGHT) { height = NORMAL_VIEW_HEIGHT; } if (width>SELECT_VIEW_WIDTH) { width = SELECT_VIEW_WIDTH; } if (height>SELECT_VIEW_HEIGHT) { height = SELECT_VIEW_HEIGHT; } CGRect rect = CGRectMake(-(width-NORMAL_VIEW_WIDTH)/2, 0, width, height); currentImageView.frame = rect; width = NORMAL_VIEW_WIDTH+scale*(SELECT_VIEW_WIDTH-NORMAL_VIEW_WIDTH); height = NORMAL_VIEW_HEIGHT+scale*(SELECT_VIEW_HEIGHT-NORMAL_VIEW_HEIGHT); if (width<NORMAL_VIEW_WIDTH) { width = NORMAL_VIEW_WIDTH; } if (height<NORMAL_VIEW_HEIGHT) { height = NORMAL_VIEW_HEIGHT; } if (width>SELECT_VIEW_WIDTH) { width = SELECT_VIEW_WIDTH; } if (height>SELECT_VIEW_HEIGHT) { height = SELECT_VIEW_HEIGHT; } rect = CGRectMake(-(width-NORMAL_VIEW_WIDTH)/2, 0, width, height); NSLog(@"%@",NSStringFromCGRect(rect)); rightImageView.frame = rect; }
3、点击某一个Item,让Item处于中间选中状态。
-(void)clickImage:(UITapGestureRecognizer *)tap{ UIImageView *imageView = (UIImageView *)tap.view; NSInteger tag = imageView.tag; UIView *containerView = _viewArray[tag]; CGFloat offsetX = CGRectGetMidX(containerView.frame)-SCREEN_WIDTH/2; [_scrollview scrollRectToVisible:CGRectMake(offsetX, 0, SCREEN_WIDTH, 120) animated:YES]; if (_delegate && [_delegate respondsToSelector:@selector(itemSelected:)]) { [_delegate itemSelected:tag]; } }
4、当用户在滑动结束,并具有初始速度的时候,当滑动停止的时候,我们需要把距离中间最近Item定位到最中间。
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{ int currentIndex = roundf(scrollView.contentOffset.x/(NORMAL_VIEW_WIDTH+ITEM_SPACE)); UIView *containerView = _viewArray[currentIndex]; CGFloat offsetX = CGRectGetMidX(containerView.frame)-SCREEN_WIDTH/2; [_scrollview scrollRectToVisible:CGRectMake(offsetX, 0, SCREEN_WIDTH, 120) animated:YES]; if (_delegate && [_delegate respondsToSelector:@selector(itemSelected:)]) { [_delegate itemSelected:currentIndex]; } }
5、当用户在滑动结束的时候,但是没有初始速度的时候,此时不会触发-(void)scrollViewDidEndDecelerating:(UIScrollView )scrollView方法,我们需要在-(void)scrollViewDidEndDragging:(UIScrollView )scrollView willDecelerate:(BOOL)decelerate方法中,进行处理。
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{ if (!decelerate) { int currentIndex = roundf(scrollView.contentOffset.x/(NORMAL_VIEW_WIDTH+ITEM_SPACE)); UIView *containerView = _viewArray[currentIndex]; CGFloat offsetX = CGRectGetMidX(containerView.frame)-SCREEN_WIDTH/2; [_scrollview scrollRectToVisible:CGRectMake(offsetX, 0, SCREEN_WIDTH, 120) animated:YES]; if (_delegate && [_delegate respondsToSelector:@selector(itemSelected:)]) { [_delegate itemSelected:currentIndex]; } } }
6、注意点,设置_scrollview.decelerationRate = UIScrollViewDecelerationRateFast;减慢UIScrollView滑动速度。会使用户体验更好。
三、项目使用
1、本项目支持CocosPod,引用工程代码如下:
pod 'YXFilmSelectView', '~> 0.0.1'
2、使用方法
YXFilmSelectView *filmSelectView = [[YXFilmSelectView alloc] initViewWithImageArray:imageArray]; filmSelectView.delegate = self; [self.view addSubview:filmSelectView];
3、提供YXFilmSelectViewDelegate代理,用于每一个Item处于选中状态的处理。
- (void)itemSelected:(NSInteger)index{ _containerView.backgroundColor = _colorArray[index%_colorArray.count]; _showLabel.text = [NSString stringWithFormat:@"%zi",index]; }
四、Demo下载地址
Demo下载地址如果对你有点帮助,star一下吧。
五、联系方式
微博:新浪微博博客:http://blog.csdn.net/yixiangboy
github:https://github.com/yixiangboy
相关文章推荐
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- 讲解iOS开发中基本的定位功能实现
- js判断客户端是iOS还是Android等移动终端的方法
- IOS开发环境windows化攻略
- 浅析iOS应用开发中线程间的通信与线程安全问题
- 检测iOS设备是否越狱的方法
- .net平台推送ios消息的实现方法
- 探讨Android与iOS,我们将何去何从?
- Android、iOS和Windows Phone中的推送技术详解
- IOS 改变键盘颜色代码
- 举例详解iOS开发过程中的沙盒机制与文件
- Android和IOS的浏览器中检测是否安装某个客户端的方法
- 分享一个iOS下实现基本绘画板功能的简单方法
- javascript实现阻止iOS APP中的链接打开Safari浏览器