UI效果iOS开发技能iOS

iOS标签不规则排序

2016-11-13  本文已影响669人  遛遛食

在一些APP中都会存在不规则排序的按钮,就像下面这个效果


结果图

<h5>实现思路</h5>
用一个数组来记录所有的标签信息,然后在视图界面用for循环来创建视图,计算出每一个标签文字的大小,然后把上一个视图的宽度加上下一个视图的宽度加在一起判断一下是否大于屏幕的宽度,如果大于,那么这个视图就好换行,如果不大于,那么算出坐标直接显示就可以了。
<h5>附上代码</h5>

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"CF标签排序";
    self.view.backgroundColor = [UIColor whiteColor];
    
    _titleArr = [NSMutableArray arrayWithObjects:@"OC",
                                                 @"Java",
                                                 @"JavaScript",
                                                 @"jQuery",
                                                 @"Python",
                                                 @"都是语言",
                                                 @"我都不会",
                                                 @"CF最牛",
                                                 @"CF最牛X",
                                                 @"我都会",
                                                 @"都是电脑语言",
                                                 @"PHP",
                                                 @"网站开发",
                                                 @"Object-C",nil];
    //创建视图
    [self setupTitleView];
}

核心代码

/** 创建title视图 */
-(void)setupTitleView
{
    //拿到屏幕的宽
    CGFloat kScreenW = [UIScreen mainScreen].bounds.size.width;
    
    //间距
    CGFloat padding = 10;
    
    CGFloat titBtnX = 0;
    CGFloat titBtnY = 100;
    CGFloat titBtnH = 40;
    
    for (int i = 0; i < _titleArr.count; i++) {
        UIButton *titBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        //设置按钮的样式
        titBtn.backgroundColor = [UIColor yellowColor];
        [titBtn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
        titBtn.titleLabel.font = [UIFont systemFontOfSize:17];
        [titBtn setTitle:_titleArr[i] forState:UIControlStateNormal];
        titBtn.tag = 1000+i;
        [titBtn addTarget:self action:@selector(titBtnClike:) forControlEvents:UIControlEventTouchUpInside];
        
        //计算文字大小
        CGSize titleSize = [_titleArr[i] boundingRectWithSize:CGSizeMake(MAXFLOAT, titBtnH) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:titBtn.titleLabel.font} context:nil].size;
        CGFloat titBtnW = titleSize.width + 2 * padding;
        //判断按钮是否超过屏幕的宽
        if ((titBtnX + titBtnW) > kScreenW) {
            titBtnX = 0;
            titBtnY += titBtnH + padding;
        }
        //设置按钮的位置
        titBtn.frame = CGRectMake(titBtnX, titBtnY, titBtnW, titBtnH);
        
        titBtnX += titBtnW + padding;
        
        [self.view addSubview:titBtn];
    }
}


/** 按钮点击事件 */
-(void)titBtnClike:(UIButton *)btn
{
    //tag从1000开始,比较安全
    //跳转界面
    CFTitleViewController *titleVC = [[CFTitleViewController alloc]init];
    titleVC.titleStr = _titleArr[btn.tag-1000];
    [self.navigationController pushViewController:titleVC animated:YES];
}
效果展示
上一篇下一篇

猜你喜欢

热点阅读