Make view round after autolayout - ios

I have a tableview with custom cells which are built from storyboard with an identifier using AutoLayout.
One of the subviews needs to be round (layer.cornerRadius = width/2), it is a square in the beginning.
I have tried in layoutSubviews() but it seems to be called before AutoLayout changes its size... same thing for didMoveToSuperview()
Where is the proper function to update things like this to my subviews after AutoLayout has changed their sizes?
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell_small") as! Cell
...
return cell
}
// In Cell
override func layoutSubviews() {
rankLabel.layer.cornerRadius = rankLabel.bounds.width/2
rankLabel.layer.masksToBounds = true
}
override func didMoveToSuperview() {
rankLabel.layer.cornerRadius = rankLabel.bounds.width/2
rankLabel.layer.masksToBounds = true
}
Result:

What I ended up doing was making a class called RoundView
class RoundView:UIView {
override func layoutSubviews() {
super.layoutSubviews()
self.layer.cornerRadius = self.bounds.width/2
self.layer.masksToBounds = true
}
}
And then I apply it to every view I need to be round. So in Storyboard I add RoundView to Custom Class.
What was happening was that if you look inside the source of the storyboard (XML) every view had the size of the whole screen, you can look inside your own SB code. So by trying to add a corner radius equal to the width/2 inside its parent layoutSubviews() that subview hasn't got its frame set correctly. So the corner radius got the value of 320/2 instead of 50/2, thats why it got misshaped.

1.Create a custom class of UIView/category
#import <UIKit/UIKit.h>
#interface RoundView : UIView
#end
#import "RoundView.h"
2.Add layoutSubviews method and set corner radius.
#implementation RoundView
-(void)layoutSubviews{
[super layoutSubviews];
self.layer.cornerRadius = self.bounds.size.width/2;
self.layer.masksToBounds = true;
}
3.Make your UIView as a subclass of RoundView and run the application, you can see circle view.

Try subclassing UITableViewCell like this,
#interface RoundingCell : UITableViewCell
#property (nonatomic,weak) IBOutlet UILabel * someLabel;
#end
#implementation RoundingCell
-(void)layoutSubviews
{
[super layoutSubviews];
self.someLabel.layer.cornerRadius = CGRectGetHeight(self.someLabel.bounds)/2;
self.someLabel.layer.masksToBounds = YES;
}
#end
And Use this as the class of the desired cell, along with IBOutlet connections.

I had the same issue with my imageview so i resolved it by sub-classing UIImageView.
#interface MyImageView : UIImageView
#end
#implementation MyImageView
-(void)layoutSubviews
{
[super layoutSubviews];
self.layer.cornerRadius = self.bounds.size.width / 2.0;
}
#end

It's strange, I make my round cells just by using your code. (and I also use auto layout).
The only difference is, I use .frame and not .bounds (divided by 2). Have you tried that?
Otherwise you can use a custom cell and in the -awakeFromNib set rounding the same way, so you don't have to do it in each cell.

You have two options:
Create a custom Class YourCell and add your code to the initWithCoder-Method
Add a method to your ViewController
like following
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
and change it inside there. To access the cell you call
[(YourCell *)cell view]....

Related

How to make UILabel position fixed?

