安卓有个系统Api clipToPadding
可以很简单实现App Store应用介绍图的浏览效果,找了很久也没找到iOS有对应的Api。就自己简单实现了下,在此记录一下,请看到的大佬们批评指正。
App Store的浏览效果
自己实现的浏览效果
实现逻辑
在视图上建一个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'