iOS 如何让UIScrollView的子控件居中算法

前言:

项目页面翻新,原来的那个库功能挺好用,但是样式不对,一时之间不想找新的库去替换,冲冠一怒,把那个库的代码copy了一份,改写了样式。啊,好烦人的样式。

代码地址:https://github.com/gityuency/ObjectiveCTools
示例代码类名 【LetSVSCViewController】

效果图:
点击效果:


点击效果.gif

滑动效果:


滑动效果.gif

新增效果:【子控件 固定宽度、变宽、宽度放大、子控件左右带有间隙】


新的.gif

上代码!

第一节:UIScrollView内部控件是固定宽度的,或者内部控件宽度各不相同。

.h

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface MyScrollView : UIScrollView <UIScrollViewDelegate>

- (instancetype)initWithFrameFixedSubViewWidth:(CGRect)frame;

- (instancetype)initWithFrameRandomSubViewWidth:(CGRect)frame;

@end

NS_ASSUME_NONNULL_END

.m

#import "MyScrollView.h"

@interface MyScrollView ()

/// 放入子视图
@property (nonatomic, strong) NSMutableArray <UIView *> *arrayItemViews;

@end

@implementation MyScrollView

- (instancetype)initWithFrameFixedSubViewWidth:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor redColor];
        [self fixedButtonWidth];
        self.delegate = self;
    }
    return self;
}

- (instancetype)initWithFrameRandomSubViewWidth:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor redColor];
        [self randomButtonWidth];
        self.delegate = self;
    }
    return self;
}

/// 变宽 按钮
- (void)randomButtonWidth {
    UIButton *beforeButton;
    _arrayItemViews = [NSMutableArray array];
    for (int i = 0; i < 25; i ++) {
        UIButton *b = [[UIButton alloc] init];
        b.backgroundColor = [self RandomColor];
        [b setTitle:@"变宽按钮" forState:UIControlStateNormal];
        CGFloat w = 50 + (arc4random_uniform(30) / 2) * 10;
        if (beforeButton) {  //第二个按钮开始排
            b.frame = CGRectMake(CGRectGetMaxX(beforeButton.frame), 0, w, self.frame.size.height);
        } else {              //第一个按钮
            b.frame = CGRectMake(0, 0, w, self.frame.size.height);
        }
        beforeButton = b;
        [b addTarget:self action:@selector(actionButton:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:b];
        [_arrayItemViews addObject:b];
    }
    self.contentSize = CGSizeMake(CGRectGetMaxX(beforeButton.frame), self.frame.size.height);
}

/// 定宽 按钮
- (void)fixedButtonWidth {
    CGFloat w = 120;
    _arrayItemViews = [NSMutableArray array];
    for (int i = 0; i < 25; i ++) {
        UIButton *b = [[UIButton alloc] init];
        b.backgroundColor = [self RandomColor];
        [b setTitle:@"定宽按钮" forState:UIControlStateNormal];
        b.frame = CGRectMake(i * w, 0, w, self.frame.size.height);
        [b addTarget:self action:@selector(actionButton:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:b];
        [_arrayItemViews addObject:b];
    }
    self.contentSize = CGSizeMake(w * _arrayItemViews.count, self.frame.size.height);
}


/// 按钮点击事件
- (void)actionButton:(UIButton *)buttonCurrent {
    //设置滚动
    CGFloat scrollViewCenterX = self.frame.size.width * 0.5;
    if (scrollViewCenterX == 0) {  //宽度都没有,啥也不用干了
        return;
    }
    
    if (self.contentSize.width < self.frame.size.width) {
        return;                     //内容宽度小于外部宽度, 啥也不用干了
    }
    
    CGFloat buttonCenterX = buttonCurrent.center.x;
    if (buttonCenterX < scrollViewCenterX) {
        [self setContentOffset:CGPointMake(0, 0) animated:YES];
    } else if (buttonCenterX > scrollViewCenterX) {
        CGFloat unVisiableWidth = self.contentSize.width - self.frame.size.width;
        CGFloat needOffset = buttonCenterX - scrollViewCenterX;
        if (unVisiableWidth > needOffset) {  //剩下的可滑动的区域可以给与偏移
            [self setContentOffset:CGPointMake(needOffset, 0) animated:YES];
        } else {  //剩下的已经不够了, 那么就直接显示
            [self setContentOffset:CGPointMake(unVisiableWidth, 0) animated:YES];
        }
    }
}


- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    NSLog(@"停止减速 offsetX %f", scrollView.contentOffset.x);
    
    CGFloat offsetX = scrollView.contentOffset.x + self.frame.size.width * 0.5;  // 哪个按钮和这个距离最接近,就放大哪个按钮
    
    UIButton *needLargeButton;
    for (UIButton *b in _arrayItemViews) {
        if ((CGRectGetMinX(b.frame) <= offsetX) && (CGRectGetMaxX(b.frame) >= offsetX)) {
            needLargeButton = b;
            NSLog(@" %@", b.titleLabel.text);
            break;
        }
    }
    [self actionButton:needLargeButton];
}


- (UIColor *)RandomColor {
    UIColor * randomColor= [UIColor colorWithRed:((float)arc4random_uniform(256) / 255.0) green:((float)arc4random_uniform(256) / 255.0) blue:((float)arc4random_uniform(256) / 255.0) alpha:1.0];
    return randomColor;
}
@end

第二节:UIScrollView内部,选中的控件宽度变大,未选中的宽度缩小。

.h

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface YouScrollView : UIScrollView <UIScrollViewDelegate>

- (instancetype)initWithFrame:(CGRect)frame;

@end

NS_ASSUME_NONNULL_END

.m

#import "YouScrollView.h"

@interface YouScrollView ()

@property (nonatomic, strong) NSMutableArray <UIView *> *arrayItemViews;

@property (nonatomic, strong) NSArray *titleArray;

@property (nonatomic, strong) NSMutableArray *arraySmallSize;

@property (nonatomic, strong) NSMutableArray *arrayLargeSize;

@property (nonatomic) NSInteger smallFontSize;

@property (nonatomic) NSInteger largeFontSize;

@end

@implementation YouScrollView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor redColor];
        _smallFontSize = 12;
        _largeFontSize = 26;
        [self randomButtonWidth];
        self.delegate = self;
    }
    return self;
}

