QMUI usage (three) – iOS search tag flow layout

Little raccoon blog
note: the project is based on the QMUI framework, so to achieve this effect, you need to pod or manually install the QMUIKit framework
project GitHub Download


  1. Installing the QMUI framework: installation methods
  2. Start the QMUI configuration template and render the global control style in AppDelegate: set method
  3. Find the QMUIConfigurationTemplate file in the pod,.H and.M into the directory, if the file repeat,.H file in pod code. (comment out here you can download the official QMUI Demo, the Common component in the Demo file directly into and copied to the project itself, duplicate file error handling the same with pod treatment)
  4. Import #import “QMUICommonViewController.h” in the viewController file”
  5. Write code as follows:
#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 = 0 (UIEdgeInsetsMake) 0, 10, 10); self.floatLayoutView.minimumItemSize = CGSizeMake (69, 29); / / the 2 word button as a minimum width of self.floatLayoutView.layer.borderWidth = PixelOne; / / self.floatLayoutView.layer.borderColor = UIColorSeparator.CGColor frame notes disappear; [self.view addSubview:self.floatLayoutView]; NSArray< NSString *> *suggestions = @[@ "Keigo Higashino", "body", "@ @ @ love", "a dream of Red Mansions", "sense and sensibility", @ @ @ "reading hot list", "free list"]; for (NSInteger I = 0; I < suggestions.count; i++ = [[QMUIGhostButton *button) {QMUIGhostButton alloc] initWithGhostType:QMUIGhostButtonColorGray]; [button setTitle:suggestions[i] forState:UIControlStateNormal]; button.titleLabel.font = UIFontMake; button.contentEdgeInsets = UIEdgeInsetsMake (14) (6, 20, 6, 20); [self.floatLayoutView addSubview:button];} UIEdgeInsets padding = UIEdgeInsetsMake (CGRectGetMaxY (self.navigationController.navigationBar.frame) + 36, 24, 36, 24); CGFloat contentW Idth = 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

Final renderings

QMUI usage (three) - iOS search tag flow layout
search tag style flow layout.Png

Note: the project originates from a function of QMUI, which is split here