仿appstore源码php,iOS 模仿App Store应用介绍图浏览效果

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

App Store的浏览效果

商店浏览效果.gif

自己实现的浏览效果

自己实现的浏览效果.gif

实现逻辑

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

具体实现代码

.h文件

#import

NS_ASSUME_NONNULL_BEGIN

@interface WXWScrollImageView : UIView

///网络图片数组

@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

@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'