smileyborg / tableviewcellwithautolayout Goto Github PK

i prefer to use storyboard,
and i follow this to set the cell's height, but it seems not work.

i find this demo work good ,but its in code ,can i use storyboard to set up constraints instead of using code?

Hello,

While autolayout, thanks to the API ""UIView+AutoLayout.h", works very well with UILabel or UIImageView, I'm facing an issue when trying to instantiate an UIWebView :

// self.myWebView = [UIWebView newAutoLayoutView]; <--- RETURNS "nil"/

self.myWebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 25, 304, 60)];
// above line show at least the UIWebView but implies obvious constraints inconsistencies // with others objects' contentView ;P

self.myWebView.opaque = NO;
self.myWebView.backgroundColor = [UIColor clearColor];
self.myWebView.userInteractionEnabled = NO;

An UIWebView included in your project example would be very appreciated (if supported without modification to your API)!

Cheers,
Yayoo1971

As per my Stack Overflow question, this solution doesn't work for cells containing a UIImageView with a relative height constraint (e.g. height = contentView.width * 0.5).

This fork of the project demonstrates the problem.

pod install gives error:
[!] The dependency PureLayout is not used in any concrete target.

the workaround I used is to use heightForRowAtIndexPath to return accurate height while cell using autolayout, is it a good way? do you have other good idea?

Hi there.

I started using your library to implement some dynamic cells I use for the app I'm writing. It seems to have simplified my issues with them greatly.

I've already implemented a cell with 2 labels and another one with 1 label and 1 text field.

So far, so good.

The issue I'm having at the moment is with text views. I tried replicating the implementation based on my text field implementation. The problem is that the text view is not drawn at all. The label is, but the text view isn't. I basically don't know where to start debugging to see if it's an issue with the framework or with my code.

Could you give me some hints on this and help me to diagnose?

Regards,

A B.

This technique is superb for plain tableviews, but fails when you're using the grouped style because the entire width of the table view is not allocated to the cell. It appears that there's a 10px border either side of the cell in grouped mode, so you need something like this (I used a category on TableView to encapsulate this - there's probably a better way).

#import "UITableView+CellHeight.h"

@implementation UITableView (CellHeight)

- (CGFloat) heightForCell:(UITableViewCell *)cell
{
    // Make sure the constraints have been added to this cell, since it may have just been created from scratch
    [cell setNeedsUpdateConstraints];
    [cell updateConstraintsIfNeeded];

    CGRect  cellBounds =  CGRectMake(0, 0, CGRectGetWidth(self.bounds), CGRectGetHeight(cell.bounds));

    // Grouped table views have a margin of 10px either side of the cell,
    // so we have to reduce the width allocated to the cell accordingly.
    if( self.style == UITableViewStyleGrouped )
        cellBounds.size.width -= 20;

    cell.bounds = cellBounds;

    [cell setNeedsLayout];
    [cell layoutIfNeeded];

    CGSize s = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];

    // Add an extra point to the height to account for the cell separator, which is added between the bottom
    // of the cell's contentView and the bottom of the table view cell.
    s.height += 1;
    return s.height;
}

How to make UITextView to full visible with this example?

I found that give a inaccurate height to estimateHeightForRow method will make tableview jump up and down, or wrong layout and scroll automatically when insert or delete row, so I use heightForRow instead of estimateHeight in iOS8 although use autolayout in cell

Hi,

I'm trying to copy this project in one of our own, to enable dynamically sized cells. In our project however, the cell's height is returned as 1, for reasons unknown to me.

I've created a sample project of my own to illustrate. Would you mind having a look at letting me know what I've done wrong? It must be something simple, but I can't figure it out.

https://github.com/WildBamboo/DynamicallySizedTableViewCells

(As an aside, the dynamic cells bleed in to the fixed cells for reasons unknown to me. I would have thought the subviews would have been clipped.)

Thanks.

What's stopping this from supporting iOS6 ?

Hi,

While your project works on iOS7 and iOS8 simulator, I have troubles when using it in my project.