/// 变宽 按钮
- (void)randomButtonWidth {
    
    _arrayItemViews = [NSMutableArray array];
    
    _titleArray = @[@"按钮宽度动态放大", @"小米锅巴", @"茶π", @"冰糖雪梨", @"汇源牌肾宝", @"昆仑山", @"鲜之每日C", @"REKORDERLIG瑞可德林", @"王老吉", @"RedBull红牛", @"健力宝", @"宝矿力水特", @"维维", @"Gatorade佳得乐", @"黑牛", @"东鹏特饮", @"Starbucks星巴克", @"Maxwell麦斯威尔", @"HOGOOD后谷咖啡", @"五粮液", @"古井贡酒", @"永和豆浆", @"南方黑芝麻", @"Soyspring冰泉", @"锐澳RIO"];
    
    //先算一遍大小尺寸
    _arraySmallSize = [NSMutableArray array];
    _arrayLargeSize = [NSMutableArray array];
    for (NSString *s in _titleArray) {
        CGSize sizeS = [self needSize:s fontSize:_smallFontSize];
        CGSize sizeL = [self needSize:s fontSize:_largeFontSize];
        [_arraySmallSize addObject:@(sizeS)];
        [_arrayLargeSize addObject:@(sizeL)];
    }
    
    NSLog(@"%@  %@", _arraySmallSize, _arrayLargeSize);
    
    UIButton *beforeButton;
    for (int i = 0; i < _titleArray.count; i ++) {
        UIButton *b = [[UIButton alloc] init];
        b.backgroundColor = [self RandomColor];
        NSString *s = _titleArray[i];
        [b setTitle:s forState:UIControlStateNormal];
        //[b setTitleColor:[self RandomColor] forState:UIControlStateNormal];
        if (beforeButton) {  //第二个按钮开始排
            CGSize size = [_arraySmallSize[i] CGSizeValue];
            b.frame = CGRectMake(CGRectGetMaxX(beforeButton.frame), 0, size.width, self.frame.size.height);
            b.titleLabel.font = [UIFont systemFontOfSize:_smallFontSize];
        } else {              //第一个按钮
            CGSize size = [_arrayLargeSize[i] CGSizeValue];
            b.frame = CGRectMake(0, 0, size.width, self.frame.size.height);
            b.titleLabel.font = [UIFont systemFontOfSize:_largeFontSize];
        }
        beforeButton = b;
        [b addTarget:self action:@selector(actionButton:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:b];
        [_arrayItemViews addObject:b];
    }
    self.contentSize = CGSizeMake(CGRectGetMaxX(beforeButton.frame), self.frame.size.height);
}


/// 计算尺寸
- (CGSize)needSize:(NSString *)title fontSize:(CGFloat)fontSize {
    CGSize size = [title sizeWithAttributes:@{NSFontAttributeName : [UIFont boldSystemFontOfSize:fontSize]}];
    size.width += 20; //左右两边留 10 白
    return size;
}

/// 按钮点击事件
- (void)actionButton:(UIButton *)buttonCurrent {
    
    UIButton *beforeButton;
    for (UIButton *b in _arrayItemViews) {
        if (b == buttonCurrent) {
            NSUInteger index = [_arrayItemViews indexOfObject:b];
            CGSize size = [_arrayLargeSize[index] CGSizeValue];
            b.titleLabel.font = [UIFont systemFontOfSize:_largeFontSize];
            [UIView animateWithDuration:0.2 animations:^{
                b.frame = CGRectMake(CGRectGetMaxX(beforeButton.frame), 0, size.width, self.frame.size.height);
            }];
        } else {
            NSUInteger index = [_arrayItemViews indexOfObject:b];
            CGSize size = [_arraySmallSize[index] CGSizeValue];
            b.titleLabel.font = [UIFont systemFontOfSize:_smallFontSize];
            [UIView animateWithDuration:0.2 animations:^{
                b.frame = CGRectMake(CGRectGetMaxX(beforeButton.frame), 0, size.width, self.frame.size.height);
            }];
        }
        beforeButton = b;
    }
    
    self.contentSize = CGSizeMake(CGRectGetMaxX(beforeButton.frame), self.frame.size.height);
    
    //设置滚动
    CGFloat scrollViewCenterX = self.frame.size.width * 0.5;
    if (scrollViewCenterX == 0) {
        return;
    }
    if (self.contentSize.width < self.frame.size.width) {
        return;
    }
    
    CGFloat buttonCenterX = buttonCurrent.center.x;
    if (buttonCenterX < scrollViewCenterX) {
        [self setContentOffset:CGPointMake(0, 0) animated:YES];
    } else if (buttonCenterX > scrollViewCenterX) {
        CGFloat unVisiableWidth = self.contentSize.width - self.frame.size.width;
        CGFloat needOffset = buttonCenterX - scrollViewCenterX;
        if (unVisiableWidth > needOffset) {  //剩下的可滑动的区域可以给与偏移
            [self setContentOffset:CGPointMake(needOffset, 0) animated:YES];
        } else {  //剩下的已经不够了, 那么就直接显示
            [self setContentOffset:CGPointMake(unVisiableWidth, 0) animated:YES];
        }
    }
}

/// 代理
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    NSLog(@"停止减速 offsetX %f", scrollView.contentOffset.x);
    
    CGFloat offsetX = scrollView.contentOffset.x + self.frame.size.width * 0.5;  // 哪个按钮和这个距离最接近,就放大哪个按钮
    
    UIButton *needLargeButton;
    for (UIButton *b in _arrayItemViews) {
        if ((CGRectGetMinX(b.frame) <= offsetX) && (CGRectGetMaxX(b.frame) >= offsetX)) {
            needLargeButton = b;
            NSLog(@" %@", b.titleLabel.text);
            break;
        }
    }
    [self actionButton:needLargeButton];
}


