小浣熊博客

2018-09-25更新: Swift版流水标签,此版本不是基于QMUI,避免依赖

注:项目是基于QMUI框架,因此实现此效果需pod或手动安装QMUIKit框架
项目github下载

步骤

1. 安装QMUI框架:安装方法
2. 在AppDelegate启动QMUI的配置模板和渲染全局控件样式:设置方法
3. 在pod文件中找到QMUIConfigurationTemplate,将.h和.m拖入到目录下,如果出现文件重复,将pod中.h文件代码注释掉即可.(这里也可以下载QMUI官方Demo,将Demo中的组件Common文件直接拖入并复制到自己的项目中,出现重复文件报错处理方法同pod一样处理即可)
4. 在viewController文件中导入#import "QMUICommonViewController.h"
5. 编写代码如下:

#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 的一个功能,这里将其拆分开来