I've made my customCell. It's a copy/paste of yours. The only difference is that my tableView is in a subview.
In iOS7, no problem, it works. With iOS8 simulator, the computed size is good (I've NSLogged the returned "height" of the cell). The cell is well framed but the UILabel inside is stuccoed to 0,0,0,0 !

iOS8 only and I can't figure out what is wrong...

I am download it, and use cocoapods install .It always take error "TableViewCellWithAutoLayout-Prefix.pch" on not found "#import "PureLayout.h". I don't know how to solution it, can you tell me.

Hi smileyborg,

First, thanks a ton for creating PureLayout and this TableViewCellWithAutoLayout sample. It's a huge help.

Your sample app works great. No errors, everything looks good in the simulator. My strategy is to add as little as possible to your sample to understand how each piece works, but I'm hitting an 'Unable to simultaneously satisfy constraints' error almost immediately.

All I am trying to do is insert a UIView with a colored background (like in your example apps) in between the titleLabel and bodyLabel. I can do it, but not without XCode complaining and breaking a constraint.

I started by adding a new UIView to RJTableViewCell.h:

@property (strong, nonatomic) IBOutlet UIView *storyView;

Then I instantiated storyView in initWithStyle:reuserIdentifier by adding these lines just before where contentView's background color is set:

    self.storyView = [UIView newAutoLayoutView];
    self.storyView.backgroundColor = [UIColor colorWithRed:0 green:1 blue:1 alpha:0.1];

Then in updateConstraints, I uncommented:

self.contentView.bounds = CGRectMake(0.0f, 0.0f, 99999.0f, 99999.0f);

and added this after the calls on self.titleLabel:

    [self.storyView autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.titleLabel withOffset:kLabelVerticalInsets relation:NSLayoutRelationEqual];

    [UIView autoSetPriority:UILayoutPriorityRequired forConstraints:^{
        [self.storyView autoSetContentCompressionResistancePriorityForAxis:ALAxisVertical];
    }];

    [self.storyView autoPinEdgeToSuperviewEdge:ALEdgeLeading withInset:kLabelHorizontalInsets];
    [self.storyView autoPinEdgeToSuperviewEdge:ALEdgeTrailing withInset:kLabelHorizontalInsets];
    [self.storyView autoSetDimension:ALDimensionHeight toSize:25.0];

And finally, I changed:

[self.bodyLabel autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.titleLabel withOffset:kLabelVerticalInsets relation:NSLayoutRelationGreaterThanOrEqual];

to:

[self.bodyLabel autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.storyView withOffset:kLabelVerticalInsets relation:NSLayoutRelationGreaterThanOrEqual];

I get what I expected -- a blue-green rectangle 25 pixels high exactly as wide as titleLabel and bodyLabel with 10 pixels of space above and below. I also get this:

2015-01-28 19:29:43.847 TableViewCellWithAutoLayout[41969:3383075] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x7f8da3036bb0 'UIView-Encapsulated-Layout-Height' V:[UITableViewCellContentView:0x7f8da302b860(44)]>",
    "<NSLayoutConstraint:0x7f8da3037ec0 V:|-(10)-[UILabel:0x7f8da302c900'Marion']   (Names: '|':UITableViewCellContentView:0x7f8da302b860 )>",
    "<NSLayoutConstraint:0x7f8da3038390 V:[UILabel:0x7f8da302c900'Marion']-(10)-[UIView:0x7f8da302d350]>",
    "<NSLayoutConstraint:0x7f8da30369f0 V:[UIView:0x7f8da302d350(25)]>",
    "<NSLayoutConstraint:0x7f8da3036b20 V:[UIView:0x7f8da302d350]-(>=10)-[UILabel:0x7f8da302cf20'Lorem ipsum dolor sit ame...']>",
    "<NSLayoutConstraint:0x7f8da3036590 UILabel:0x7f8da302cf20'Lorem ipsum dolor sit ame...'.bottom == UITableViewCellContentView:0x7f8da302b860.bottom - 10>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7f8da30369f0 V:[UIView:0x7f8da302d350(25)]>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

I've experimented with every variation I can think of. No matter what I do, I get this constraint problem in XCode. It doesn't seem like I've done much to your sample, but I assume I've creating ambiguity somewhere. If you can shed any light on it, I'd be grateful.

Thanks in advance,
Dan

First of all I want to send my sincerest thanks for this very concise Library (PureLayout) and also this wonderful example. I depend my project's most module on this example.

I would like to ask how am I going to solve this problem. So I have a tableview (T2) in a tableViewCell (C1) in a tableView (T1) ; all composed in Purelayout. However, I cannot always get the total height of the Table (T2) so I could expand it fixed on C1.The current way that I get the total height of T2 is

[self.commentContainer layoutIfNeeded];
return [self.commentContainer contentSize].height 

I get the appropriate total height of T2 if every T2's cell has a fixed height. That's is, when a label in the T2 is only one line. The problem starts when the label has more than one line (and the NumberOfLines is set to 0 , meant to expand as the label's text becomes long ).

In summary, I want to achieve something like a Youtube Comment Form. When I press the [show all Comments] Button, It shows the comments in non-scrollable way. I want to expand T2 most so it's contents won't scroll since T1 is already scrollable.

I created an illustration in hopes of helping myself explain better.

Thank you very much smileyborg!

run happened below error
ld: library not found for -lPureLayout
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Hello,

By executing the command po [[UIWindow keyWindow] _autolayoutTrace] when running a paused simulator of your project it produces the following:

(lldb) po [[UIWindow keyWindow] _autolayoutTrace]

*<UIWindow:0x1093137f0> - AMBIGUOUS LAYOUT
|   *<UILayoutContainerView:0x1090f5220>
|   |   *<UINavigationTransitionView:0x109103bf0>
|   |   |   *<UIViewControllerWrapperView:0x10e418520>
|   |   |   |   *<UITableView:0x10b0aca00>
|   |   |   |   |   *<UITableViewWrapperView:0x10e406d40>
|   |   |   |   |   |   *<RJTableViewCell:0x10e45ddf0>
|   |   |   |   |   |   |   *<UITableViewCellScrollView:0x10e45e110>
|   |   |   |   |   |   |   |   *<UITableViewCellContentView:0x10e45e820>
|   |   |   |   |   |   |   |   |   *<UILabel:0x10e45eba0> - AMBIGUOUS LAYOUT
|   |   |   |   |   |   |   |   |   *<UILabel:0x10e45ef10> - AMBIGUOUS LAYOUT
|   |   |   |   |   |   |   |   <_UITableViewCellSeparatorView:0x10e464520>
|   |   |   |   |   |   *<RJTableViewCell:0x10e458cf0>
|   |   |   |   |   |   |   *<UITableViewCellScrollView:0x10e459010>
|   |   |   |   |   |   |   |   *<UITableViewCellContentView:0x10e459720>
|   |   |   |   |   |   |   |   |   *<UILabel:0x10e459aa0> - AMBIGUOUS LAYOUT
|   |   |   |   |   |   |   |   |   *<UILabel:0x10e459e10> - AMBIGUOUS LAYOUT
|   |   |   |   |   |   |   |   <_UITableViewCellSeparatorView:0x10e464320>
|   |   |   |   |   |   *<RJTableViewCell:0x10e451100>
|   |   |   |   |   |   |   *<UITableViewCellScrollView:0x10e451400>
|   |   |   |   |   |   |   |   *<UITableViewCellContentView:0x10e451990>
|   |   |   |   |   |   |   |   |   *<UILabel:0x10e451d10> - AMBIGUOUS LAYOUT
|   |   |   |   |   |   |   |   |   *<UILabel:0x10e452080> - AMBIGUOUS LAYOUT
|   |   |   |   |   |   |   |   <_UITableViewCellSeparatorView:0x10e463b80>
|   |   |   |   |   <UIImageView:0x10e417870>
|   |   |   |   |   <UIImageView:0x10e418190>
|   |   <UINavigationBar:0x1090f5760>
|   |   |   <_UINavigationBarBackground:0x1090f6530>
|   |   |   |   <_UIBackdropView:0x1090fa130>
|   |   |   |   |   <_UIBackdropEffectView:0x10e402270>
|   |   |   |   |   <UIView:0x10e402d80>
|   |   |   |   <UIImageView:0x1090f6c60>
|   |   |   <UINavigationItemView:0x10e4061d0>
|   |   |   |   <UILabel:0x10e406c00>
|   |   |   <UINavigationButton:0x10e412ae0>
|   |   |   |   <UIImageView:0x109111fb0>
|   |   |   <UINavigationButton:0x10e413c40>
|   |   |   |   <UIImageView:0x10e414550>
|   |   |   <_UINavigationBarBackIndicatorView:0x10e40dda0>

I'm having problems with my labels not getting the correct height after wrapping text sometimes, and I think this might have something to do with it.

Any thoughts how to resolve the ambiguous layout warnings?

Thanks

When a cell has an accessoryView(chevron), this can affect the height of the cell because it will make self.contentView narrower. BUT if you've already calculated the height(using height = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height; ), the cell will get truncated or be too long, depending on WHEN you decide to show the accessoryView. Workaround?

First ,the sample is so beautiful and helpful.And i used this in my project for months.
But recently i have got some performance problem:
Here is the conditions:

1. large data of datasource which mins there are large number of rows, and need to load the same.For example 100 rows one time.
2. complicate layoutconstraint of cell it self

The result:
in iOS7,as you know reload tableview will cause to caculate height of all cells one time(on main thread),which take about 2 seconds in my project. Need to fix this.

I have tried to use (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(7_0); ，but it seems to be some bug itself in iOS7.

Need help.
I will update this if i figure out.

Thanks

I changed the UILabel to a UITextView in your example and [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize] ends up returning ridiculously large widths like {5147.5, 80.5}. The stock example will also do this with UILabel if you comment out the preferredMaxLayoutWidth line. I was a bit confused by this at first, because the following code/comment in the view controller seems to imply that setting cell.bounds will prevent it from happening:

// The cell's width must be set to the same size it will end up at once it is in the table view.
// This is important so that we'll get the correct height for different table view widths, since our cell's
// height depends on its width due to the multi-line UILabel word wrapping. Don't need to do this above in
// -[tableView:cellForRowAtIndexPath:] because it happens automatically when the cell is used in the table view.
cell.bounds = CGRectMake(0.0f, 0.0f, CGRectGetWidth(tableView.bounds), CGRectGetHeight(cell.bounds));

It seems [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize] completely ignores it's bounds and that code is doing nothing. I'm seeing this in both xcode5 and xcode6b2 with ios 7 deployment.

I ended up creating a width constraint on the the offscreen cell.contentView and getting rid of the cell.bounds code all together. You also no longer need preferredMaxLayoutWidth set in the cell's layoutSubviews which seems like a good thing. This solutions seems to play much nicer with systemLayoutSizeFittingSize: and feels like it might be a better way to do it since everything now happens within the constraint system.

There will obviously still be issues since contentView isn't always the same width as the tableView's width -- but I don't think that was ever accounted for in the original example.

Here is the code snippet of the relevant change:

// Use the dictionary of offscreen cells to get a cell for the reuse identifier, creating a cell and storing
// it in the dictionary if one hasn't already been added for the reuse identifier.
// WARNING: Don't call the table view's dequeueReusableCellWithIdentifier: method here because this will result
// in a memory leak as the cell is created but never returned from the tableView:cellForRowAtIndexPath: method!
RJTableViewCell *cell = [self.offscreenCells objectForKey:reuseIdentifier];
if (!cell) {
    cell = [[RJTableViewCell alloc] init];
    NSLayoutConstraint *constraint = [cell.contentView autoSetDimension:ALDimensionWidth toSize:self.tableView.bounds.size.width];
    [self.offscreenWidthConstraints setObject:constraint forKey:reuseIdentifier];
    [self.offscreenCells setObject:cell forKey:reuseIdentifier];
}
else {
    CGSize size = tableView.bounds.size;
    NSLayoutConstraint *constraint = [self.offscreenWidthConstraints objectForKey:reuseIdentifier];
    if (constraint.constant != size.width) {
        NSLog(@"tablview width changed from %f to %f",constraint.constant,size.width);
        constraint.constant = size.width;
    }
}

I'm new to autolayout and this is the first time I've looked into using PureLayout, so I wanted to get your feedback on this solution before I submit a pull request.

With the iOS7+ version of this piece of code running in iOS8/9, I get lots of layout conflicts and calls to heightForRowAtIndexPath for every row, so I merged both versions:

    if #available(iOS 8.0, *) {
        rowHeight = UITableViewAutomaticDimension
        estimatedRowHeight = 400
    } else {
        estimatedRowHeight = UITableViewAutomaticDimension
    }

I don't think this is related, but I also had to use this solution to avoid layout conflicts. I think it's necessary when the default height of 44 is not enough to fit your views initially (for example if you are add a constraint like "V:|-[v(100)]-|").

With both changes, I get it working without layout conflicts. Thanks!

Hi @smileyborg,

I appreciate this straight forward approach to auto layout for tables. Of course, part of me wishes not to use PureLayout for not wanting too much third party code in my app (-- yay coding by web examples), but you make it inciting because it's a pain to manage constraints indeed.....

However, have you ever tried on iPad this technique (iOS 7+ solution), using NSAttributedString for the labels? My text source is HTML, so I use the NSAttributedString, NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType to make the attributed string.

Using iOS 8 (my app has to support 7 and 8) on iPad upon reorientation, I get this exception:

-[WebScriptObjectPrivate countByEnumeratingWithState:objects:count:]: unrecognized selector sent to instance 0x80e095a0

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[WebScriptObjectPrivate countByEnumeratingWithState:objects:count:]: unrecognized selector sent to instance 0x80e095a0'
*** First throw call stack:
(
    0   CoreFoundation                      0x053191e4 __exceptionPreprocess + 180
    1   libobjc.A.dylib                     0x050928e5 objc_exception_throw + 44
    2   CoreFoundation                      0x053b6243 -[NSObject(NSObject) doesNotRecognizeSelector:] + 275
    3   CoreFoundation                      0x0530950b ___forwarding___ + 1019
    4   CoreFoundation                      0x053090ee _CF_forwarding_prep_0 + 14
    5   UIKit                               0x0334bae8 -[UIWindow _setRotatableClient:toOrientation:updateStatusBar:duration:force:isRotating:] + 
. . .

I do not get the exception when using the raw HTML (straight text).

Hi! I'm going to implement CellAutoLayout approach in my messaging-style app. I need text in cells to be displayed with some offset (similar to iOS Messages app). To accomplish this I'm trying to experiment with your sample project:

In RJTableViewCell.m,  updateConstraints method

-- [self.bodyLabel autoPinEdgeToSuperviewEdge:ALEdgeLeading withInset:kLabelHorizontalInsets]
++ [self.bodyLabel autoPinEdgeToSuperviewEdge:ALEdgeLeading withInset:kLabelHorizontalInsets relation:NSLayoutRelationGreaterThanOrEqual];

This change somehow breaks cell height calculation. When longer bodyLabel follow shorter one, [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize] returns bigger height then expected.

Am I missing something? Any ideas how can I implement something similar to Messaging app layout using CellAutoLayout?

Thanks!

[self.contentView layoutSubviews] at line 103 should be [self.contentView layoutIfNeeded]. (you shouldn't call layoutSubviews directly according to the UIKit docs.)

it's required because the [super layoutSubviews] (on line 98) only sets the frame for self.contentView and causes it to need layout (self.contentView.layer.needsLayout becomes YES) but doesn't actually cause contentView's subviews to be laid out. this means that self.bodyLabel doesn't have its frame set at this point. while this usually happens later, we add the [self.contentView layoutIfNeeded] on line 103 to force this to occur immediately.

additionally, I noticed you didn't have a [super layoutSubviews] at the end of your layoutSubviews.

having done the above, you should be able to get rid of lines 172 and 173.

First of all, many thanks for this sample project (and PureLayout).

In my app, the cells have a disclosure indicator, and in some cases this causes the text to be truncated. I tried this in your sample code by setting self.accessoryType = UITableViewCellAccessoryDisclosureIndicator; inside the init method of the cell, and I see the same at the end of the body text. I'm guessing the indicator interferes with the autolayout constraints, but I don't know how and where to correct for this. I tried increasing kLabelHorizontalInsets, but that didn't change anything. Removing the lines that set the lineBreakMode also didn't help.

Any suggestions?

I use Xib layout with auto-layout,but height is always 1.what is problem?

Hi, @smileyborg, I'm so excited to use PureLayout when lost in large numbers of constraints added for views. However, when I tried to put the same code in a custom UIView enbedded with a tableview, it shows lots of warnings in the console.
Here's the warnings.

Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x7fa5e1f5a300 'UIView-Encapsulated-Layout-Width' H:[UITableViewCellContentView:0x7fa5e1f51930(0)]>",
    "<NSLayoutConstraint:0x7fa5e1db41d0 UILabel:0x7fa5e1f52600'The correct API to use is...'.trailing == UITableViewCellContentView:0x7fa5e1f51930.trailing - 15>",
    "<NSLayoutConstraint:0x7fa5e1d95df0 H:|-(15)-[UILabel:0x7fa5e1f52600'The correct API to use is...']   (Names: '|':UITableViewCellContentView:0x7fa5e1f51930 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7fa5e1db41d0 UILabel:0x7fa5e1f52600'The correct API to use is...'.trailing == UITableViewCellContentView:0x7fa5e1f51930.trailing - 15>

I wonder what on earth the difference is between setting constraints in a tableview and in a tableviewcontroller. As fresh to autolayout, what should I pay attention to when handling these kinds of problems? Could you give me some suggestions?

Hope to hear from you. Thanks in advance.