10行代码实现标签流式布局

这是自己没事写的小demo,实现标签根据标签的文字长度进行流式布局。
效果如下


Simulator Screen Shot 2017年8月11日 下午5.55.58.png

10行代码即可实现,简单易懂,废话不说,上代码

NSArray *btnTitles = @[@"华润苏果",@"乐城",@"柏兆记",@"银泰城",@"万达游乐园",@"皇冠假日酒店",@"霍山大酒店",@"之心城",@"西湖国际购物广场",@"苏果超市",@"锦江之星",@"万达广场",@"华润五彩城",@"大唐购物广场",@"三孝口",@"合肥南站",@"威斯汀酒店"];
    NSInteger count = [btnTitles count];
    NSLog(@"%ld",count);
    CGFloat  maxX = 15;
    CGFloat row = 0;
    CGFloat maxY = NavigationBarHeight+60;
    for (int i=0; i<count;i++)
    {
        UILabel *lab = [[UILabel alloc]init];
        lab.text = btnTitles[i];
        lab.backgroundColor = [UIColor whiteColor];
        lab.textColor = [UIColor grayColor];
        lab.layer.cornerRadius = 5.0f;
        lab.layer.masksToBounds = YES;
        lab.font = [UIFont systemFontOfSize:14];
        lab.textAlignment = NSTextAlignmentCenter;
        [self.view addSubview:lab];
        
        NSString *str = btnTitles[i];
        CGFloat width = (str.length+2)*15;
        CGFloat height = 30;
        
        if (maxX +width< Screen_Width) {
            lab.frame = CGRectMake(maxX,maxY,width,height);
            maxX = CGRectGetMaxX(lab.frame)+10;
        }
        else
        {
            row ++;
            maxY += 45;
            maxX = 15;
            lab.frame = CGRectMake(maxX,maxY,width,height);
            maxX = CGRectGetMaxX(lab.frame)+10;
        }
    }

代码就是这样了,是不是很简单?

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,631评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 跑步,从开始的3KM都吃力到现在的15KM。是数据的变化,是心态的变化,也是身体的变化。 而这一年多的跑步习惯,只...
    晨曦问早阅读 1,170评论 0 0
  • 第四回 转机 乍暖还寒的春季,清澈见底的六河,胆小调皮的毛蟹,草叶甘香的芦苇,忽如其来的春雨,香味四溢的油菜...
    拾荒野人阅读 1,943评论 0 2
  • 注: 这篇文章因无法重新编辑, 已重写, 请参考新的文章: iOS 在cell中使用倒计时的处理方法(新) 需求:...
    大头herob阅读 14,433评论 82 44