iOS搜索热门标签流布局—自动换行

iOS搜索热门标签流布局—自动换行

//创建标签流UI
-(void)createLabelUI{

#pragma mark ============== 标签流布局 S====================
    //父视图
    UIView * labelContentView = [[UIView alloc]init];
    [self.view addSubview:labelContentView];
    
    //标签相对父视图左边距
    CGFloat leftMarginLabel = 10;
    //标签相对父视图顶部距离
    CGFloat topMarginLabel =  0;
    //标签左右间距
    CGFloat horizontalSpace = 10;
    //标签上下间距
    CGFloat verticalSpace = 10;
    //标签的高度
     CGFloat labelHeight = 20;
    

    //下面这几个值不需要做修改
    //最大宽度,超过这个宽度就要换行
    CGFloat windthMax = SCREEN_WIDTH - leftMarginLabel * 2;
    //标签的起始X坐标(下面动态变化)
    CGFloat labelMinX = leftMarginLabel;
    //标签的起始Y坐标(下面动态变化)
    CGFloat labelMimY = topMarginLabel;
    //记录最后一个标签的最大Y,用来布局父视图
    CGFloat lastLabelMaxY = topMarginLabel;

    NSArray * array = @[@"法地方",@"法的鬼地方",@"第的鬼地方",@"法",@"1",@"rewe",@"fdagadgda发到付个人的",@"法地方",@"法的鬼地方",@"第的鬼地方",@"法",@"1",@"rewe",@"f"];
    for (int i = 0; i < array.count; i++) {
        UIButton* labelButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [labelButton setTitleColor:[UIColor colorWithHexString:@"#aaaaaa"] forState:UIControlStateNormal];
        [labelButton setTitleColor:MAIN_COLOR forState:UIControlStateSelected];
        //根据文字计算标签的宽度,后面会多加上一点宽度,视情况而定
        NSDictionary * attributes = @{NSFontAttributeName:[UIFont systemFontOfSize:15]};
        CGFloat labelWidth = [array[i] boundingRectWithSize:CGSizeMake(FLT_MAX, FLT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:attributes context:nil].size.width + 0;
        //为标签赋值
        [labelButton setTitle:[NSString stringWithFormat:@"%@",array[i]] forState:UIControlStateNormal];
        //设置标签的frame
        labelButton.frame = CGRectMake(labelMinX, labelMimY, labelWidth, labelHeight);
        
        //当标签的位置超出屏幕边缘时换行(超出限制的最大宽度)
        if(labelMinX + labelWidth + horizontalSpace > windthMax){
            //换行时将w置为起始坐标
            labelMinX = leftMarginLabel;
            //距离父视图也变化
            labelMimY = labelMimY + labelButton.frame.size.height + verticalSpace;
            //重设button的frame
            labelButton.frame = CGRectMake(labelMinX, labelMimY, labelWidth, labelHeight);
        }
        //多加的是两个标签之间的水平距离
        labelMinX = labelButton.frame.size.width + labelButton.frame.origin.x + horizontalSpace;
        labelButton.titleLabel.font = [UIFont systemFontOfSize:14];
        labelButton.tag = i+100;
        //标签的点击事件
        [labelButton addTarget:self action:@selector(labelButtonAction:) forControlEvents:UIControlEventTouchUpInside];
        [labelContentView addSubview:labelButton];
      
        if (i==array.count-1) {
            //拿到最后一个标签的位置
            lastLabelMaxY = labelButton.bottomY;
        }
        
    }
    
    //布局
    [labelContentView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(MC_NavHeight+10);
        make.left.right.mas_equalTo(0);
        make.height.mas_equalTo(lastLabelMaxY);
    }];
#pragma mark ============== 标签流布局 E====================
}

-(void)labelButtonAction:(UIButton *)button{
    
    
}

效果图如下:


效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,175评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,224评论 4 61
  • 6.16 今天在淘宝上淘衣服。上午没看书。今天就想轻松下。
    屋顶上的鱼阅读 177评论 0 0
  • 今年九月份就要上大学了,需要做一些总结和规划: 1、首先是在大学的学业问题: 通过对英国大学学习生活的提前预习,我...
    水滴石穿2017阅读 166评论 0 0
  • 喜欢看微博达人沐沐的微博。闲暇时分,心情烦躁之时,看她的微博总有解忧之意,会觉得原来这世上还会如此美好。 沐沐有个...
    简书上有个庞小萌阅读 245评论 0 0