iOS 按钮加下划线随之移动
程序员文章站
2022-06-09 20:26:37
...
效果图
自定义的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];
参考文献
推荐阅读