- (UIColor *)RandomColor {
    UIColor * randomColor= [UIColor colorWithRed:((float)arc4random_uniform(256) / 255.0) green:((float)arc4random_uniform(256) / 255.0) blue:((float)arc4random_uniform(256) / 255.0) alpha:1.0];
    return randomColor;
}

@end

在控制器里使用

.m

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CGFloat sw = [UIScreen mainScreen].bounds.size.width;
    CGFloat sh = [UIScreen mainScreen].bounds.size.height;
    
    MyScrollView *scrollView1 = [[MyScrollView alloc] initWithFrameFixedSubViewWidth:CGRectMake(0, 100, sw, 80)];
    [self.view addSubview:scrollView1];
    
    MyScrollView *scrollView2 = [[MyScrollView alloc] initWithFrameRandomSubViewWidth:CGRectMake(0, 220, sw, 80)];
    [self.view addSubview:scrollView2];
    
    YouScrollView *scrollView3 = [[YouScrollView alloc] initWithFrame:CGRectMake(0, 350, sw, 80)];
    [self.view addSubview:scrollView3];
    
    CGFloat x = (sw + 1) / 2;
    UIView *line = [[UIView alloc] initWithFrame:CGRectMake(x, 0, 1, sh)];
    line.backgroundColor = [UIColor blackColor];
    [self.view addSubview:line];
}

@end

结语:

改个库也能花了我一个周末。不改还总觉得心里不痛快。为了杜绝公司UI大姐及产品挑刺,还是狠心葬送掉了美好的周末。周末就算不打游戏,躺着睡觉不也挺好么。

推荐阅读更多精彩内容