欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

iOS 按钮加下划线随之移动

程序员文章站 2022-06-09 20:26:37
...

效果图

iOS 按钮加下划线随之移动
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 控件]按钮下划线随点击事件移动

相关标签: UI控件