整理一下UI界面类似这种菜单列表，自定义文字在下方的按钮的纯代码与xib的灵活使用！
WeChat_1470135432.jpeg
看到效果图后脑袋里就出现了是用xib实现还是纯代码实现呢？前者直观添加控件及约束，后者可以自定义按钮继承使用，后期方便修改维护！因此我决定先自定义菜单竖直按钮，然后使用xib里继承使用，这样就会方便快捷些！
文字在竖直下方的按钮.jpeg
第一步：先自定义文字在竖直下方的按钮
其实标题文字想在左右上下举一反三，均可调整文字位置（按钮文字的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，这样上下两根线能连成一根线，不会出现错位。
间隔线2-1.jpeg
间隔线2-2
那么现在UI界面约束就OK了，只是我们的显示是这样的，但是这大可放心，运行效果是OK的，完全符合UI妹子设计图哟
xib显示图
5)切记，不要忘了，设置identifier
设置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
如果你觉得某一点对你有启发有用，请点一个喜欢，谢谢啦