I dragged a "Label" object into a scene in my storyboard in Xcode's Interface Builder.
The problem is that the Label is "pinned" to the top of the screen, so that when I scroll down in the View Controller, the Label is always located at the top of the screen.
What I want instead is for the Label to disappear when I scroll down and re-appear when I scroll back up. I don't want the Label to scroll at all. I want its position to be completely fixed.
I found this answer but I don't recognize the screen capture in Xcode 8.2.1.
Here is the View Controller structure:
Try this:
#interface ViewController () <UIScrollViewDelegate>
#property (nonatomic, weak) IBOutlet UILabel *fadingLabel;
#end
#implementation ViewController
#pragma mark - UIScrollViewDelegate
/* For this method to get called, make sure you set the delegate of your table view to this view controller.*/
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (!self.fadingLabel)
return;
CGFloat labelHeight = CGRectGetHeight(self.fadingLabel.frame);
CGFloat alpha = 1.0f - (scrollView.contentOffset.y / labelHeight);
[self.fadingLabel setAlpha:alpha];
}
#end
Here's the swift translation:
class ViewController: UIViewController, UIScrollViewDelegate {
private weak var fadingLabel: UILabel?
// MARK: - UIScrollViewDelegate
/* For this method to get called, make sure you set the delegate of your table view to this view controller.*/
func scrollViewDidScroll(_ scrollView: UIScrollView) {
guard let label = self.fadingLabel else {
return
}
let labelHeight: CGFloat = label.frame.height
let alpha: CGFloat = 1.0 - (scrollView.contentOffset.y / labelHeight)
label.alpha = alpha
}
}
You should implement UIScrollViewDelegate and hide/show the label according to the vertical content offset of your scroll view in scrollViewDidScroll(_:).
func scrollViewDidScroll(_ scrollView: UIScrollView) {
label.isHidden = scrollView.contentOffset.y > 50
}
Don't forget to set the delegate of your scroll view:
scrollView.delegate = self

How to add padding to left/right of a static cell in UITableView swift

I'm using a UITableViewController with static cells and I want to make it so that the cells do not take up the entirety of the view. I want something more akin to this image: https://i.stack.imgur.com/4nO09.png
I can't quite figure out how to do so. I've been able to change the height thanks to self.tableView.contentInset, but I'm not sure how to change the width.
How would I do this?
EDIT:
Here's my Code for Fay007 as well as an image.
import UIKit
class ContactFormViewController: UITableViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Sets the background images
if let patternImage = UIImage(named: "Pattern") {
view.backgroundColor = UIColor(patternImage: patternImage)
}
}
override func viewWillAppear(_ animated: Bool) {
let numberOfRows: CGFloat = CGFloat(self.tableView.numberOfRows(inSection: 0))
let headerHeight: CGFloat = (self.view.frame.size.height - (self.tableView.rowHeight * numberOfRows)) / numberOfRows
self.tableView.contentInset = UIEdgeInsetsMake(headerHeight, 0, -headerHeight, 0)
}
http://imgur.com/a/Q2kfH
The first image I linked has its cells away from the left/right edges, as in my comment I explained I believe they did using autolayout. Since the tableview is a subview of the UIView of the UIViewController, I believe one would be able to assure that. however, when using a UITableViewController, which is required to use static cells in a UITableView, there is no UIView parent.
One easy way of doing this is as follows: In storyboard, or interface builder, add a UIView subview to the UITableviewcell. Create constraints that define your desired distance of this subview to the edges of the cell.
To add rounded corners, you can do so within awakeFromNib by setting the cornerRadius of the subview's layer property to your desired radius.

iOS 8 self sizing cells with changing height

