I am trying to dynamically resize my UITableView Cells in swift:
Above is my cell setup for the smallest possible screen size (iPhone 4). The green view (an image) will enlarge if the screen width increases and retain its aspect ratio. It's pinned to the top, leading edge trading edge and aspect ratio enabled. The label below is centered horizontally. The top pinned to the bottom of the image and the height and width fixed.
I have this code in viewDidLoad:
tableView.estimatedRowHeight = 262
tableView.rowHeight = UITableViewAutomaticDimension
If I run the app I get the warning:
Warning once only: Detected a case where constraints ambiguously suggest a height of zero for a tableview cell's content view. We're considering the collapse unintentional and using standard height instead. The cell is also the wrong size only about 25pts in height. What am I doing wrong here?
First if all, check out this link. You may be missing an overload:
custom UItableView not displaying correctly on ios8
Second, look at your constraints again. Just for the vertical dimension, you've set the distance from the image to the top, from the image to the label, and from the label to the bottom.
The size of the label will be given by the text.
But the size of the image is uncertain. You have a leading constraint and an aspect ratio, but how does that specify a size?
Basically if you were to render this yourself, would you have enough information to do it?
Try add constraint: label's bottom to cell's bottom
Remove label's fix height.
Hope this can help.
Related
I have a horizontal collection view that contains an UILabel. I have mentioned the collection view cell's size in the delegate method.
And added leading, trailing, height and vertical center constraints to that label as shown in the below image.
But in the output, the width of the label is getting increased or decreased based on the text and the collection view cell size as well.
I want to keep the size of the collection view cell fixed as mentioned in the delegate method.
How can I accomplish this?
Two things.
First, it sounds like you might be adding a width constraint to the label that’s equal to the label’s text width. That width constraint will force the cell to expand to meet the requirements of the leading, trailing and now width constraints. Instead, make the width constraint equal to the width the label should be.
Second, set the label’s .numberOfRows property to 0. This will make it so the label will break into multiple horizontal lines instead of going wider.
Edit:
Another thing that could help might be to adjust the horizontalCompressionResistance property on the label to 249 or something lower.
I'm working to make a chat bubble like in iMessage. I have to use UITextView to get advantage of DataDetectors to detect urls, phone numbers and addresses automatically. My view hierarchy is like;
-UITableViewCell
-ContentView
-ChatBubbleContainerView
-UITextView
ChatBubbleContainerView have constraints of
10-pt left, right, top and bottom margins --> ContainerView
UITextView have constraints of
10-pt of left, right, top and bottom margins --> ChatBubbleContainerView
I want to achieve a behaviour to make the text view automatically expand its height and width according to its content inside e.g. text. But the text view has no intrinsic content size.
These are what i have tried and got wrong results
Overriding the intrinsicContentSize property of text view but it's
not working too.
Giving a width constraint to the ChatBubbleContainerView and changing it to result of sizeThatFits() method
Giving a width constraint to the ChatBubbleContainerView and changing it to result of text.boundingRect method
These are the results i've got
It's not working properly and the cell is not laying out as expected as i scroll the table view
It's working but the initial width of cell in the nib is 375-pt which is good for 4.7 inch devices but when i switch to devices like iPhone SE which has 4 inches at the initial table view load or cell insertion, the cell's width is calculating according to 375-pt not 320-pt. After scrolling cell, the layout is laying out as expected.
Same with 2.
When i try same layout with UILabel it's working as expected. As you may know UILabel has intrinsic content size.
Thanks
TextView Contraints are good you need to made some changes on ChatBubbleContainerView constraints.
ChatBubbleContainerView constraint:
top, leading, bottom -> 10 pts
MaxWidth(GreaterThanOrEqual) to contentView, for instance 0.85 or you can set TrailingConstraint with maxConstant(GreaterThanOrEqual to contentView.
you need to set the maxWidth then only ChatBubbleContainerView will be responsive.
I am making an universal app for the first time. I want to change my image size according to screen size for it to look bigger on iPad and smaller on iPhones. Also it should look fine in both orientations.
I want the UIImageView size to be kept proportionate to screen size. These are the constraints applied till now :
Here topConstraint is an outlet which has the following code :
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
if UIDevice.current.orientation.isLandscape {
topConstraint.constant = 40
}
else {
topConstraint.constant = 12
}
}
If i give only leading trailing top and bottom constraints then it shows red lines depicting missing constraints as follows :
Please help. I am using swift 3 and xcode 8. I know its something to do with aspect ratio but mine is still not coming perfect.
Your top label doesn't have enough constraints to know where it should be along the Y axis.
Let's have a look at your constraint along the Y axis starting from the bottom of your view. You set:
the bottom of your view to be at 16p from the bottom of your detailLabel,
your detailLabel top at 16p from the imageView bottom,
then you have the aspect ratio of your image which given the width (you set it through the leading constraint of the imageView and the X-center) is setting the height
imageView top at 16p from detailLabel bottom
dateLabel top at 4p from titleLabel bottom
you didn't set the constraint starting from the top of the titleLabel and going to the top of the view.
So in conclusion, you are missing one constraint. Set the top constraint of you title label and you should be fine. Also, I would delete the X center constraint of your imageView and replace it by a trailing constraint of 32pt (same as the leading one, it's easier to read, will display the same and there's less inferring to do)
As per my understanding suggestion is:
constraints to imageview : Leading ,Trailing , Top and Height.
Now give outlet to height constraint.
Then for bottom label,Constraints are: Top,Bottom,Leading,Trailing.
Now set your imageView's height constraint's constant according to your need.
To make image size according to screen size, you need to set aspect ration constraint with respect to your current view(current screen size).
From the give constraints, you are missing height and width of image view as its not possible to infer its dimension until image is set to it, so you need to give height & width to the image view, the red line will be removed automatically.
Why red line are there?
Since you are using scroll view, the scrollview's content size is depended on the its subview and the constraints given to its subview.
So please make sure that all the constraints to the subview are given correctly. Otherwise scrollview will not be scrolled.
Set aspect ratio 1:1 and see. It will stretch your imageview with proportion of 1:1 according to minimum scale of device size (either height or width).
Note: Device orientation also plays important role here.
Please look at the ScreenShot attached for wCompact|hRegular for different screens, I am trying to make it working since hours but not getting any success. My requirement is that at the top there would be a label with some predefined margin. Although the Label content would render at the runtime, but I know the content size, so resizable label isn't needed actually I think. Now there would be three row at equal distance. In first and third row, there would be two buttons with equal height and width and in second row there would be button aligned horizontally. I have set the buttons image and text in storyboard. Control Alignment are set to Horizontal | vertical. Constraints for label are:
Pinned top space to superview, leading and trailing space equals to:8(superview), height equals:90.
Constraints for Button(View Transactions) are:
top space to label, bottom space equals to:8(New Launches Button) leading and trailing space equals to:8(superview) and 8(Place Request Button) respectively, and equal width and height for all buttons.
Looks fine for 4.7 and 5.5 But not satisfied with the output for smaller screens. As u can see resizing of buttons image not working properly(Larger space between button's image and text). One more thing is I don't wanna set the height of the label, cause it seems like a wrong practice in AutoLayout. Any help would be much appreciated.
You should set the Aspect Ratio for the Buttons, not just the equal width and height. In that case auto layout wont shrink the images.
Really you should put this into a scroll view so that if the height is too great the user can still see everything by scrolling. You should also not set static heights on labels, you should allow the intrinsic content size to apply.
Add a subview to your new scroll view. Pin the width of this subview to the width of the scroll view. Do not pin the height.
Add all of your buttons and labels to this new subview. Pin them to the edges of the view and allow the intrinsic content sizes to apply limits. Set various items to have equal widths and heights. Do not set explicit heights or widths (do everything by proportion or equality so auto layout can choose good sizes).
I created a new UICollectionView in the storyboard. My problem is that the cells try and fit a larger width than the width of the device, so the ones on the right get cut off. What's a good way to fix this?
you need to pinned all edges of your UICollectionview...check out here
By pinned all edges, you'll get equal height and width of screen
You need to add the proper constraints to your collection view. If you want it to be the width of the screen, then add 0 length spacing constraints to both edges of the controller's self.view (top and bottom as well if you want it full height).