diff --git a/README.md b/README.md index e1342e7..f78b669 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,193 @@ -# YXFilmSelectView -仿时光网 选票UI +##一、项目简介 +该项目利用UIScrollView的各种滚动事件的监听,仿造时光网选择电影票的UI而开发的一个自定义View。使用简单,可扩展性很强。具备点击每个Item进行选票功能,选票居中功能,滑动时自动选择距离中间最近的View处于选中状态,而且对于滑动时松开手的时候是否有初始速度进行了区分处理。案例演示如下:
![仿时光网选票UI](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_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 (widthSELECT_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 (widthSELECT_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下载地址](https://github.com/yixiangboy/YXFilmSelectView)
如果对你有点帮助,star一下吧。 + + +##五、联系方式 +微博:[新浪微博](http://weibo.com/5612984599/profile?topnav=1&wvr=6)
博客:[http://blog.csdn.net/yixiangboy ](http://blog.csdn.net/yixiangboy)
github:[https://github.com/yixiangboy](https://github.com/yixiangboy) \ No newline at end of file diff --git "a/\346\227\266\345\205\211\347\275\221\351\200\211\347\245\250UI.xcodeproj/project.xcworkspace/xcuserdata/yixiang.xcuserdatad/UserInterfaceState.xcuserstate" "b/\346\227\266\345\205\211\347\275\221\351\200\211\347\245\250UI.xcodeproj/project.xcworkspace/xcuserdata/yixiang.xcuserdatad/UserInterfaceState.xcuserstate" index 51b207a..6fe0ca4 100644 Binary files "a/\346\227\266\345\205\211\347\275\221\351\200\211\347\245\250UI.xcodeproj/project.xcworkspace/xcuserdata/yixiang.xcuserdatad/UserInterfaceState.xcuserstate" and "b/\346\227\266\345\205\211\347\275\221\351\200\211\347\245\250UI.xcodeproj/project.xcworkspace/xcuserdata/yixiang.xcuserdatad/UserInterfaceState.xcuserstate" differ