I created a tableview with self-sizing UITableViewCells using
tableview.rowHeight = UITableViewAutomaticDimension;
For testing a created a single UIView and added it to cell.contentView with the following constraints. (using masonry)
- (void)updateConstraints {
UIView *superview = self.contentView;
if (!_didSetupConstraints) {
[self.testView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview);
make.height.equalTo(#10.0f);
make.left.equalTo(superview);
make.right.equalTo(superview);
make.bottom.equalTo(superview);
}];
_didSetupConstraints = YES;
}
[super updateConstraints];
}
When i select a row i like to change the height of the selected cell. I do this by:
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
[self.testView mas_updateConstraints:^(MASConstraintMaker *make) {
if (selected) {
make.height.equalTo(#100);
}
else {
make.height.equalTo(#10);
}
}];
[UIView animateWithDuration:0.3f animations:^{
[super layoutIfNeeded];
}];
}
It seems to work but, xcode complaints with the following error:
Unable to simultaneously satisfy constraints.
Then problem is that contentView is creating a height constaint on its own (because contentView.translatesAutoresizingMaskIntoConstraints = YES; per default).
So when updateConstraints is first run, the system will create a height constraint on contentView equal to 10.0f
afterwards when setSelected... is called i alter the height of my testView so theres a conflict between testView.height (100.0f) and contentView.height (10.0f) and since testView is attached to the bottom of contentView (in order for self-sizing cells to work) it gives and error.
I tried setting contentView.translatesAutoresizingMaskIntoConstraints = NO; but then it seems the UITableViewCell cant really figure out a proper size for the cell. (sometimes it too wide / too small) etc.
What is the proper way to implement self-sizing cells which can have their height changed dynamicly?
There are two issues here:
1. The AutoLayout message: Unable to simultaneously satisfy constraints.
This is caused by the fact that you update your custom view's height constraint, but you do not update the contentView's height constraint. Because you also set the custom view's bottom constraint to the contentView bottom, the system cannot satisfy both contstraints: The custom view cannot have a height of 100 and at the same time be connected to the contentView's bottom while the contentView still has a height of 10.
The fix for this is quite easy. You define a height constraint for the contentView and set it to the height of your custom view:
[self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(self.testView);
}];
This fixes the problem.
2. Updating the cell's height
Updating the cell height is not so easy because the cell heights are handled by the UITableViewController and not the cells themselves. Of course you can change the height of your cell, but as long as the UITableViewController does not give the cell enough space you won't see the new cell height. You will see that your now higher cell will overlap the next cell.
So you need a way to tell the UITableViewController that it should update the height of your cell. You can do that by calling reloadRowsAtIndexPaths:withRowAnimation:. That reloads the cell and also animates it nicely. So the cell somehow has to call that method on the UITableViewController. The challenge there: A UITableViewCell has no reference to its UITableViewController (and it shouldn't).
What you can do is subclass UITableViewCell and give it a closure property that it can execute whenever its height has changed:
class DynamicHeightTableViewCell: UITableViewCell {
var heightDidChange: (() -> Void)?
...
Now, when you dequeue a cell in your UITableViewControllerDataSource you set its closure:
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell:UITableViewCell = tableView.dequeueReusableCellWithIdentifier("DynamicHeightTableViewCell", forIndexPath: indexPath)
if let customCell = cell as? DynamicHeightTableViewCell {
customCell.heightDidChange = { [weak cell, weak tableView] in
if let currentIndexPath = tableView?.indexPathForCell(cell!) {
tableView?.reloadRowsAtIndexPaths([currentIndexPath], withRowAnimation: .Automatic)
}
}
}
return cell
}
And then when the cell changes its height you just execute the closure and the cell will be reloaded:
func theFunctionWhereTheHeightChanges() {
// change the height
heightDidChange?()
}

Where to highlight UICollectionViewCell: delegate or cell?

According to the Collection View Programming Guide one should handle the visual state of the cell highlights in the UICollectionViewDelegate. Like this:
- (void)collectionView:(PSUICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
MYCollectionViewCell *cell = (MYCollectionViewCell*)[collectionView cellForItemAtIndexPath:indexPath];
[cell highlight];
}
- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
MYCollectionViewCell *cell = (MYCollectionViewCell*)[collectionView cellForItemAtIndexPath:indexPath];
[cell unhighlight];
}
What I don't like about this approach is that it adds logic to the delegate that is very specific to the cell. In fact, UICollectionViewCell manages its highlighted state independently, via the highlighted property.
Wouldn't overriding setHighlighted: be a cleaner solution, then?
- (void)setHighlighted:(BOOL)highlighted
{
[super setHighlighted:highlighted];
if (highlighted) {
[self highlight];
} else {
[self unhighlight];
}
}
Are there any disadvantages to this approach instead of the delegate approach?
As the documentation says, you can rely on highlighted property to be changed while the cell is highlighted. For example the following code will make the cell red when highlighted (not its subviews though):
- (void)setHighlighted:(BOOL)highlighted {
[super setHighlighted:highlighted];
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
if (self.highlighted) {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(context, 1, 0, 0, 1);
CGContextFillRect(context, self.bounds);
}
}
And if you add something like this the background will become purple (red + opaque blue):
- (void)collectionView:(UICollectionView *)colView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [colView cellForItemAtIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor colorWithRed:0 green:0 blue:1 alpha:0.5];
}
- (void)collectionView:(UICollectionView *)colView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [colView cellForItemAtIndexPath:indexPath];
cell.contentView.backgroundColor = nil;
}
So you can use both together (not necessarily both changing the cell appearance). The difference is that with delegate methods you also have indexPath. It might be used to create multi-selection (you will use this methods together with selection delegate methods), to show some preview while the cell is highlighted, to show some animation with other views... There's quite a few appliance for this delegate methods in my opinion.
As a conclusion, I would leave the cell appearance to be handled by the cell itself and use delegate methods to let controller make something cool in the same time.
Two possible approaches are outlined below.
Cell Subclassing
Cleaner approach if already subclassing from UICollectionViewCell.
class CollectionViewCell: UICollectionViewCell {
override var highlighted: Bool {
didSet {
self.contentView.backgroundColor = highlighted ? UIColor(white: 217.0/255.0, alpha: 1.0) : nil
}
}
}
UICollectionViewDelegate
Less clean, requires the collection view delegate to know about the presentation logic of the cells.
func collectionView(collectionView: UICollectionView, didHighlightItemAtIndexPath indexPath: NSIndexPath) {
if let cell = collectionView.cellForItemAtIndexPath(indexPath) {
cell.contentView.backgroundColor = UIColor(white: 217.0/255.0, alpha: 1.0) // Apple default cell highlight color
}
}
func collectionView(collectionView: UICollectionView, didUnhighlightItemAtIndexPath indexPath: NSIndexPath) {
if let cell = collectionView.cellForItemAtIndexPath(indexPath) {
cell.contentView.backgroundColor = nil
}
}
Notice that UICollectionViewCell has a selectedBackgroundView property. By default, it's nil. Just create a view for this property, and it will appear when the user touches the cell.
override func awakeFromNib() {
super.awakeFromNib()
let view = UIView(frame: contentView.bounds)
view.isUserInteractionEnabled = false
view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.backgroundColor = UIColor(white: 0.94, alpha: 1.0)
selectedBackgroundView = view
}
It is enough for highlighting cell (Swift 4)
class MyCollectionViewCell: UICollectionViewCell {
...
override var isHighlighted: Bool {
didSet {
if isHighlighted {
self.contentView.alpha = 0.6
}
else {
self.contentView.alpha = 1.0
}
}
}
}
Well...as all of these methods are correct. I've found the way that seems like the easiest one to me. Just override the setSelected: method (for example to change background color):
-(void)setSelected:(BOOL)selected{
self.backgroundColor = selected?[UIColor greenColor]:[UIColor grayColor];
[super setSelected:selected];
}
...it works "out of the box" (even with collectionView.allowsMultipleSelection)
As taken directly from UICollectionViewCell.h - overriding both setSelected and setHighlighted are correct. Depending upon your situation you might consider assigning custom views to backgroundView and selectedBackgroundView which are swapped automatically on selection.
// Cells become highlighted when the user touches them.
// The selected state is toggled when the user lifts up from a highlighted cell.
// Override these methods to provide custom UI for a selected or highlighted state.
// The collection view may call the setters inside an animation block.
#property (nonatomic, getter=isSelected) BOOL selected;
#property (nonatomic, getter=isHighlighted) BOOL highlighted;
// The background view is a subview behind all other views.
// If selectedBackgroundView is different than backgroundView, it will be placed above the background view and animated in on selection.
#property (nonatomic, retain) UIView *backgroundView;
#property (nonatomic, retain) UIView *selectedBackgroundView;
Swift 3: (based on the answer of A-Live)
import UIKit
class MyCollectionViewCell: UICollectionViewCell {
override var highlighted: Bool {
didSet {
self.setNeedsDisplay()
}
}
override func drawRect(rect: CGRect) {
super.drawRect(rect)
myImageView.highlighted = self.highlighted
}
}
Swift 4
import UIKit
class MyCollectionViewCell: UICollectionViewCell {
override var isHighlighted: Bool {
didSet {
self.setNeedsDisplay()
}
}
override func draw(_ rect: CGRect) {
super.draw(rect)
myImageView.isHighlighted = self.isHighlighted
}
}

