ABUIKit 是一个致力于提高项目 UI 开发效率的解决方案,是对Tencent QMUI的补充与扩展,并提供更多开箱即用的功能模块
如何集成到你的项目
pod 'ABUIKit', :git => "https://github.com/whdevlab/ABUIKit"
这里只展示部分功能的使用案例
使用配置文件驱动的列表视图。为每个独立view分配native_id,并为其绑定对应数据,输入到该组件即可
native_id: 每个独立view全局唯一的ID
ABUIListView001ItemView.h
#import "ABUIListViewBaseItemView.h"
NS_ASSUME_NONNULL_BEGIN
@interface ABUIListView001ItemView : ABUIListViewBaseItemView
@property (nonatomic, strong) UILabel *titleLabel;
@end
ABUIListView001ItemView.m
#import "ABUIListView001ItemView.h"
@implementation ABUIListView001ItemView
+ (void)load {
// 注册当前View的ID到ABUIListViewMapping中
[[ABUIListViewMapping shared] registerClassString:@"ABUIListView001ItemView" native_id:@"ablist_item_001"];
}
//初始化所有UI视图
- (void)setupAdjustContents {
self.backgroundColor = [UIColor whiteColor];
self.titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
self.titleLabel.textColor = [UIColor hexColor:@"#292B32"];
self.titleLabel.font = [UIFont systemFontOfSize:16];
[self addSubview:self.titleLabel];
}
//配置UI布局,数据发生改变改变触发
- (void)layoutAdjustContents { //调用时机同layoutsubview
self.titleLabel.left = 15;
self.titleLabel.centerY = self.height/2;
}
//接收数据并设定到指定UI
- (void)reload:(NSDictionary *)item { self.titleLabel.text = item[@"data.title"];
if (item[@"css.font"] != nil) {
self.titleLabel.font = item[@"css.title.font"];
}
if (item[@"css.color"] != nil) {
self.titleLabel.textColor = item[@"css.title.color"];
}
[self.titleLabel sizeToFit];
}
@end
self.mainListView = [[ABUIListView alloc] initWithFrame:self.view.bounds];
self.mainListView.delegate = self;
//启用占位图,当数据为空时启用
self.mainListView.enableSeat = true;
//占位图标题
self.mainListView.seatTitle = @"暂无订单";
//占位图图片
self.mainListView.seatImageName = @"noOrder";
[self.view addSubview:self.mainListView];
NSArray *dataList = @[
@{
@"native_id":@"abuilist_item_001",
@"data.title":@"设置"
},
@{
@"native_id":@"abuilist_item_001",
@"data.title":@"卡包"
}
];
//输入经过绑定的数据列表到listview
[self.mainListView setDataList:dataList css:@{
@"item.size.height":@(50), //行高
@"item.rowSpacing":@(1),//行间距
}];
弹窗控制类,可控制一个用于弹窗的view视图显示到屏幕的底部,中部或顶部
UIView *prompt = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 300)];
[[ABUIPopUp shared] show:prompt from:ABPopUpDirectionBottom];
微信支付密码弹窗
ABWXPwdPopupConfig *conf = [ABWXPwdPopupConfig defaultConfig];
conf.moneyStr = @"¥100";
conf.title = @"请输入支付密码";
self.wxpwd = [[ABWXPwdPopup alloc] initWithConfig:conf];
self.wxpwd.delegate = self;
[self.wxpwd show];
微信聊天页面一比一还原,并提供简单的数据输入接口
self.chatView = [[ABUIChatView alloc] initWithFrame:self.view.bounds];
[self.chatView.toolBar.emojiButton setImage:[UIImage imageNamed:@"chatBar_face"] forState:UIControlStateNormal];
[self.chatView.toolBar.moreButton setImage:[UIImage imageNamed:@"chatBar_more"] forState:UIControlStateNormal];
self.chatView.delegate = self;
[self.view addSubview:self.chatView];
NSArray *list = @[
@{
@"native_id":@"item_chat_time",
@"title":@"昨天 09:02",
@"item.size.height":@(30)
},
@{
@"native_id":@"item_chat_text",
@"content":@"早上好",
@"p":@"l",//l 显示在左侧, r 显示在右侧
@"avatar":@"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1441836571,2166773131&fm=26&gp=0.jpg"
},
@{
@"native_id":@"item_chat_image",
@"item.size.height":@(100),
@"content":@"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604482108079&di=04eddfdc3303897a28249412d20757f2&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg",
@"p":@"r",
@"avatar":@"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1693173681,1105240714&fm=11&gp=0.jpg"
}
];
self.chatView.messageList = list;