2018-09-25更新: Swift版流水标签,此版本不是基于QMUI,避免依赖
注:项目是基于QMUI框架,因此实现此效果需pod或手动安装QMUIKit框架
项目github下载
步骤
- 安装QMUI框架:安装方法
- 在AppDelegate启动QMUI的配置模板和渲染全局控件样式:设置方法
- 在pod文件中找到QMUIConfigurationTemplate,将.h和.m拖入到目录下,如果出现文件重复,将pod中.h文件代码注释掉即可.(这里也可以下载QMUI官方Demo,将Demo中的组件Common文件直接拖入并复制到自己的项目中,出现重复文件报错处理方法同pod一样处理即可)
- 在viewController文件中导入
#import "QMUICommonViewController.h" - 编写代码如下:
#import "ViewController.h"
#import "QMUICommonViewController.h"
@interface ViewController ()
@property(nonatomic, strong) QMUIFloatLayoutView *floatLayoutView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"QMUIFloatLayoutView";
self.floatLayoutView = [[QMUIFloatLayoutView alloc] init];
self.floatLayoutView.padding = UIEdgeInsetsMake(12, 12, 12, 12);
self.floatLayoutView.itemMargins = UIEdgeInsetsMake(0, 0, 10, 10);
self.floatLayoutView.minimumItemSize = CGSizeMake(69, 29);// 以2个字的按钮作为最小宽度
self.floatLayoutView.layer.borderWidth = PixelOne; //边框注释即消失
self.floatLayoutView.layer.borderColor = UIColorSeparator.CGColor;
[self.view addSubview:self.floatLayoutView];
NSArray<NSString *> *suggestions = @[@"东野圭吾", @"三体", @"爱", @"红楼梦", @"理智与情感", @"读书热榜", @"免费榜"];
for (NSInteger i = 0; i < suggestions.count; i++) {
QMUIGhostButton *button = [[QMUIGhostButton alloc] initWithGhostType:QMUIGhostButtonColorGray];
[button setTitle:suggestions[i] forState:UIControlStateNormal];
button.titleLabel.font = UIFontMake(14);
button.contentEdgeInsets = UIEdgeInsetsMake(6, 20, 6, 20);
[self.floatLayoutView addSubview:button];
}
UIEdgeInsets padding = UIEdgeInsetsMake(CGRectGetMaxY(self.navigationController.navigationBar.frame) + 36, 24, 36, 24);
CGFloat contentWidth = CGRectGetWidth(self.view.bounds) - UIEdgeInsetsGetHorizontalValue(padding);
CGSize floatLayoutViewSize = [self.floatLayoutView sizeThatFits:CGSizeMake(contentWidth, CGFLOAT_MAX)];
self.floatLayoutView.frame = CGRectMake(padding.left, padding.top, contentWidth, floatLayoutViewSize.height);
}
@end
最终效果图
搜索标签样式流水布局.png
注:项目源于 QMUI 的一个功能,这里将其拆分开来
