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

用到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 Screen_Width [UIScreen mainScreen].bounds.size.width
#define kLJItemWidth Screen_Width*0.5

@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;
        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(kLJItemWidth*0.5, 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() % 255 / 255.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"] ];

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值