iOS列表菜单按钮的灵活使用

整理一下UI界面类似这种菜单列表，自定义文字在下方的按钮的纯代码与xib的灵活使用！

看到效果图后脑袋里就出现了是用xib实现还是纯代码实现呢？前者直观添加控件及约束，后者可以自定义按钮继承使用，后期方便修改维护！因此我决定先自定义菜单竖直按钮，然后使用xib里继承使用，这样就会方便快捷些！

##第一步：先自定义文字在竖直下方的按钮 其实标题文字想在左右上下举一反三，均可调整文字位置（按钮文字的y值）self.titleLabel.frame.origin.y

#import "YYPHomeClassVerticalBtn.h"

#define YYPColor(r, g, b)   [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]
#define UI_View_Width   [UIScreen mainScreen].bounds.size.width // 屏幕宽度

@implementation YYPHomeClassVerticalBtn

- (void)layoutSubviews {
    [super layoutSubviews];
        
    CGFloat imageW = 47;
    CGFloat marginX = (UI_View_Width / 3 - imageW) * 0.5;
    CGFloat margin = 16;
    
    // 调整位置
    self.imageView.x = marginX;
    self.imageView.y = 25;
    self.imageView.width = imageW;
    self.imageView.height = imageW;
    
    self.titleLabel.width = self.width;
    self.titleLabel.y = CGRectGetMaxY(self.imageView.frame) + margin;
    self.titleLabel.centerX = self.imageView.centerX;
    self.titleLabel.height = 14;
    self.titleLabel.font = [UIFont systemFontOfSize:14];
    [self setTitleColor:YYPColor(102, 102, 102) forState:UIControlStateNormal];
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
    
}

@end
复制代码

##第二步：使用xib创建菜单列表

这次先看整体效果图，分好层级关系

1）创建两个view，分成两行; 2）在view1上创建view横间隔线，作为分割线，隔开两行; 3）在view1里创建三个button，但这个button继承上面创建的首页菜单分类按钮YYPHomeClassVerticalBtn；其中约束三个按钮等宽，距横间隔线下都为0和距view1上0，btn2距btn1左为0，距btn3右为0。同理view2的三个按钮亦如此。 4）这时六个按钮已经等分了！需要再加上两根竖线分割，在xib里拖这两个view控件需要注意，这个位置很重要，等会左右的约束需要以中间按钮btn2为参照物！参照物选取在view1和view2里最好都以中间按钮btn2，这样上下两根线能连成一根线，不会出现错位。

那么现在UI界面约束就OK了，只是我们的显示是这样的，但是这大可放心，运行效果是OK的，完全符合UI妹子设计图哟

5)切记，不要忘了，设置identifier

##第三步：在View里创建代理使用点击方法

#import <UIKit/UIKit.h>
@class YYPHomeClassCell;

@protocol HomeClassListDelegate <NSObject>
- (void)homeClassListClick:(UIButton *)button;
@end

@interface YYPHomeClassCell : UITableViewCell
@property (nonatomic, assign) id<HomeClassListDelegate> delegate;
@end
复制代码

#import "YYPHomeClassCell.h"

@implementation YYPHomeClassCell

- (IBAction)btnClick:(UIButton *)sender {
    
    NSLog(@"%@", sender.titleLabel.text);
    
    if ([self.delegate respondsToSelector:@selector(homeClassListClick:)]) {
        [self.delegate homeClassListClick:sender];
    }
}

@end
复制代码

##第四步：使用代理方法在Controller里操作点击事件 根据按钮标题去处理相关点击事件，具体上代码：

#import "YYPHomeController.h"
#import "YYPHomeClassCell.h"

static NSString *homeClassCellID = @"homeClass_cell";


@interface YYPHomeController () <HomeClassListDelegate>

@end

@implementation YYPHomeController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = YYPBackgroundColor;
    self.navigationItem.title = @"首页";
    
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    
    // 通过xib创建的view
    [self.tableView registerNib:[UINib nibWithNibName:@"YYPHomeClassCell" bundle:nil] forCellReuseIdentifier:homeClassCellID];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 1;
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    YYPHomeClassCell *cell = [tableView dequeueReusableCellWithIdentifier:homeClassCellID];
    cell.delegate = self;
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}

#pragma mark - UITableViewDelegate

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    
    return 10.0;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(nonnull NSIndexPath *)indexPath {
    
    return 250.0;
}

#pragma mark - 首页分类列表 HomeClassListDelegate

- (void)homeClassListClick:(UIButton *)button { // 处理相关点击事件
    
    if ([button.titleLabel.text isEqualToString:@"商品销售"]) {
        
    } else if ([button.titleLabel.text isEqualToString:@"预约服务"]) {
        
    } else if ([button.titleLabel.text isEqualToString:@"会员管理"]) {
        
    } else if ([button.titleLabel.text isEqualToString:@"库存管理"]) {
        
    } else if ([button.titleLabel.text isEqualToString:@"统计查询"]) {
        
    } else if ([button.titleLabel.text isEqualToString:@"设置"]) {
        
    }
}

@end
复制代码

如果你觉得某一点对你有启发有用，请点一个喜欢，谢谢啦