Resizing UITableView to fit content

I am creating an app which will have a question in a UILabel and a multiple choice answers displayed in UITableView, each row showing a multiple choice. Questions and answers will vary, so I need this UITableView to be dynamic in height.
I would like to find a sizeToFit work around for the table. Where the table's frame is set to the height of all it's content.
Can anyone advise on how I can achieve this?
Swift 5 and 4.2 solution without KVO, DispatchQueue, or setting constraints yourself.
This solution is based on Gulz's answer.
1) Create a subclass of UITableView:
import UIKit
final class ContentSizedTableView: UITableView {
override var contentSize:CGSize {
didSet {
invalidateIntrinsicContentSize()
}
}
override var intrinsicContentSize: CGSize {
layoutIfNeeded()
return CGSize(width: UIView.noIntrinsicMetric, height: contentSize.height)
}
}
2) Add a UITableView to your layout and set constraints on all sides. Set the class of it to ContentSizedTableView.
3) You should see some errors, because Storyboard doesn't take our subclass' intrinsicContentSize into account. Fix this by opening the size inspector and overriding the intrinsicContentSize to a placeholder value. This is an override for design time. At runtime it will use the override in our ContentSizedTableView class
Update: Changed code for Swift 4.2. If you're using a prior version, use UIViewNoIntrinsicMetric instead of UIView.noIntrinsicMetric
Actually I found the answer myself.
I just create a new CGRect for the tableView.frame with the height of table.contentSize.height
That sets the height of the UITableView to the height of its content.
Since the code modifies the UI, do not forget to run it in the main thread:
dispatch_async(dispatch_get_main_queue(), ^{
//This code will run in the main thread:
CGRect frame = self.tableView.frame;
frame.size.height = self.tableView.contentSize.height;
self.tableView.frame = frame;
});
Swift Solution
Follow these steps:
Set the height constraint for the table from the storyboard.
Drag the height constraint from the storyboard and create #IBOutlet for it in the view controller file.
#IBOutlet var tableHeight: NSLayoutConstraint!
Then you can change the height for the table dynamicaly using this code:
override func viewWillLayoutSubviews() {
super.updateViewConstraints()
self.tableHeight?.constant = self.table.contentSize.height
}
If the last row is cut off, try to call viewWillLayoutSubviews() in willDisplay cell function:
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
self.viewWillLayoutSubviews()
}
I've tried this in iOS 7 and it worked for me
- (void)viewDidLoad
{
[super viewDidLoad];
[self.tableView sizeToFit];
}
Add an observer for the contentSize property on the table view, and adjust the frame size accordingly
[your_tableview addObserver:self forKeyPath:#"contentSize" options:0 context:NULL];
then in the callback:
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
{
CGRect frame = your_tableview.frame;
frame.size = your_tableview.contentSize;
your_tableview.frame = frame;
}
Hope this will help you.
I had a table view inside scroll view and had to calculate tableView's height and resize it accordingly. Those are steps I've taken:
0) add a UIView to your scrollView (probably will work without this step but i did it to avoid any possible conflicts) - this will be a containr view for your table view. If you take this step , then set the views borders right to tableview's ones.
1) create a subclass of UITableView:
class IntrinsicTableView: UITableView {
override var contentSize:CGSize {
didSet {
self.invalidateIntrinsicContentSize()
}
}
override var intrinsicContentSize: CGSize {
self.layoutIfNeeded()
return CGSize(width: UIViewNoIntrinsicMetric, height: contentSize.height)
}
}
2) set class of a table view in Storyboard to IntrinsicTableView: screenshot: http://joxi.ru/a2XEENpsyBWq0A
3) Set the heightConstraint to your table view
4) drag the IBoutlet of your table to your ViewController
5) drag the IBoutlet of your table's height constraint to your ViewController
6) add this method into your ViewController:
override func viewWillLayoutSubviews() {
super.updateViewConstraints()
self.yourTableViewsHeightConstraint?.constant = self.yourTableView.intrinsicContentSize.height
}
Hope this helps
Swift 5 Solution
Follow these four steps:
Set the height constraint for the tableview from the storyboard.
Drag the height constraint from the storyboard and create #IBOutlet for it in the view controller file.
#IBOutlet var tableViewHeightConstraint: NSLayoutConstraint!
Add an observer for the contentSize property on the override func viewDidLoad()
override func viewDidLoad() {
super.viewDidLoad()
self.tableView.addObserver(self, forKeyPath: "contentSize", options: .new, context: nil)
}
Then you can change the height for the table dynamicaly using this code:
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
if(keyPath == "contentSize"){
if let newvalue = change?[.newKey]
{
DispatchQueue.main.async {
let newsize = newvalue as! CGSize
self.tableViewHeightConstraint.constant = newsize.height
}
}
}
}
In case you don't want to track table view's content size changes yourself, you might find this subclass useful.
protocol ContentFittingTableViewDelegate: UITableViewDelegate {
func tableViewDidUpdateContentSize(_ tableView: UITableView)
}
class ContentFittingTableView: UITableView {
override var contentSize: CGSize {
didSet {
if !constraints.isEmpty {
invalidateIntrinsicContentSize()
} else {
sizeToFit()
}
if contentSize != oldValue {
if let delegate = delegate as? ContentFittingTableViewDelegate {
delegate.tableViewDidUpdateContentSize(self)
}
}
}
}
override var intrinsicContentSize: CGSize {
return contentSize
}
override func sizeThatFits(_ size: CGSize) -> CGSize {
return contentSize
}
}
In case your contentSize is not correct this is because it is based on the estimatedRowHeight (automatic), use this before
tableView.estimatedRowHeight = 0;
source : https://forums.developer.apple.com/thread/81895
I did in a bit different way, Actually my TableView was inside scrollview so i had to give height constraint as 0.
Then at runtime I made following changes,
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
self.viewWillLayoutSubviews()
}
override func viewWillLayoutSubviews() {
super.updateViewConstraints()
DispatchQueue.main.async {
self.tableViewHeightConstraint?.constant = self.myTableView.contentSize.height
self.view.layoutIfNeeded()
}
}
Swift 3, iOS 10.3
Solution 1:
Just put self.tableview.sizeToFit() in cellForRowAt indexPath function. Make sure to set tableview height higher then you need.
This is a good solution if you don't have views below tableview. However, if you have, bottom tableview constraint will not be updated (I didn't try to fix it because I came up with solution 2)
Example:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
if let cell = tableView.dequeueReusableCell(withIdentifier: "TestCell", for: indexPath) as? TestCell {
cell.configureCell(data: testArray[indexPath.row])
self.postsTableView.sizeToFit()
return cell
}
return UITableViewCell()
}
Solution 2:
Set tableview height constraint in storyboard and drag it to the ViewController. If you know the average height of your cell and you know how many elements your array contains, you can do something like this:
tableViewHeightConstraint.constant = CGFloat(testArray.count) * 90.0 // Let's say 90 is the average cell height
*EDIT:
After all the solutions I tried and every of them was fixing something, but not completely, this is the answer that explains and fixes this problem completely.
This works for me using Auto Layout, with a table view with only one section.
func getTableViewContentHeight(tableView: UITableView) -> CGFloat {
tableView.bounds = CGRect(x: 0, y: 0, width: 300, height: 40)
let rows = tableView.numberOfRows(inSection: 0)
var height = CGFloat(0)
for n in 0...rows - 1 {
height = height + tableView.rectForRow(at: IndexPath(row: n, section: 0)).height
}
return height
}
I call this function when setting up Auto Layout (The sample here uses SnapKit, but you get the idea):
let height = getTableViewContentHeight(tableView: myTableView)
myTableView.snp.makeConstraints {
...
...
$0.height.equalTo(height)
}
I want the UITableView only to be as tall as the combined height of the cells; I loop through the cells and accumulate the total height of the cells. Since the size of the table view is CGRect.zero at this point, I need to set the bounds to be able to respect the Auto Layout rules defined by the cell. I set the size to an arbitrary value that should be large enough. The actual size will be calculated later by the Auto Layout system.
There is a much better way to do it if you use AutoLayout: change the constraint that determines the height. Just calculate the height of your table contents, then find the constraint and change it. Here's an example (assuming that the constraint that determines your table's height is actually a height constraint with relation "Equal"):
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
for constraint in tableView.constraints {
if constraint.firstItem as? UITableView == tableView {
if constraint.firstAttribute == .height {
constraint.constant = tableView.contentSize.height
}
}
}
}
based on
fl034's answer
SWift 5
var tableViewHeight: NSLayoutConstraint?
tableViewHeight = NSLayoutConstraint(item: servicesTableView,
attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute,
multiplier: 0.0, constant: 10)
tableViewHeight?.isActive = true
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
tableViewHeight?.constant = tableView.contentSize.height
tableView.layoutIfNeeded()
}
Mimo's answer and Anooj VM 's answer both are awesome but there is a small problem if you have a large list, it's possible that the height of the frame will cutoff some of your cells.
So. I have modified the answer a little bit:
dispatch_async(dispatch_get_main_queue()) {
//This code will run in the main thread:
CGFloat newHeight=self.tableView.contentSize.height;
CGFloat screenHeightPermissible=(self.view.bounds.size.height-self.tableView.frame.origin.y);
if (newHeight>screenHeightPermissible)
{
//so that table view remains scrollable when 'newHeight' exceeds the screen bounds
newHeight=screenHeightPermissible;
}
CGRect frame = self.tableView.frame;
frame.size.height = newHeight;
self.tableView.frame = frame;
}
My Swift 5 implementation is to set the hight constraint of the tableView to the size of its content (contentSize.height). This method assumes you are using auto layout. This code should be placed inside the cellForRowAt tableView method.
tableView.heightAnchor.constraint(equalToConstant: tableView.contentSize.height).isActive = true
For my case, how I manage is.
give any constant height of table view. create outlet of table view height and then call the following function where ever you relaod the tableView.
private func manageHeight(){
tableViewHeight.constant=CGFloat.greatestFiniteMagnitude
tableView.reloadData()
tableView.layoutIfNeeded()
tableViewHeight.constant=tableView.contentSize.height
}
note: tableView is the outlet for your table view and tableViewHeight is the outlet for tableView height.
As an extension of Anooj VM's answer, I suggest the following to refresh content size only when it changes.
This approach also disable scrolling properly and support larger lists and rotation. There is no need to dispatch_async because contentSize changes are dispatched on main thread.
- (void)viewDidLoad {
[super viewDidLoad];
[self.tableView addObserver:self forKeyPath:#"contentSize" options:NSKeyValueObservingOptionOld|NSKeyValueObservingOptionNew context:NULL];
}
- (void)resizeTableAccordingToContentSize:(CGSize)newContentSize {
CGRect superviewTableFrame = self.tableView.superview.bounds;
CGRect tableFrame = self.tableView.frame;
BOOL shouldScroll = newContentSize.height > superviewTableFrame.size.height;
tableFrame.size = shouldScroll ? superviewTableFrame.size : newContentSize;
[UIView animateWithDuration:0.3
delay:0
options:UIViewAnimationOptionCurveLinear
animations:^{
self.tableView.frame = tableFrame;
} completion: nil];
self.tableView.scrollEnabled = shouldScroll;
}
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
if ([change[NSKeyValueChangeKindKey] unsignedIntValue] == NSKeyValueChangeSetting &&
[keyPath isEqualToString:#"contentSize"] &&
!CGSizeEqualToSize([change[NSKeyValueChangeOldKey] CGSizeValue], [change[NSKeyValueChangeNewKey] CGSizeValue])) {
[self resizeTableAccordingToContentSize:[change[NSKeyValueChangeNewKey] CGSizeValue]];
}
}
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
[super didRotateFromInterfaceOrientation:fromInterfaceOrientation];
[self resizeTableAccordingToContentSize:self.tableView.contentSize]; }
- (void)dealloc {
[self.tableView removeObserver:self forKeyPath:#"contentSize"];
}
objc version of Musa almatri
(void)viewWillLayoutSubviews
{
[super updateViewConstraints];
CGFloat desiredHeight = self.tableView.contentSize.height;
// clamp desired height, if needed, and, in that case, leave scroll Enabled
self.tableHeight.constant = desiredHeight;
self.tableView.scrollEnabled = NO;
}
You can try Out this Custom AGTableView
To Set a TableView Height Constraint Using storyboard or programmatically. (This class automatically fetch a height constraint and set content view height to yourtableview height).
class AGTableView: UITableView {
fileprivate var heightConstraint: NSLayoutConstraint!
override init(frame: CGRect, style: UITableViewStyle) {
super.init(frame: frame, style: style)
self.associateConstraints()
}
required public init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.associateConstraints()
}
override open func layoutSubviews() {
super.layoutSubviews()
if self.heightConstraint != nil {
self.heightConstraint.constant = self.contentSize.height
}
else{
self.sizeToFit()
print("Set a heightConstraint to Resizing UITableView to fit content")
}
}
func associateConstraints() {
// iterate through height constraints and identify
for constraint: NSLayoutConstraint in constraints {
if constraint.firstAttribute == .height {
if constraint.relation == .equal {
heightConstraint = constraint
}
}
}
}
}
Note If any problem to set a Height then yourTableView.layoutSubviews().
Based on answer of fl034. But for Xamarin.iOS users:
[Register("ContentSizedTableView")]
public class ContentSizedTableView : UITableView
{
public ContentSizedTableView(IntPtr handle) : base(handle)
{
}
public override CGSize ContentSize { get => base.ContentSize; set { base.ContentSize = value; InvalidateIntrinsicContentSize(); } }
public override CGSize IntrinsicContentSize
{
get
{
this.LayoutIfNeeded();
return new CGSize(width: NoIntrinsicMetric, height: ContentSize.Height);
}
}
}
I am using a UIView extension , approach is close to #ChrisB approach above
extension UIView {
func updateHeight(_ height:NSLayoutConstraint)
{
let newSize = CGSize(width: self.frame.size.width, height: CGFloat(MAXFLOAT))
let fitSize : CGSize = self.sizeThatFits(newSize)
height.constant = fitSize.height
}
}
implementation : :
#IBOutlet weak var myTableView: UITableView!
#IBOutlet weak var myTableVieweHeight: NSLayoutConstraint!
//(call it whenever tableView is updated inside/outside delegate methods)
myTableView.updateHeight(myTableVieweHeigh)
Bonus : Can be used on any other UIViews eg:your own dynamic label
If you want your table to be dynamic, you will need to use a solution based on the table contents as detailed above. If you simply want to display a smaller table, you can use a container view and embed a UITableViewController in it - the UITableView will be resized according to the container size.
This avoids a lot of calculations and calls to layout.
Mu solution for this in swift 3: Call this method in viewDidAppear
func UITableView_Auto_Height(_ t : UITableView)
{
var frame: CGRect = t.frame;
frame.size.height = t.contentSize.height;
t.frame = frame;
}

Resources