iOS 按钮加下划线随之移动

效果图

自定义的View

在自定义View里写好button及下划线，使用时直接调用View即可

#define UNDERLINETAG 2000
#define UNDERLINEDISTANCE 10
#define UNDERLINEHEIGHT 2

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface ButtonView : UIView

@property (nonatomic, strong) NSArray *items;
@property (nonatomic, strong) NSMutableArray *buttonsArray;
@property (nonatomic) NSInteger selectedIndex;

- (instancetype) initWithItems:(NSArray *) items;

@end

NS_ASSUME_NONNULL_END

- (instancetype)initWithItems:(NSArray *)items {
    self = [super init];
    if (self) {
        self.items = items;
        self.buttonsArray = [[NSMutableArray alloc] init];
        //初始化button
        int i = 0;
    	for (NSString *titleStr in _items) {
    		UIButton *button = [[UIButton alloc] init];
   			[_buttonsArray addObject:button];
    		button.tag = 1000 + i;
     		[button setTitle:titleStr forState:UIControlStateNormal];
     		[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
     		[button addTarget:self action:@selector(buttonAction:) forControlEvents:UIControlEventTouchUpInside];
       		[self addSubview:button];
      		i++;
  	  	}
    	//初始化下划线
    	UIView *underLine = [[UIView alloc] init];
  	 	underLine.backgroundColor = [UIColor blackColor];
   	 	underLine.tag = UNDERLINETAG;
   		underLine.layer.cornerRadius = 5;
    	[self addSubview:underLine];
        //设置最初显示在第一个button
        self.selectedIndex = 0;
        [self selectButtonWithIndex:0];

    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    CGFloat width = CGRectGetWidth(self.frame) / _items.count; //每个button平均宽度
    CGFloat height = CGRectGetHeight(self.frame); //给定高度
    for (int i = 0; i < _items.count; i++) {
        UIButton *button = (UIButton *)[self viewWithTag:1000 + i];
        if (button != nil) {
            button.frame = CGRectMake(i * width, 0, width, height);
        }
    }
    
    UIView *underLine = [self viewWithTag:UNDERLINETAG];
    CGFloat underLineW = width - 2 * UNDERLINEDISTANCE;
    if (underLine != nil) {
        underLine.frame = CGRectMake(self.selectedIndex * underLineW + UNDERLINEDISTANCE, height - UNDERLINEHEIGHT, underLineW, UNDERLINEHEIGHT);
    }
}

button被点击后执行点击事件，利用selectedIndex的set方法改变下划线位置

- (void)buttonAction:(UIButton *)button {
    NSInteger index = button.tag - 1000;
    if (index == self.selectedIndex)
        return;
    self.selectedIndex = index;
}

//调用selectedIndex的setter方法
- (void)setSelectedIndex:(NSInteger)selectedIndex {
    if (_selectedIndex == selectedIndex)
        return;
    _selectedIndex = selectedIndex;
    [self selectButtonWithIndex:selectedIndex];
}

- (void)selectButtonWithIndex:(NSInteger)index {
    CGFloat width = CGRectGetWidth(self.frame) / _items.count;
    CGFloat height = CGRectGetHeight(self.frame);
    CGFloat underLineW = width - 2 * UNDERLINEDISTANCE;
    [UIView animateWithDuration:.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        UIView *underLine = [self viewWithTag:UNDERLINETAG];
        if (underLine != nil) {
            underLine.frame = CGRectMake(index * width + UNDERLINEDISTANCE, height - UNDERLINEHEIGHT, underLineW, UNDERLINEHEIGHT);
        }
    } completion:^(BOOL finished) {
        
    }];
}

使用及button的自定义点击事件添加

这里我只想到了用数组将button存起来然后遍历button设置点击事件

    ButtonView *view = [[ButtonView alloc] initWithItems:@[@"嘿嘿嘿", @"哈哈哈", @"啦啦啦"]];
    view.frame = CGRectMake(0, 100, self.view.bounds.size.width, 50);
    for (UIButton *button in view.buttonsArray) {
        if (button.tag == 1001) {
            [button addTarget:self action:@selector(clickOne) forControlEvents:UIControlEventTouchUpInside];
        } else if (button.tag == 1002) {
            [button addTarget:self action:@selector(clickTwo) forControlEvents:UIControlEventTouchUpInside];
        } else {
            ;
        }
    }
    [self.view addSubview:view];

参考文献

[iOS 控件]按钮下划线随点击事件移动