多行容器视图根据宽度布置子项

Multiple rows container view to layout children based on their width

基本上我正在尝试为下面描述的自定义视图找到一个 iOS 库(首选 Obj-C)。我找不到类似的东西,但看起来这仍然是很普遍的观点,所以社区中的任何人都可以指出我正确的地方。

所以我试图在 iOS 中实现一个视图来复制图像中的行为:

基本上它是一个水平容器视图,它根据宽度堆叠其他视图(基本上是 UILabel),并在需要时动态添加更多行。

所以我目前的高层次方法是按如下方式实现它:

  1. 将 NSString 列表传递到容器视图中
  2. 容器视图将为每个字符串创建 UILabel
  3. 然后计算每个标签的宽度和所有标签的总宽度
  4. 容器视图根据容器的宽度动态计算当前行的项目数。
  5. 其余项目进入下一行(容器高度增加)并在队列中有未处理的 UILabel 时重复步骤 4。

虽然这个过程相当简单,但我仍在努力寻找可能的方法来简化开发并节省客户在此功能上的预算。

所以也许有人可以指出更好的方法?似乎 UICollectionView 是一个不错的选择,但也许仍然有任何库可以做类似于我上面描述的事情?

在 github 上找不到任何内容,但可能只是因为我搜索不正确。

代码工作

    - (IBAction)actionTagCancel:(UIButton *)sender {
    [arrTagList removeObjectAtIndex:sender.tag];
    [self.collecTagCategory reloadData];

}


#pragma mark- collection data source

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return arrTagList.count;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {


    CGSize tagLabelSize = [arrTagList[indexPath.row] boundingRectWithSize: CGSizeMake(self.view.frame.size.width-75, 120)
                                                              options:NSStringDrawingUsesLineFragmentOrigin
                                                           attributes:@{NSFontAttributeName:[UIFont fontWithName:@"Helvetica Neue" size:14.0 ]}
                                                              context:nil].size;

    return CGSizeMake (tagLabelSize.width + 45, 30);
}

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    TagViewListCell *tagCell = [collectionView dequeueReusableCellWithReuseIdentifier:@"tagCell" forIndexPath:indexPath];
    tagCell.viewTag.layer.cornerRadius = 4;

    tagCell.btnTagCancel.tag = indexPath.row;

    tagCell.lblTagName.text = arrTagList[indexPath.row];
    _constTagViewHeight.constant = _collecTagCategory.contentSize.height;
    return tagCell;

}

输出

删除标签后自动管理

Edit

Get Repository of project from here