先上效果图
2016-11-25 09_34_27.gif
贴上代码
#import "Leval2View.h"
@interface Leval2View ()<UIScrollViewDelegate>
@property (nonatomic,strong) UIScrollView * scrollView;
@property (nonatomic,strong) NSArray * scrollSubViews;
@property (nonatomic,strong) UIPageControl * page;
@property (nonatomic,strong) NSMutableArray *items;
@end
@implementation Leval2View
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
CGFloat unitW = 90;
CGFloat unitH = 130;
NSInteger count = 10;
_items = [NSMutableArray array];
_scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 100, unitW, unitH)];
_scrollView.delegate = self;
_scrollView.pagingEnabled = YES;
_scrollView.clipsToBounds = NO;
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.center = CGPointMake(self.bounds.size.width/2.0, unitH/2.0);
_scrollView.contentSize = CGSizeMake(unitW * count, unitH);
[self addSubview:_scrollView];
NSMutableArray * array = [[NSMutableArray alloc]init];
for (int i = 0; i < count; i++)
{
UIButton * leval2UnitView = [[UIButton alloc]initWithFrame:CGRectMake(i * unitW, 0, unitW, unitH)];
leval2UnitView.backgroundColor = [UIColor whiteColor];
CGRect bounds = leval2UnitView.bounds;
bounds.origin.y = bounds.size.height;
bounds.origin.x = 2;
bounds.size.height = 2;
bounds.size.width = bounds.size.width - 4;
leval2UnitView.layer.shadowPath = [UIBezierPath bezierPathWithRect:bounds].CGPath;
leval2UnitView.layer.shadowColor = [UIColor blackColor].CGColor;
leval2UnitView.layer.shadowOpacity = 0.8;
leval2UnitView.tag = i;
[leval2UnitView addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[_items addObject:leval2UnitView];
// 设置头像
UIImageView * avaterIcon = [[UIImageView alloc]initWithFrame:CGRectMake(20, 10, 50, 50)];
avaterIcon.image = [UIImage imageNamed:@"toxiang"];
avaterIcon.layer.cornerRadius = avaterIcon.frame.size.height/2.0;
avaterIcon.layer.masksToBounds = YES;
[leval2UnitView addSubview:avaterIcon];
UILabel * nameLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 75, unitW, 11)];
nameLabel.text = @"姓名";
nameLabel.textColor = [UIColor colorWithRed:0.40f green:0.40f blue:0.40f alpha:1.00f];
[leval2UnitView addSubview:nameLabel];
nameLabel.textAlignment = NSTextAlignmentCenter;
nameLabel.font = [UIFont systemFontOfSize:10];
UILabel * locationLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 94, unitW, 11)];
locationLabel.text = @"部门";
locationLabel.textAlignment = NSTextAlignmentCenter;
locationLabel.textColor = [UIColor colorWithRed:0.60f green:0.60f blue:0.60f alpha:1.00f];
locationLabel.font = [UIFont systemFontOfSize:10];
[leval2UnitView addSubview:locationLabel];
UILabel * jobLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 109, unitW, 11)];
jobLabel.text = @"职位";
jobLabel.textAlignment = NSTextAlignmentCenter;
jobLabel.textColor = [UIColor colorWithRed:0.60f green:0.60f blue:0.60f alpha:1.00f];
jobLabel.font = [UIFont systemFontOfSize:10];
[leval2UnitView addSubview:jobLabel];
[_scrollView addSubview:leval2UnitView];
[array addObject:leval2UnitView];
}
UIPageControl * page = [[UIPageControl alloc]initWithFrame:CGRectMake(0, frame.size.height - 10, frame.size.width, 10)];
page.userInteractionEnabled = NO;
page.numberOfPages = count;
page.pageIndicatorTintColor = [UIColor colorWithRed:0.77f green:0.91f blue:0.97f alpha:1.00f];
page.currentPageIndicatorTintColor = [UIColor colorWithRed:0.02f green:0.69f blue:1.00f alpha:1.00f];
_page = page;
[self addSubview:page];
_scrollSubViews = array;
if (array.count >= 2)
{
_scrollView.contentOffset = CGPointMake(unitW, 0);
page.currentPage = 1;
}
else
{
page.currentPage = 0;
}
[self scrollViewDidScroll:_scrollView];
}
return self;
}
//如果没有写这个方法,那么ScrollView frmae之外的卡片将无法响应滚动事件
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
CGPoint newP = [self convertPoint:point toView:self];
if ([self pointInside:newP withEvent:event]) {
for (UIButton *itemView in _items) {
CGRect frame = [itemView convertRect:itemView.bounds toView:self];
if (CGRectContainsPoint(frame, newP)) {
return itemView;
}
}
return self.scrollView;
}
return [super hitTest:point withEvent:event];
}
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat viewHeight = scrollView.frame.size.width;
for (UIView * subView in _scrollSubViews)
{
CGFloat y = subView.center.x - scrollView.contentOffset.x;
CGFloat p = y - viewHeight / 2;
float scale = cos(0.6 * p / viewHeight);
if (scale<0.7)
{
scale = 0.7;
}
subView.transform = CGAffineTransformMakeScale(scale, scale);
}
}
@end
- (void)btnClick:(UIButton *)btn {
[_scrollView setContentOffset:CGPointMake(btn.tag * self.scrollView.frame.size.width, 0) animated:YES];
NSLog(@"%zd",btn.tag);
}
- 简要说明一下重点
创建一个和屏幕等宽大小的Viwe,作为UIScrollView的父控件,高度和UIScrollView一样就好, 设置UIScrollView属性的, UIScrollView的bounds设置和卡片一样大小,并设置
_scrollView.pagingEnabled = YES;以及_scrollView.clipsToBounds = NO;这样就可以实现以单个卡片的大小为停靠单位
// 用来这个函数使用来实现滚动时候实现卡片的放大和缩小,通过余弦函数的特性,来实现左右两边等比例放大或缩小
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
// 如果没有写这个方法,那么ScrollView frmae之外的卡片将无法响应滚动事件
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
Git下载:传送门
