I ran into the following problem. I have a custom class UITableViewCell with a few UIViews inside, which act as container for chartviews.
The problem is if I do the following:
self.upperLeftChart = XYPieChart(frame: CGRectMake(0, 0, self.upperLeftContainer.frame.width, self.upperLeftContainer.frame.height))
self.upperLeftContainer.addSubview(self.upperLeftChart)
The Chartview is as big as the whole UITableViewCell instead of the size of my container.
If I print the size of my container
NSLog("\(self.upperLeftContainer.frame.width) / \(self.upperLeftContainer.frame.height)")
it prints: 320.0 / 568.0 which is wrong. My container is about a quarter of the whole cell.
I guess it hast something to do with my Autolayout + Constraints. If I set the size to 120x120px hardcoded, it works nicely.
Any trick to get the real width and height of UIView arranged with autolayout and constraints?
What you need to do is to override
override func layoutSubviews() {
super.layoutSubviews()
self.upperLeftCart.frame = CGRectMake(0, 0, self.upperLeftContainer.frame.width, self.upperLeftContainer.frame.height)
}
That way it will change frame of the view every time cell resizes
Related
I have a UIView which contains a label, a button, and a UITableView which populates its data dynamically from a server. I am having trouble resizing the parent UIView to fit its content after the content has dynamically populated. For the purpose of demonstrating my issue, I have made the background of the containing UIView blue.
After populating the TableView with data, the UIView's height does not adjust causing the Tableview data to overflow, seen in the diagram below.
I have set the bottom, leading and trailing space constraints of the TableView to the superview, and top space constraint to the button. The UIView itself has no height constraints set.
I implemented a function to manually recalculate the height of the UIView after populating the content of the TableView. Code for the function below:
func resizeToFitSubviews()
{
var w: CGFloat = self.frame.size.width,
h: CGFloat = 0
for view in subviews {
if view.frame.origin.y + view.frame.height > h { h = view.frame.origin.y + view.frame.height }
}
self.frame.size = CGSize(width: w, height: h)
}
This function works. The UIView resizes to what seems to be the right size, but the TableView disappears after doing so:
Completely lost as to why this occurs. The label and button seem unaffected. I either need to make it so autolayout automatically adjusts the height of the UIView, or make it so that resizing the UIView does not cause the TableView to disappear.
In the View Debugger, the TableView is returning a height of 0 (while the rows are returning 130 as expected given that is what I return in my heightForRowAt function).
Thanks
Don't adjust the view frame if you are using Auto Layout.
Make a height constraint and adjust that to your calculated value.
-
Also it might be easier to manually calculate this height.
height = numberOfRows * heightPerRow
First of all this is not a question about how to automatically size the cells inside the tableview, moreover how to automatically resize the entire tableview.
So I have a scrollview which has a tableview and 2 other views as its subviews. The tableview's cells already automatically resize itself, again this question is not about the individual cells. However, the tableview does not resize at all.
What I have done:
1) Set up the tableview to have a top, bottom, leading and trailing constraint
2) Set the cells up to have auto layout enabled
3) * I do not know the cell size at build time
4) I have disabled scrolling mode on tableview
So long story short, how can I go along to get the tableview to resize itself?
Edit
The cells contain a label which can have various lines of text, so therefore the cells, which use auto layout, should then determine the height of the table view.
The following images show how the view is set up:
As you can see the tableview is only a small part of the view and since the scrollview from the tableview is deactivated there should, and aren't, any scrolling problems.
EDIT 2
This is actually how it should end however, i am calculating this on my own and everytime I want to make a small change to the cells the whole code, which calculates the height of the cell, needs to be rewritten and it is quite difficult for me to get the height just right.
Edit 3
Until now I had a height constraint on the tableview which I calculated manually, however removing this constraint and trying to let auto layout handle the tableview height size creates the following error:
Scroll View
Need constraint for: Y position or height
I can conclude therefore that the tableview does not know how to automatically calculate the height based on its cells with autolayout.
You don't need to create a height constraint or set frame whatsoever. Create a subclass of UITableView and recalculate its intrinsicContentSize every time its contentSize changes aka new data added or removed. Here is all you needed:
class SelfSizingTableView: UITableView {
override var contentSize: CGSize {
didSet {
invalidateIntrinsicContentSize()
setNeedsLayout()
}
}
override var intrinsicContentSize: CGSize {
let height = min(.infinity, contentSize.height)
return CGSize(width: contentSize.width, height: height)
}
}
You can change your UITableView's frame by using tableview.frame = CGRect(x: <some_x>, y: <some_y>, width: <some_width>, height: <some_height>)
If your UITableViewCells use auto layout then they should resize when the UITableView's frame changes.
I'm trying to have a UITableView that lists all the different HomeKit devices a user has available.
Obviously there is no way to know how many devices they have, so I need to have the UITableView's height in the storyboard change.
I've tried this, which I call in the viewDidLoad() function:
func adjustHeightOfTableView() {
//getting the height of the tableview
var tableHeight = self.tableView.contentSize.height
//the height of the content inside the view
var maxHeight = self.tableView.superview?.frame.size.height
//if the height of the content is bigger then the height of the tableview
if (maxHeight! > tableHeight) {
tableHeight = maxHeight!
//set the tableview height to be the content height
}
//trying to reload the tableview height?
self.view.layoutIfNeeded()
self.tableView.reloadData()
}
I am trying to have some UI Elements under the tableview, and I want them to be a set space from the bottom of the tableview, but also have the tableview be the height that it needs to be, for whatever amount of cells there is.
But it's just not working.
If I'm doing anything wrong, or if anyone knows how to make this work, please let me know.
Thanks!
Note: For this approach you need to have static cell height or figure out a way to know before hand whats the total contentsize height
Assuming you are using constraints, create following constraints on your UITableView (apart from leading and trailing!)
Add a height constraint with a priority of 750 and a bottom spacing constraint of 0 to your super view that will be >= 0 and have a priority of 1000. Create outlet for this height constraint that you created in your UIViewController
Now,
func adjustHeightOfTableView() {
//set the height to be equal to the number of elements multiplied by the height of each cell.
//or use some logic that allows you to know what content size or space the cells will occupy!
tableViewHeightConstraint.constant = dataArray.count * rowHeight
view.layoutIfNeeded()
}
Now if your UITableView height is less than super view, no problems! But if it is greater than screen bounds, it will break the height constraint and become full screen and display the content normally as you expect a UITableView to!
Edit:
Even if you are using UIAutomaticRowDimensions what you can do is add constraints programmatically to your UITableView. i.e
Of course all your other views will still have a bottom constraint to your UITableView.
Create a UITableView in your storyboard with normal leading, trailing, top and bottom to the super view. Fetch the data. Get the contentSize for your UITableView and then remove the bottom constraint. Now add a height constraint that will be the minimum value of your UIScreen.main().bounds.size.height and contentSize.
you can use Automatic Dimensions if you are using autolayouts
in view didload:
let nib = UINib(nibName: "YOURCELLNIB", bundle: nil)
tableView.registerNib(nib, forCellReuseIdentifier: "REUSEIDENTIFIER")
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 140
Remove the function
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath)
In your code, you have:
tableHeight = maxHeight!
//set the tableview height to be the content height
But this does not change the table height - it only changes some variable that previously was assigned the value of the old table content height. Nowhere in your code do you actually do anything to change the table height.
One way to change the table height directly is to assign it a completely new frame with values from the old frame, except for the frame's height, which you calculate however you like.
Try something like this (adding whatever other logic you need):
oldFrame = self.tableView.frame
newHeight = rowCount * rowHeight
self.tableView.frame = CGRectMake(oldFrame.origin.x, oldFrame.origin.y, oldFrame.size.width, newHeight)
There is a workaround which can make it seems like the height changes according to the number of the cells.
set tableview height to a proper value when init.
UITableView.init(frame: CGRect.init(x: 0, y: 70, width: self.view.frame.width, height: self.view.frame.height - 350))
set the tableview background color white transparent.
pulldownTableView?.backgroundColor = UIColor.white.withAlphaComponent(0)
set tableFooterView.
pulldownTableView?.tableFooterView = UIView(frame: CGRect.zero)
Below is the result, there are two table in the img. I set the transparent for the front tableview, left img set the backgroundColor to white, right white transparent.
----------------------vs----------------
I have a UIImage of dimensions 300x600 (height x width). UIImage's relative hierarchy is like so :
Using AutoLayout, I have set the following constraints for the UIImageView, UIScrollView and UIVIew:
I have set relative height dimensions of the TableView as follows:
// Setting Last Row to height = 70 pixels and first row to fill balance of screen:
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
if indexPath.row == 1 { return 70 }
else { return tableView.frame.size.height - 70 }
}
What I would like is for the height of the UIImage to exactly match the height of the UISCrollView that it sits in. I am not concerned about the eventual width of the UIImage, but would like it to follow confines of 'AspectFit'. So I would probably employ
imageView.contentMode = UIViewContentMode.ScaleAspectFit
... probably in
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
}
I would set the dynamic height and width parameters of the UIScrollView, and then set the UIImage height to follow the height of the UISCrollView and allow the ScaleAspectFitto automatically handle the width.
I have tried various renditions of code to achieve this, but have failed to achieve the desired result.
Question: Am I on the right track? Can anyone kindly get me started with some skeleton code so I can customise it to my needs.
Side Note: I am only allowing for portrait mode of my app. No landscape.
Many thanks in advance for your kind attention and time ;)
I would make a container UIView to hold the exact UIScrollView then I can create constraints of scroll view's child UIImageView to that of the container view i.e. equal heights.
As I suppose, these constraints are to their parents like
UIView <--> UIScrollView <--> UIImageView
but try them as
UIView <--> UIImageView
I've got my custom UITableViewCell working now, with 'dynamic' height using Auto Layouts.
However, these row-dividers are kind of off.
It's a UITableViewController. The width of the image is the full width of the iPhone in the simulator.
Anyone have a clue? It's kind of a UITableViewController right of the shelf, not much code in it, mostly code for datasource/delegation.
To clearify I want the separators, but I want them equally indented on both sides. The default indention is fine, which is on the left side, but not the right side.
As Fogmeister mentioned, you could remove the separators entirely and just add a separator view on your custom table cells or you could extend the separators by setting the
cell.separatorInset = UIEdgeInsetsZero
cell.layoutMargins = UIEdgeInsetsZero
tableView.separatorInset = UIEdgeInsetsZero
tableView.layoutMargins = UIEdgeInsetsZero
note that this is only available for iOS 8 onwards.
These are called separators.
You can turned them off in Interface Builder as a property on the tableView.
Select the tableview and select the "None" property for the separator.
The default for the UITableViewCell separators is to be indented. However, by digging into your UITableViewCell's subviews, you can move and size the separator by altering its frame.
In your custom UITableViewCell class, override the layoutSubviews() method so you can grab the separator object as the cell's subviews are being laid out by iterating through your cell's subviews and check for a subview of the UITableViewCellSeparator type. If you want to make the separator span the entire cell's width, for example, change its frame's origin.x to 0 and make the separator the full width of the cell's contentView.
override func layoutSubviews() {
super.layoutSubviews()
for subview in self.subviews {
if subview.dynamicType == NSClassFromString("_UITableViewCellSeparatorView") {
var newFrame = subview.frame
newFrame.origin.x = 0
newFrame.size.width = self.contentView.frame.width
separator.frame = newFrame
}
}
}