小浣熊博客

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 的一個功能,這里將其拆分開來