2016-03-11 116 views
1

我试图尽量减少我的表格单元格的聊天(IOS)的宽度。我只是喜欢用WhatsApp聊天等泡泡来区分我们和其他人聊天消息。迅速的UITableView设置rowWidth

+2

即使在像WhatsApp这样的应用程序中,单元仍然跨越整个屏幕。这只是细胞内对话气泡的大小减小了。 – Michael

回答

0

使用UICollectionView,在这里你可以自定义这两个单元格高度和宽度。

2

该行的宽度将始终是的tableview的宽度。对于你所描述的你想要使用UITableView并为用户和他们的朋友制作自定义单元格。

如果您确实想要自定义单元格的宽度,则应考虑使用UICollectionView,但对于您所描述的内容而言,表格视图是作业的正确工具。

0

行的宽度将始终等于的UITableView的宽度。正如Blake所说,从UI(严格意义上)来看,UICollectionView将允许您指定宽度和高度。

但它并不总是为自UICollectionView简单是不是“的UITableView与不同的布局”。

动态尺寸

计算动态尺寸是更容易使用的UITableView的,你会prolly需要,因为聊天气泡的大小不同一点。在集合视图中,您必须有一个支持单元,您将手动布局并让它为您计算大小。

的UITableView能够基于你的汽车布局约束单元格的高度。

延迟加载

由于收集意见可以有任何类型的布局,没有顺序。这意味着收集视图将不得不尝试加载单元格并预先计算其大小和位置。由于聊天记录可以包含许多消息,并且您需要的仅仅是垂直加载和显示它们,所以最好是坚持使用UITableView。

解决方案:

正如我以前所说,单元宽度将始终是相同的 - 等于表视图的宽度。只有它的内容必须改变。

  1. 在单元格的内容视图中创建一个标签并将其固定到单元格的所有四个边上。将行数设置为0,并换行为换行。
  2. 在它下面,创建一个代表你的'气泡'的视图。可以是9切片图像视图,也可以是自定义视图,您可以在其中实现气泡绘制逻辑(使用子视图或重写drawRect:执行一些自定义绘图)。
  3. 将气泡视图固定到标签上以便环绕它,例如,(伪):

var margin = 4 bubbleView.top = label.top - margin bubbleView.bottom = label.bottom + margin bubbleView.left = label.left - margin bubbleView.right = label.right + margin

  • 确保从tableView(tableView:heightForRowAtIndexPath:
  • 重要返回UITableViewAutomaticDimension:你得玩了一下有标签的限制使其与左/右对齐。您可以在运行时切换.Leading和.Trailing约束。气泡/标签的大小不应改变,只有它们的对齐方式基本上是约束固定的属性值。