博客> iOS开发UI篇--YXFilmSelectView(一个酷炫的电影选票View)
iOS开发UI篇--YXFilmSelectView(一个酷炫的电影选票View)
2019-05-21 13:18 评论:0 阅读:287 月华七子
ios UI 电影选票

一、项目简介

该项目利用UIScrollView的各种滚动事件的监听,仿造时光网选择电影票的UI而开发的一个自定义View。使用简单,可扩展性很强。具备点击每个Item进行选票功能,选票居中功能,滑动时自动选择距离中间最近的View处于选中状态,而且对于滑动时松开手的时候是否有初始速度进行了区分处理。案例演示如下:

二、项目讲解

1、初始化UIScrollView中每个Item的View,把每个View放到_viewArray数组中,方便接下来的定位和管理。每一个View中包含一个UIImageView,把每一个UIImageView放在_imageViewArray数组中,方便接下来的进行随着滑动的放大和缩小操作。

-(instancetype)initViewWithImageArray:(NSArray *)imageArray{
    if (!imageArray) {
        return nil;
    }
    if (imageArray.count<1 xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed i=0; xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed>_imageViewArray.count-2||currentIndex<0 xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed>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 xss=removed xss=removed>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下载地址:这是一个我的iOS交流群:624212887,群文件自行下载,不管你是小白还是大牛热烈欢迎进群 ,分享面试经验,讨论技术, 大家一起交流学习成长!希望帮助开发者少走弯路。——点击:加入

如果觉得对你还有些用,就关注小编+喜欢这一篇文章。你的支持是我继续的动力。

下篇文章预告:使用CAShapeLayer实现复杂的View的遮罩效果

文章来源于网络,如有侵权,请联系小编删除。

收藏
0
sina weixin mail 回到顶部