iOS利用UIScrollView的pagingEnabled自定义翻页宽度

Posted 2021-09-01 想名真难

用到UIScrollview的翻页效果时，有时需要显示一部分左右的内容，但是UIScrollView的PagingEnabled只能翻过整页，下面几个简单的设置即可实现

关键点：

1. 创建一个继承UIView的视图PageView，并设置clipsToBounds＝ YES

2. 添加一个UIscrollView控件，将其宽度设置为自定义翻页的宽度

3. 设置UIScrollview 的clipsToBounds＝ NO

4. 确保PageView的宽度大于UIScrollView的宽度用于显示预览内容

5. 重写本View的hittest方法，为了确保用户滑动UIscrollview以外的空间时也可以触发UIscrollview滑动

ok！ 下面是代码，为了方便，使用图片作为显示的每一页

#import <UIKit/UIKit.h>

@interface PageView : UIView

-(void)loadImages:(NSArray *)array;

@end


------------------------------------


#import "PageView.h"

#define kLJItemWidth 200

@interface PageView()
@property (nonatomic, strong) UIScrollView *scrollview;
@end

@implementation PageView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor cyanColor];
        [self addSubview:self.scrollview];
        self.clipsToBounds = YES;
    }

    return self;
}

-(void)loadImages:(NSArray *)array {
    int index = 0;
    [self.scrollview.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

    for(NSString * name in array){
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:name]];
        imageView.contentMode = UIViewContentModeScaleAspectFit;
        CGRect fra = imageView.frame;
        fra.size.width = kLJItemWidth;
        fra.origin.x = index * kLJItemWidth + kLJItemWidth*0.5;
        imageView.frame = fra;
        imageView.backgroundColor = [self randomColor];
        imageView.userInteractionEnabled = YES;
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)];
        [imageView addGestureRecognizer:tap];
        [self.scrollview addSubview:imageView];

        index++;
    }
    self.scrollview.contentSize = CGSizeMake(self.scrollview.frame.size.width*index, self.scrollview.frame.size.height);
}

- (void)tapAction:(UITapGestureRecognizer *)tap {
    NSLog(@"你点到我了");
}

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    UIView *view = [super hitTest:point withEvent:event];
    if ([view isEqual:self])
    {
        for (UIView *subview in self.scrollview.subviews)
        {
            CGPoint offset = CGPointMake(point.x - self.scrollview.frame.origin.x + self.scrollview.contentOffset.x - subview.frame.origin.x,
                                         point.y - self.scrollview.frame.origin.y + self.scrollview.contentOffset.y - subview.frame.origin.y);

            if ((view = [subview hitTest:offset withEvent:event]))
            {
                return view;
            }
        }
        return self.scrollview;
    }
    return view;
}

- (UIScrollView *)scrollview {
    if (!_scrollview) {
        UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kLJItemWidth, self.frame.size.height)];
        scroll.pagingEnabled = YES;
        scroll.clipsToBounds = NO;
        scroll.backgroundColor = [UIColor grayColor];
        scroll.showsHorizontalScrollIndicator = NO;
        _scrollview = scroll;
    }
    return _scrollview;
}

- (UIColor *)randomColor {
    CGFloat hue = ( arc4random() % 256 / 256.0 );  //0.0 to 1.0
    CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5;  // 0.5 to 1.0,away from white
    CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5;  //0.5 to 1.0,away from black
    return [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];
}

@end

外界调用:

- (void)viewDidLoad {
    [super viewDidLoad];

    // UIScrollViewDecelerationRateNormal  0.998
    // UIScrollViewDecelerationRateFast  0.99
    // CGFLOAT_MIN   2.225073858507201e-308
    // 设置decelerationRate有效, 但是效果没有那么大
//    self.textView.decelerationRate = 0.00001;

    // 这种方案更靠谱
    PageView *page = [[PageView alloc] initWithFrame:CGRectMake(10, 100, 400, 150)];
    [self.view addSubview:page];
    [page loadImages:@[@"WX20210802-110308",@"WX20210802-110308",
                       @"WX20210802-110308",@"WX20210802-110308",
                       @"WX20210802-110308",@"WX20210802-110308",
                       @"WX20210802-110308",@"WX20210802-110308"] ];

}