iOS開發UI篇--YXFilmSelectView（一個酷炫的電影選票View）

時間  2019-11-17
標籤 ios 開發 yxfilmselectview 一個 選票 view 欄目 iOS 简体版
原文   原文鏈接

1、項目簡介

該項目利用UIScrollView的各類滾動事件的監聽，仿造時光網選擇電影票的UI而開發的一個自定義View。使用簡單，可擴展性很強。具有點擊每一個Item進行選票功能，選票居中功能，滑動時自動選擇距離中間最近的View處於選中狀態，並且對於滑動時鬆開手的時候是否有初始速度進行了區分處理。案例演示以下：面試

2、項目講解

一、初始化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;
}
複製代碼

二、在滑動的過程當中，咱們實時的須要改變計算哪個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;
}
複製代碼

三、點擊某一個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];
    }

}
複製代碼

四、當用戶在滑動結束，並具備初始速度的時候，當滑動中止的時候，咱們須要把距離中間最近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];
    }
}
複製代碼

五、當用戶在滑動結束的時候，可是沒有初始速度的時候，此時不會觸發-(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];
        }
    }
}
複製代碼

六、注意點，設置_scrollview.decelerationRate = UIScrollViewDecelerationRateFast;減慢UIScrollView滑動速度。會使用戶體驗更好。

3、項目使用

一、本項目支持CocosPod，引用工程代碼以下：

pod 'YXFilmSelectView', '~> 0.0.1'
複製代碼

二、使用方法

YXFilmSelectView *filmSelectView = [[YXFilmSelectView alloc] initViewWithImageArray:imageArray];
    filmSelectView.delegate = self;
    [self.view addSubview:filmSelectView];
複製代碼

三、提供YXFilmSelectViewDelegate代理，用於每個Item處於選中狀態的處理。

- (void)itemSelected:(NSInteger)index{
    _containerView.backgroundColor = _colorArray[index%_colorArray.count];
    _showLabel.text = [NSString stringWithFormat:@"%zi",index];
}
複製代碼

4、Demo下載地址

Demo下載地址：這是一個個人iOS交流羣：624212887，羣文件自行下載，無論你是小白仍是大牛熱烈歡迎進羣 ，分享面試經驗，討論技術， 你們一塊兒交流學習成長！但願幫助開發者少走彎路。——點擊：加入數組

若是以爲對你還有些用，就關注小編+喜歡這一篇文章。你的支持是我繼續的動力。bash

下篇文章預告：使用CAShapeLayer實現複雜的View的遮罩效果網絡

文章來源於網絡，若有侵權，請聯繫小編刪除。學習

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程