CODEWITHSUNDEEP
iosswiftuitableview
Rookie
Rookie

Reputation: 3

swift UITableView set rowWidth

I am trying to minimize the width of my table cell in chat (iOS). I just like to differentiate ours and others chat message using bubble like WhatsApp chat.

Upvotes: 1

Views: 325

Answers (3)

Mercurial
Mercurial

Reputation: 2165

Row width will always be equal to the UITableView's width. From the UI(strictly) point of view, as Blake said, UICollectionView would allow you to specify both width and height.

But it's not always as simple as that since UICollectionView is not a 'UITableView with a different layout'.

Dynamic size

Calculating dynamic size is a bit easier with UITableView's which you'll prolly need since chat bubbles can differ in size. In collection views you have to have a backing cell which you would layout manually and let it calculate the size for you.

UITableView can calculate the height of the cell based on your auto layout constraints.

Lazy loading

Since collection views can have any type of layout, there is no ordering. It means that collection views will have to attempt to load cells and calculate their sizes and positions upfront. Since chat history can contain many messages, and what you need is simply loading and displaying them vertically, it's better if you stick to UITableView.

Solution:

As I said previously, the cell width will always be the same - equal to the table view's width. Only it's content has to change.

  1. Create a label inside the cell's content view and pin it to all four edges of the cell. Set number of lines to 0 and line breaks to word wrap.
  2. Below it, create a view that will represent your 'bubble'. Either a 9 slice image view or a custom view where you will implement your bubble drawing logic (using subviews or overriding drawRect: to do some custom drawing).
  3. Pin the bubble view to the label so it wraps around it, e.g. (pseudocode):

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

  1. Make sure to return UITableViewAutomaticDimension from tableView(tableView:heightForRowAtIndexPath:

Important: You'll have to play a bit with label constraints to make it align to left/right. You can switch .Leading and .Trailing constraints at runtime. The size of the bubble/label shouldn't change, only their alignment which is basically constraint constant property values.

Upvotes: 0

Blake Lockley
Blake Lockley

Reputation: 2961

The row width will always be the width of the tableview. For what you are describing you will want to use a UITableView and make custom cells for the user and their friend.

If you really want to customise the width of your cells you should consider using a UICollectionView although for what you are describing a table view is right tool for the job.

Upvotes: 2

rounak
rounak

Reputation: 9387

Use a UICollectionView, where you can customise both the cell height and the width.

Upvotes: 0

Related Questions