iOS UIScrollView實現非全屏卡片效果

先上效果圖

貼上代碼

#import "Leval2View.h"@interface Leval2View ()<UIScrollViewDelegate>@property (nonatomic,strong) UIScrollView * scrollView;@property (nonatomic,strong) NSArray * scrollSubViews;@property (nonatomic,strong) UIPageControl * page;@[email protected] 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;這樣就可以實現以單個卡片的大小為??康ノ?/pre>

    2.

    // 用來這個函數使用來實現滾動時候實現卡片的放大和縮小,通過余弦函數的特性,來實現左右兩邊等比例放大或縮小- (void)scrollViewDidScroll:(UIScrollView *)scrollView

    3.

    // 如果沒有寫這個方法,那么ScrollView  frmae之外的卡片將無法響應滾動事件- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event

來源:簡書

上一篇: Swift進階 - 11個技巧

下一篇: iOS 10教程 : 如何開啟第三方應用的Siri控制

分享到: 更多
即时比分 牌九至尊现金版下载 2018全年无错30码特围 彩无敌计划 时时彩大底 欢乐麻将 网上兼职彩票投注是真的吗 11选5必赢计划软件 上海时时最快开奖结果 北京pk赛车合法么 mg游戏中心官网 麻将技巧 mg电子官方网站 扑克牌三公玩法与技巧 幸运快三大小怎么看 大乐透蓝球数字范围