快捷導(dǎo)航

IOS 仿時(shí)光網(wǎng)選票UI實(shí)例代碼

更新時(shí)間：2016年09月22日 10:38:22 作者：康大亮

這篇文章主要介紹了IOS 仿時(shí)光網(wǎng)選票UI實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

一、項(xiàng)目簡(jiǎn)介

該項(xiàng)目利用UIScrollView的各種滾動(dòng)事件的監(jiān)聽，仿造時(shí)光網(wǎng)選擇電影票的UI而開發(fā)的一個(gè)自定義View。使用簡(jiǎn)單，可擴(kuò)展性很強(qiáng)。具備點(diǎn)擊每個(gè)Item進(jìn)行選票功能，選票居中功能，滑動(dòng)時(shí)自動(dòng)選擇距離中間最近的View處于選中狀態(tài)，而且對(duì)于滑動(dòng)時(shí)松開手的時(shí)候是否有初始速度進(jìn)行了區(qū)分處理。案例演示如下：<br/>

仿時(shí)光網(wǎng)選票UI

二、項(xiàng)目講解

1、初始化UIScrollView中每個(gè)Item的View，把每個(gè)View放到_viewArray數(shù)組中，方便接下來的定位和管理。每一個(gè)View中包含一個(gè)UIImageView，把每一個(gè)UIImageView放在_imageViewArray數(shù)組中，方便接下來的進(jìn)行隨著滑動(dòng)的放大和縮小操作。

-(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、在滑動(dòng)的過程中，我們實(shí)時(shí)的需要改變計(jì)算哪一個(gè)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、點(diǎn)擊某一個(gè)Item，讓Item處于中間選中狀態(tài)。

-(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、當(dāng)用戶在滑動(dòng)結(jié)束，并具有初始速度的時(shí)候，當(dāng)滑動(dòng)停止的時(shí)候，我們需要把距離中間最近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、當(dāng)用戶在滑動(dòng)結(jié)束的時(shí)候，但是沒有初始速度的時(shí)候，此時(shí)不會(huì)觸發(fā)-(void)scrollViewDidEndDecelerating:(UIScrollView )scrollView方法，我們需要在-(void)scrollViewDidEndDragging:(UIScrollView )scrollView willDecelerate:(BOOL)decelerate方法中，進(jìn)行處理。

-(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、注意點(diǎn)，設(shè)置_scrollview.decelerationRate = UIScrollViewDecelerationRateFast;減慢UIScrollView滑動(dòng)速度。會(huì)使用戶體驗(yàn)更好。

三、項(xiàng)目使用

1、本項(xiàng)目支持CocosPod，引用工程代碼如下：

pod 'YXFilmSelectView', '~> 0.0.1'

2、使用方法

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

3、提供YXFilmSelectViewDelegate代理，用于每一個(gè)Item處于選中狀態(tài)的處理。

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

四、Demo下載地址

Demo下載地址

以上就是IOS 仿時(shí)光網(wǎng)選票UI實(shí)例，有需要的朋友可以參考下，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: