iOS 模仿App Store应用介绍图浏览效果

安卓有个系统Api clipToPadding可以很简单实现App Store应用介绍图的浏览效果，找了很久也没找到iOS有对应的Api。就自己简单实现了下，在此记录一下，请看到的大佬们批评指正。

App Store的浏览效果

商店浏览效果.gif

自己实现的浏览效果

自己实现的浏览效果.gif

实现逻辑

在视图上建一个scrollView留上左右边距，用来显示前后图片的侧边，左右边距地方的手势触碰盲区通过重写scrollView的触碰区域解决。通过位置计算确定imageView的frame。

具体实现代码

.h文件

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface WXWScrollImageView : UIView<UIScrollViewDelegate>

///网络图片数组
@property (copy, nonatomic) NSArray *imageURLArr;
///本地图片数组
@property (copy, nonatomic) NSArray *imageLocalArr;
///选中的当前图片，默认第一张
@property (assign, nonatomic) NSInteger currentIndex;

@end

NS_ASSUME_NONNULL_END

.m文件

#import "WXWScrollImageView.h"
#import <SDWebImage/UIImageView+WebCache.h>

@interface WXWScrollImageView () {
    UIScrollView *_scrollView;
}

@end

@implementation WXWScrollImageView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
        _scrollView.clipsToBounds = NO;
        _scrollView.showsVerticalScrollIndicator = NO;
        _scrollView.showsHorizontalScrollIndicator = NO;
        _scrollView.pagingEnabled = YES;
        _scrollView.delegate = self;
        [self addSubview:_scrollView];
        
        
    }
    return self;
}

- (void)awakeFromNib {
    [super awakeFromNib];
    
    _scrollView = [[UIScrollView alloc] init];
    _scrollView.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
    _scrollView.clipsToBounds = NO;
    _scrollView.showsVerticalScrollIndicator = NO;
    _scrollView.showsHorizontalScrollIndicator = NO;
    _scrollView.pagingEnabled = YES;
    _scrollView.delegate = self;
    [self addSubview:_scrollView];
}


- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    return _scrollView;
}

#pragma mark -method
- (void)settingImageView:(NSArray *)imagesArr type:(NSString *)type {
    CGSize size = _scrollView.frame.size;
    
    for (int i = 0; i < imagesArr.count; i++) {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i * size.width + 7.5, 0, size.width - 15, size.height)];
        if ([type isEqualToString:@"本地图片"]) {
            UIImage *image = [UIImage imageNamed:imagesArr[i]];
            imageView.image = image;
        } else if ([type isEqualToString:@"网络图片"]) {
            [imageView sd_setImageWithURL:[NSURL URLWithString:imagesArr[i]]];
        }
        imageView.contentMode = UIViewContentModeScaleAspectFill;
        imageView.layer.cornerRadius = 30;
        imageView.clipsToBounds = YES;
        imageView.layer.borderWidth = 0.5;
        imageView.layer.borderColor = UIColor.grayColor.CGColor;
        
        [_scrollView addSubview:imageView];
    }
    
    [_scrollView setContentSize:CGSizeMake(size.width * imagesArr.count, size.height)];
}

#pragma mark -SETTER
- (void)setImageURLArr:(NSArray *)imageURLArr {
    if (_imageURLArr != imageURLArr) {
        _imageURLArr = imageURLArr.copy;
        if (_imageLocalArr.count == 0) {
            [self settingImageView:_imageURLArr type:@"网络图片"];
        }
    }
}

- (void)setImageLocalArr:(NSArray *)imageLocalArr {
    if (_imageLocalArr != imageLocalArr) {
        _imageLocalArr = imageLocalArr.copy;
        if (_imageURLArr.count == 0) {
            [self settingImageView:_imageLocalArr type:@"本地图片"];
        }
    }
    
}

- (void)setCurrentIndex:(NSInteger)currentIndex {
    if (_currentIndex != currentIndex && (currentIndex <= _imageLocalArr.count || currentIndex <= _imageURLArr.count)) {
        _scrollView.contentOffset = CGPointMake(_scrollView.frame.size.width * (currentIndex - 1), 0);
    }
}

@end

pod使用

pod 'WXWScrollImageView'

github地址，能帮到您点颗小星星！！！