I am creating a chat based app, which uses a UITableView to hold all the messages within a conversation. To create a chat bubble, I have a wrapper view (wrapView) which is constrained to the top, bottom, right, and left of the TableViewCell. As a subview I have a UILabel which holds the message which was sent. I used preferredMaxLayoutWidth for the UILabel to ensure the text within the label won't go beyond the parent View. The number of lines for the UILabel is also set to 0. I set the following parameters within the cellForRowAtIndexPath function:
// Get the cell
let cell = tableView.dequeueReusableCellWithIdentifier("LeftBubbleText") as! LeftTextTableViewCell
// Set the message
cell.messageLabel.text = message
// Set the message label's max width
cell.messageLabel.preferredMaxLayoutWidth = cell.wrapView.frame.width - 16
When the conversation first loads, the text within the UILabel is not wrapped properly. It is truncated at the end of the wrapper view. But when the cell is scrolled off screen and then re-appears, the text is wrapped just fine after the cell is reused.
How can I ensure the text within the UILabel is wrapped properly on the initial load and not just when the cell is reused?
The issue is likely to be that the frame width you are using is wrong. Cells created using deqeueReusableCellWithIdentifier have no size class associated with them because they have no parent view. Hence if you have constraints in your cell, trying to calculate layout sizes manually does not work properly.
You should be using dequeueReusableCellWithIdentifier:forIndexPath to dequeue your cells
Related
I am trying to make a custom TableViewCell for a tableview, and the size is 414x350. The problem I am having is when table view get loaded all the sizes are squeezed and not right. I have tried all of the followings:
Assigning row height from code
tableView.estimatedRowHeight = 350
tableView.rowHeight = UITableView.automaticDimension
Assigning row height from storyboard in tableview window
Assigning row height from storyboard in tableviewcell window
The result is still the same. Any help is appreciated!
For any cell's automatic row dimension to be calculated properly, in your Storyboard you must have a direct line of vertical constraints between every item that goes all the way from the top to the bottom. If you set the constraints yourself, same thing applies.
Don't assign any row heights, except the estimated.
I am having abit of trouble here trying to make this post description label to grow and shrink based on content size on IOS9. I have a view (I will refer it topView) that I am using as a header for the tableview (So when I scroll up the header disappears). Inside the topView, there are a bunch of stack views. I wish to grow and shrink the post description label in height based on content size. I do know how to do it in simple case where everything is inside the prototype cell (i.e. set estimated row height and set uitableviewautomaticDimensions, set sizetoFit on label and change number of lines to 0). However, this is a different case because the post description label is not really inside the cell, it is in its view before the table view cells.
Note that all items in the view has static height except the postdescription label. Post description label is inside a stack view that is pinned only left and right (So that top and bottom would grow?). Also, the main stack view that contains all elements is pinned towards the four sides with the topview that contains the main stack view also pinned towards the four sides. With this setup, I would expect the topview to grow and shrink based on the content size. However, I do not see that in the output. I dont know if it is the stackview that is holding the label refusing to grow or the top view refusing to grow to allow more space for the stackview for the label. Thanks
UPDATE
Thanks Riadluke, I tried doing something as suggested which is resizing the headerview after calculating the required height. I have placed the following code in viewDidLayoutSubview and it works with an issue
postDescriptionLbl.sizeToFit()
let headerView = commentTableView.tableHeaderView!
headerView.setNeedsLayout()
headerView.layoutIfNeeded()
let height = TopStackView.frame.size.height + ImageStackView.frame.size.height + postDescriptionLbl.frame.size.height + SpacerStackView.frame.size.height + BottomStackView.frame.size.height
headerView.frame.size.height = height
commentTableView.tableHeaderView = headerView
The issue I now have with this method is that when the view controller appears, I can physically see the postDescription label height grow from the default height in storyboard to the required height. For example, when the VC first appears, I see a line of label with some string being cut off, however after 0.5 second, the headerview and the label grow to the size that I wanted. I know this would be expected because I was calling the manipulation after the viewDidLayout Subview. I was wondering if there is a better way such that I dont see that transition and the view appears to be the right height straight away. Ie. let the view know exactly how high the label is to determine how high the headerview needs to be before appearing on screen?
I'm afraid the view set as tableHeaderView of a UITableView does not get resized automatically. Its height will be fixed to the height it had in IB.
What you have to do is set its size manually and then reassign it as the tableHeaderView so it is displayed in the height you want.
It could take only few lines since you're using autolayout.
You can try this code right after you've set the header view's contents:
//for the target size you have set the width as your tableView's width when it is already displayed on screen.
//note that when it is accesed inside viewDidLoad the tableView's bounds
//may be different to the actual bounds it will be displayed with,
//here I am just using the screen bounds
let targetSize = CGSize(width: UIScreen.mainScreen().bounds.width, height: 10000)
//set the tableHeader's size to its size after its layout constraints are resolved
tableHeader.bounds.size = tableHeader.systemLayoutSizeFittingSize(targetSize)
//reassign it as the tableHeaderView to update the height it will be displayed in
tableView.tableHeaderView = tableHeader
After many many attempts, I could not get anything to work with the original setup. The best I achieved was to resize it after view did appear which is not idea as you see the previous layout.
It is now working with a complete different approach. I have created two prototype cell and have one as "HeaderViewCell" and implemented the following functions
commentTableView.estimatedSectionHeaderHeight = 400
commentTableView.sectionHeaderHeight = UITableViewAutomaticDimension
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
Everything works like a charm after that.
Context
I am trying to create something similar to a Table view using UICollectionView.
I am using Xcode7 and storyboarding.
The way I do it is that I drag the collection view across the entire controller view.
And then I drag the entire cell across the row and align it with the right and left boundaries.
Problem
But, when I place a label inside the cell, then it gets displayed correctly only when the device is in a horizontal position.
When the device is vertical, it gets cut off at the left boundary.
Question
How do I ensure that the width of the collection view cell matches that of the container width?
1) Implement the function of cell size and return the collection width:
-(CGSize) collectionView: (UICollectionView*) collectionView layout:(UICollectionViewLayout*) collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*) indexPath {
CGFloat height = 50; //set the wanted height
return CGSizeMake(collectionView.frame.size.width,height);
}
2) Reload the collection when the screen size change (i.e. orientation change).
It is because you are not using autolayout. You can achieve this entirely in storyboard or through code.
Using Storyboard
Add UICollectionView in your UIViewController in storyboard.
Drag UICollectionView to fill up in your UIViewController.
Add Constraints as shown in image.
Drag UICollectionView to fill up in UICollectionView.
Add UILabel (Or whatever you want to have in cell). Also add constraints in that element.
Build and run.
I am making app in which there is a chat window. In this window there is one image and a label on that image in custom cell.
I have take two custom cells, one for sender and other for receiver. Both cell are same with left and right alignment.
I want that when the length of comment is increased then whole comment shows in multiline within that image(increases the image size also) .
how can I handle this situation?
I am using setVariable method to set content on cell. I am trying comment code for framing like below comment code but it doesn't work
- ( void ) setComment : ( NSString* ) Comment
{
[ txtComment setText : Comment ] ;
/*CGRect frame1 = txtComment.frame;
frame1.size.height = txtComment.contentSize.height;
txtComment.frame=frame1;*/
}
I would suggest you use auto layout to define the custom cell height. It will help you create a dynamic cell height depending on the length of the comment. You can read about using dynamic height using auto layout in this link
To make this done you can do the following:
Subclass UITableViewCell and also create xib file.
Go to the xib file and add UIImageView and UILabel objects to your cell. Also create an outlet for the label.
As Pavan Kotesh mentioned the easiest way is to use auto layout.
Add top space and bottom space constraints to the cell content view for both image view and label. Then set constraints for x position for both subviews and finally set width and height constraints.
Height constraints must be "Greater of equal" type to let you change size of the views.
Having done that in Interface Builder all you need is to add one method to your subclass for setting a message.
- (void) setMessage: (NSString*) message
{
CGFloat oldLabelSize = _label.frame.size.height;
_label.text = message;
[_label sizeToFit];
CGFloat newLabelSize = _label.frame.size.height;
CGRect frame = self.frame;
frame.size.height += newLabelSize - oldLabelSize;
self.frame = frame;
}
After calling this method add the cell as subview to you chat view.
EDIT:
I think your -cellForRowAtIndexPath method implementation is wrong. What does [ChatViewCell send] perform?
I would have done it like this:
First declare two arrays in your table view controller class. The first is for storing the text of messages and the second for storing cell heights. Also you can create some structure to store those values. After user has finished inputing a message you should somehow estimate cell height and put both height and cell's message to the appropriate arrays. After that you should insert new row(section) in your tableview using insertRowsAtIndexPaths:withRowAnimation: method.
Then in your cellForRowAtIndexPath method:
If dequeueReusableCellWithIdentifier returns nil you should just initialise new ChatViewCell and after if (cell == nil) statement set its message from the appropriate array (due to reuse you should set cell's content every time it goes on screen).
In your heightForRowAtIndexPath: method return values from array that stores cell heights.
I have a grouped tableView in my iPad-app, and I've been trying to set cell.imageView.center = cell.center to center the image instead of putting it to the leftmost position. This is apparently not possible without a subclass of the UITableviewCell(If someone could explain why, that'd also be appreciated.. For now I just assume they are 'private' variables as a Java-developer would call them).
So, I created a custom tableViewCell, but I only want to use this cell in ONE of the rows in this tableView. So in cellForRowAtIndexPath I basically write
cell = [[UITableViewCell alloc]initWith//blahblah
if(indexPath.row == 0)
cell = [[CustomCell alloc]initWith//blahblah
This is of course not exactly what I'm writing, but that's the idea of it.
Now, when I do this, it works, but the first cell in this GROUPED tableView turns out wider than the rest of them without me doing anything in the custom cell. The customCell class hasn't been altered yet. It still has rounded corners though, so it seems it knows it's a grouped tableView.
Also, I've been struggling with programmatically getting the size of a cell, in cellForRowAtIndexPath, I've tried logging out cell.frame.size.width and cell.contentView.frame.size.width, both of them returning 320, when I know they are a lot wider.. Like, all the rows are about 400 wide, and the first cell is 420 or something. It still writes out 320 for all the cells..
This code will not work for a couple of reasons:
cell.imageView.center = cell.center;
Firstly, the center is relative to its superview. I believe the cells superview is the tableView. The imageView's superview will be the content view of the cell. Therefore the coordinate systems are different so the centens will be offset. E.g. the 3rd cell down will have a center of 0.5 widths + 3.5 heights. You should be able to ge around this issue by doing:
cell.imageView.center = CGPointMake( width / 2 , height / 2 );
The second issue is related to how the table view works. The table view manages its cells view's. The width of a cell is defined by the table view's width and the height is defined by the table view's row height property. This means the cell itself has no control over its size.
You can however size its subviews, but you must do this after the cells size has been set (otherwise you can get strange results). You can do this in layout subviews (of the custom UITableViewCell class). See this answer.
- (void)layoutSubviews {
[super layoutSubviews];
self.imageView.frame = ....
}
When layoutSubviews is called the cells frame has been set, so do your view logging here instead of cellForRowAtIndexpath.
As for the GROUPED style. Im not sure if this is designed to work with custom views. I suspect it sets the size of its cells to its own width minus a 20 pixel margin on each size, then applies a mask to the top and bottom cells in a section to get the rounded effect. If you are using custom view try to stick with a standard table view style.