1.代码如下:
typedef NS_ENUM(NSInteger,ScrollMenuViewStyle){
/**没有底部线*/
ScrollMenuViewStyleDefault,
/**底部线的宽度=视图宽度 / 菜单数量*/
ScrollMenuViewStyleValue1,
/**底部线的宽度固定*/
ScrollMenuViewStyleValue2,
};
@class ScrollMenuView;
@protocol ScrollMenuViewDelegate <NSObject>
- (void)scrollMenuView:(ScrollMenuView *)view didClickItemAtIndex:(NSInteger )index;
@end
@interface ScrollMenuView : UIView
/**当前菜单下标*/
@property (nonatomic, assign)NSInteger currentIndex;
/**菜单名称数组*/
@property (nonatomic, strong)NSArray *items;
@property (nonatomic, weak)id<ScrollMenuViewDelegate>delegate;
/**初始化*/
- (instancetype)initWithFrame:(CGRect)frame andStyle:(ScrollMenuViewStyle)style;
@end
@interface ScrollMenuButton : UIButton
+(instancetype)defaultStyleButtonWithTitle:(NSString *)title;
@end
#import "ScrollMenuView.h"
@interface ScrollMenuView ()
@property (nonatomic, strong)UIScrollView *contentScrollView;
/**被选中时底部线*/
@property (nonatomic, strong)UIView *bottomSelectedLineView;
/**按钮数组*/
@property (nonatomic, strong)NSMutableArray *itemButtons;
/**样式*/
@property (nonatomic, assign)ScrollMenuViewStyle style;
@end
@implementation ScrollMenuView
- (instancetype)initWithFrame:(CGRect)frame andStyle:(ScrollMenuViewStyle)style {
if ([super initWithFrame:frame]) {
self.style = style;
self.itemButtons = [NSMutableArray array];
[self setupView];
}
return self;
}
#pragma mark - 如果按钮太少,重新设置按钮位置
- (void)setNewLayout {
CGFloat btnWidth = self.frame.size.width / self.items.count;
CGFloat lastButtonMaxX = 0;
for (NSInteger i = 0; i < self.items.count; i++) {
ScrollMenuButton *btn = self.itemButtons[i];
btn.frame = CGRectMake(lastButtonMaxX, 0, btnWidth, btn.frame.size.height);
lastButtonMaxX += btn.frame.size.width;
if (i == 0) {
[self initBottomLineViewWithButton:btn];
}
}
}
#pragma mark - 设置菜单内容
- (void)setItems:(NSArray *)items {
_items = items;
[self setupView];
}
#pragma mark - 懒加载底部线
- (UIView *)bottomSelectedLineView {
if (!_bottomSelectedLineView) {
_bottomSelectedLineView = [[UIView alloc]init];
_bottomSelectedLineView.backgroundColor = [UIColor redColor];
}
return _bottomSelectedLineView;
}
#pragma makr - 底部线
- (void)initBottomLineViewWithButton:(ScrollMenuButton *)btn {
CGFloat lineViewWidth = self.style == ScrollMenuViewStyleValue1 ? btn.frame.size.width : 20;
CGFloat lineViewOrignalX = self.style == ScrollMenuViewStyleValue1 ? 0 : (btn.frame.size.width - lineViewWidth) / 2.0;
self.bottomSelectedLineView.frame = CGRectMake(lineViewOrignalX, self.frame.size.height - 1, lineViewWidth, 1);
}
- (void)moveBottomLineWithButton:(ScrollMenuButton *)btn
{
CGFloat lineViewWidth = self.style == ScrollMenuViewStyleValue1 ? btn.frame.size.width : 20;
CGFloat lineViewOrignalX = self.style == ScrollMenuViewStyleValue1 ? btn.frame.origin.x : btn.frame.origin.x + (btn.frame.size.width - lineViewWidth) / 2.0;
self.bottomSelectedLineView.frame = CGRectMake(lineViewOrignalX, self.height - 1, lineViewWidth, 1);
}
#pragma mark - 菜单被点击
- (void)clickItemButton:(ScrollMenuButton *)btn {
self.currentIndex = btn.tag;
if ([self.delegate respondsToSelector:@selector(scrollMenuView:didClickItemAtIndex:)]) {
[self.delegate scrollMenuView:self didClickItemAtIndex:btn.tag];
}
}
#pragma mark - 视图设置
- (void)setupView{
self.contentScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
//不显示滚动条
self.contentScrollView.showsHorizontalScrollIndicator = NO;
[self addSubview:self.contentScrollView];
//上一个按钮的最右X
CGFloat lastButtonMaxX = 0;
for (NSInteger i = 0; i < self.items.count; i++) {
ScrollMenuButton *btn = [ScrollMenuButton defaultStyleButtonWithTitle:self.items[i]];
btn.tag = i;
[btn addTarget:self action:@selector(clickItemButton:) forControlEvents:UIControlEventTouchUpInside];
btn.frame = CGRectMake(lastButtonMaxX, 0, btn.frame.size.width + 30, self.height);
btn.selected = i == 0;
lastButtonMaxX += (btn.frame.size.width + 30);
[self.contentScrollView addSubview:btn];
[self.itemButtons addObject: btn];
//设置底部线
if (i == 0) {
self.bottomSelectedLineView.hidden = self.style == ScrollMenuViewStyleDefault;
[self initBottomLineViewWithButton:btn];
[self.contentScrollView addSubview:self.bottomSelectedLineView];
}
}
self.contentScrollView.contentSize = CGSizeMake(lastButtonMaxX, 0);
if (lastButtonMaxX < self.frame.size.width) {
//由于按钮太少,从新设置视图
[self setNewLayout];
}
}
#pragma mark - 设置当前菜单下标
- (void)setCurrentIndex:(NSInteger)currentIndex {
if (currentIndex >= self.items.count) {
NSLog(@"下标溢出");
return;
}
_currentIndex = currentIndex;
for (ScrollMenuButton *btn in self.itemButtons) {
btn.selected = currentIndex == btn.tag;
if (btn.isSelected == YES) {
[UIView animateWithDuration:0.1 animations:^{
[self moveBottomLineWithButton:btn];
}];
}
}
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
@end
#pragma mark 菜单按钮
@implementation ScrollMenuButton
+ (instancetype)defaultStyleButtonWithTitle:(NSString *)title {
ScrollMenuButton *btn = [ScrollMenuButton buttonWithType:UIButtonTypeCustom];
[btn setTitle:title forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[btn setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
btn.titleLabel.font = [UIFont systemFontOfSize:17];
CGSize size = [btn.titleLabel sizeThatFits:CGSizeMake(50, 50)];
btn.frame = CGRectMake(0, 0, size.width, size.height);
return btn;
}
@end
2.使用方法:
ScrollMenuView *menu = [[ScrollMenuView alloc]initWithFrame:CGRectMake(0, 0, UI_SCREEN_WIDTH, 44) andStyle:ScrollMenuViewStyleValue2];
menu.items = @[@"热门",@"视频",@"财经频道"];
menu.delegate = self;
[self.view addSubview:menu];
#pragma mark - ScrollMenuViewDelegate
- (void)scrollMenuView:(ScrollMenuView *)view didClickItemAtIndex:(NSInteger)index {
NSLog(@"%ld",index);
}