iOS iCarousel实现视图水平滑动(中间放大,两边缩小)选择影片效果 ...
参考资料:http://www.jianshu.com/p/718ef0e3b611
使用到的第三方库:iCarousel。
使用:iCarousel使用方式与UITableView相似,具体看代码。
#import "ViewController.h"
#import "iCarousel.h"
@interface ViewController ()<iCarouselDelegate,iCarouselDataSource>
@property (nonatomic, strong) iCarousel *filmCarousel;
@property (nonatomic, strong) NSMutableArray *filmImageNameArr;
@property (nonatomic, strong) NSMutableArray *filmNameArr;
@property (nonatomic, strong) UIView *selectView;
@property (nonatomic, strong) UILabel *filmNameLab;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self.view addSubview:self.filmCarousel];
self.filmNameLab = [[UILabel alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(self.filmCarousel.frame), self.view.frame.size.width, 44)];
self.filmNameLab.font = [UIFont systemFontOfSize:20];
self.filmNameLab.textAlignment = NSTextAlignmentCenter;
[self.view addSubview:self.filmNameLab];
}
#pragma mark - iCarouselDataSource
-(NSInteger)numberOfItemsInCarousel:(iCarousel *)carousel{
return self.filmImageNameArr.count;
}
-(UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSInteger)index reusingView:(UIView *)view{
UIImage *image = [UIImage imageNamed:[self.filmImageNameArr objectAtIndex:index]];
if (view == nil) {
view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 80, 120)];
view.backgroundColor = [UIColor clearColor];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(2, 2, 76, 116)];
imageView.tag = 1000+index;
[view addSubview:imageView];
}
UIImageView *imageView = [view viewWithTag:1000+index];
imageView.image = image;
return view;
}
#pragma mark - iCarouselDelegate
- (void)carouselDidEndScrollingAnimation:(iCarousel *)carousel{
NSLog(@"___1 %lu",carousel.currentItemIndex);
UIView *view = carousel.currentItemView;
view.backgroundColor = [UIColor whiteColor];
self.selectView = view;
self.filmNameLab.text = self.filmNameArr[carousel.currentItemIndex];
}
- (void)carouselDidScroll:(iCarousel *)carousel{
NSLog(@"___2 %lu",carousel.currentItemIndex);
if (self.selectView != carousel.currentItemView) {
self.selectView.backgroundColor = [UIColor clearColor];
UIView *view = carousel.currentItemView;
view.backgroundColor = [UIColor whiteColor];
self.filmNameLab.text = self.filmNameArr[carousel.currentItemIndex];
}
}
- (void)carouselCurrentItemIndexDidChange:(iCarousel *)carousel{
NSLog(@"___3 %lu",carousel.currentItemIndex);
self.selectView = carousel.currentItemView;
}
-(CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform{
static CGFloat max_sacle = 1.0f;
static CGFloat min_scale = 0.8f;
if (offset <= 1 && offset >= -1) {
float tempScale = offset < 0 ? 1+offset : 1-offset;
float slope = (max_sacle - min_scale) / 1;
CGFloat scale = min_scale + slope*tempScale;
transform = CATransform3DScale(transform, scale, scale, 1);
}else{
transform = CATransform3DScale(transform, min_scale, min_scale, 1);
}
return CATransform3DTranslate(transform, offset * self.filmCarousel.itemWidth * 1.4, 0.0, 0.0);
}
#pragma mark - LazyLoad
-(iCarousel *)filmCarousel{
if (_filmCarousel == nil) {
_filmCarousel = [[iCarousel alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height / 2 - 100, self.view.frame.size.width, 150)];
_filmCarousel.delegate = self;
_filmCarousel.dataSource = self;
_filmCarousel.backgroundColor = [UIColor lightGrayColor];
_filmCarousel.bounces = NO;
_filmCarousel.pagingEnabled = YES;
_filmCarousel.type = iCarouselTypeCustom;
}
return _filmCarousel;
}
- (NSMutableArray *)filmImageNameArr{
if (!_filmImageNameArr) {
_filmImageNameArr = [NSMutableArray array];
for (int i = 1; i< 6; i++) {
[_filmImageNameArr addObject:[NSString stringWithFormat:@"defaultFilm%d",i]];
}
}
return _filmImageNameArr;
}
- (NSMutableArray *)filmNameArr{
if (!_filmNameArr) {
_filmNameArr = [NSMutableArray array];
for (int i = 1; i< 6; i++) {
[_filmNameArr addObject:[NSString stringWithFormat:@"film %d",i]];
}
}
return _filmNameArr;
}
@end
运行效果:
![](http://upload-images.jianshu.io/upload_images/1690826-e5055e312bb18112.gif?imageMogr2/auto-orient/strip)
运行效果