iOS UIScrollView实现非全屏卡片效果

先上效果图

贴上代码

#import "Leval2View.h"@interface Leval2View ()<UIScrollViewDelegate>@property (nonatomic,strong) UIScrollView * scrollView;@property (nonatomic,strong) NSArray * scrollSubViews;@property (nonatomic,strong) UIPageControl * page;@end@implementation Leval2View- (instancetype)initWithFrame:(CGRect)frame
{    self = [super initWithFrame:frame];    if (self) {        CGFloat unitW = 90;        CGFloat unitH = 130;        NSInteger count = 10;

        _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;            // 设置头像
            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;
}//重写hitTest方法,去监听发布按钮的点击,目的是为了让凸出的部分点击也有反应- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{    NSLog(@"%zd",event.subtype);    CGPoint newP = [self convertPoint:point toView:self];    if ([self pointInside:newP withEvent:event]) {        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
  • 简要说明一下重点

  • 创建一个和屏幕等宽大小的Viwe,作为UIScrollView的父控件,高度和UIScrollView一样就好, 设置UIScrollView属性的, UIScrollView的bounds设置和卡片一样大小,并设置
    _scrollView.pagingEnabled = YES;以及_scrollView.clipsToBounds = NO;这样就可以实现以单个卡片的大小为停靠单位

    2.

    // 用来这个函数使用来实现滚动时候实现卡片的放大和缩小,通过余弦函数的特性,来实现左右两边等比例放大或缩小- (void)scrollViewDidScroll:(UIScrollView *)scrollView

    3.

    // 如果没有写这个方法,那么ScrollView  frmae之外的卡片将无法响应滚动事件- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event

来源:简书

上一篇: Swift进阶 - 11个技巧

下一篇: iOS 10教程 : 如何开启第三方应用的Siri控制

分享到: 更多