I have a parent view which has a tableview and tableviews leading,trailing,top,bottom is zero.
and I have a label to show if there are no records ... to show a message and I have vertically and horizontally centered it.
Based on content size of tableview I have to change the parentview's height and i can't directly do because there is no height property defined for parent view .. only leading,trailing,top and bottom property.
Now I have to change the bottom property value with respect to tables content size
if there are no records have to set the bottom constraint to higher value so that parent view height reduces
(Xamarin c# but constraints are same as iOS objective c or swift no change though)
if(vuParent.Frame.Height - tblMine.ContentSize.Height > 0 && !tblMine.Hidden && tblMine.ContentSize.Height!=0)
{
constraintBottomvuParent.Constant = 10 + vuParent.Frame.Height - tblMine.ContentSize.Height;
}
else if(vuParent.Frame.Height - tblMine.ContentSize.Height < 0)
{
constraintBottomvuParent.Constant = 10;
}else
{
constraintBottomvuParent.Constant = 200;
}
if there is any better way kindly let me know
Thanks
Related
TD;DR
It seems that in some cases systemLayoutSizeFitting does not return the correct height to correctly show / position all subviews of a view. Am I using systemLayoutSizeFitting wrong or is there some other way to avoid this?
Long story:
The XIB file of a UIViewController does not only contain the main view but also a number of other views which are added to the view controllers view at runtime. All these additional views should get the same height when they are added to the view controllers view.
The views might look like this: A simple container view holding some subviews which are stacked on top of each other.
Since the height of the container view should be flexible, the vertical spacing between the bottom button and the lable above it, uses a grater-than constraint.
To give all views the same height, I tried to measure the necessary height of each view using systemLayoutSizeFitting:
#IBOutlet var pageViews: [UIView]!
override func viewDidLoad() {
super.viewDidLoad()
var maxHeight: CGFloat = 0
for pageView in pageViews {
// Add pageView somewhere on view and give it leading, trailing and top
// constraint, but no height constraint yet.
addToView(pageView)
maxHeight = max(maxHeight, pageView.systemLayoutSizeFitting(CGSize(width: view.frame.width, height: UIView.layoutFittingCompressedSize.height), withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel).height)
}
for pageView in pageViews {
// Give all pageViews the same height
pageView.heightAnchor.constraint(equalToConstant: maxHeight).isActive = true
}
}
This does not work, when the label text becomes to long:
In the right example the height is not large enough and thus the button is squeezed. I can counter act this by raising the vertical compression resistance of the button, however in this case the other controls (e.g. the title label) is squeezed...
Why is this? Why does not systemLayoutSizeFitting return a height which is sufficent to show all controls without any squeezing?
Its actually smash button's height when label text is getting bigger . You are setting top and bottom constraints but button height is not declared so when label getting bigger , view basically say "I can reduce button height before updating my height , I have space.Bottom and top constraints are still same , didn't effect."
Giving the constant height constraints of button might be fix your issue.
If you want your view to resist to compression you should use the defaultHigh priority as a verticalFittingPriority instead of fittingSizeLevel.
My original ViewController consists of only one scrollView like this:
Now I also have my own xib file (CheckBoxView) which mainly consists of one button, see this screenshot:
I dynamically create some UIStackViews and add them to the ScrollView Inside these UIStackViews I add multiple instances of my xib file.
What I want to achieve is, that the StackViews are just vertically stacked. And inside the StackViews the UIViews from my xib-file should also be vertically stacked.
At the moment it looks like this:
So the xib-Views are not in the whole view. Since I am using multi-os-engine I can't provide swift/obj-c code. But here is my Java-Code:
for (ItemConfiguration config : itemInstance.getConfigurations()) {
List<DLRadioButton> radioButtons = new ArrayList<DLRadioButton>();
UIStackView configView = UIStackView.alloc().initWithFrame(new CGRect(new CGPoint(0, barHeight), new CGSize(displayWidth, displayHeight - barHeight)));
configView.setAxis(UILayoutConstraintAxis.Vertical);
configView.setDistribution(UIStackViewDistribution.EqualSpacing);
configView.setAlignment(UIStackViewAlignment.Center);
configView.setSpacing(30);
for (ConfigurationOption option : config.getOptions()) {
UIView checkBox = instantiateFromNib("CheckBoxView");
for (UIView v : checkBox.subviews()) {
if (v instanceof DLRadioButton) {
((DLRadioButton) v).setTitleForState(option.getName(), UIControlState.Normal);
//((DLRadioButton) v).setIconSquare(true);
radioButtons.add((DLRadioButton) v);
}
}
configView.addArrangedSubview(checkBox);
}
// group radiobuttons
//groupRadioButtons(radioButtons);
configView.setTranslatesAutoresizingMaskIntoConstraints(false);
scrollView().addSubview(configView);
configView.centerXAnchor().constraintEqualToAnchor(scrollView().centerXAnchor()).setActive(true);
configView.centerYAnchor().constraintEqualToAnchor(scrollView().centerYAnchor()).setActive(true);
}
private UIView instantiateFromNib(String name) {
return (UIView) UINib.nibWithNibNameBundle(name, null).instantiateWithOwnerOptions(null, null).firstObject();
}
How do I need to set the Alignments etc. to Achieve what I want. It should look like this:
I don't know if there is a reason to not use UITableView, that i highly recommend for your case. In case it's not possible, below you can find some pieces of advice that should help.
If you use Auto Layout, you should set constraints for all views instantiated in your code. The constraints must be comprehensive for iOS to know each view's position and size.
Remove redundant constraints
configView.centerXAnchor().constraintEqualToAnchor(scrollView().centerXAnchor()).setActive(true);
configView.centerYAnchor().constraintEqualToAnchor(scrollView().centerYAnchor()).setActive(true);
These two constraint just doesn't make sense to me. You need the stackviews be stacked within you ScrollView, but not centered. If i understand you goal correctly, this should be removed
Set width/x-position constraints for UIStackViews
configView.setTranslatesAutoresizingMaskIntoConstraints(false);
scrollView().addSubview(configView);
Right after a stack view is added to the ScrollView, you need to set up constraints for it. I'll provide my code in swift, but it looks quite similar to what your Java code is doing, so hopefully you'll be able to transpile it without difficulties:
NSLayoutConstraint.activate([
configView.leadingAnchor.constraintEqualToAnchor(scrollView.leadingAnchor),
configView.trailingAnchor.constraintEqualToAnchor(scrollView.trailingAnchor)
]);
Set height constraints for UIStackViews
StackViews doesn't change their size whenever you add arranged view in it. So you need to calculate a desired stackview size yourself and specify it explicitly via constraints. It should be enough to accommodate items and spaces between them. I suppose that all items should be of the same size, let it be 32 points, then height should be:
let stackViewHeight = items.count * 32 + stackView.space * (items.count + 1)
And make new height constraint for the stack view:
configView.heightAnchor.constraint(equalToConstant: stackViewHeight).isActive = true
Set y-position for UIStackView
This is a little bit more challenging part, but the most important for the views to work properly in a scroll view.
1) Change loop to know the index of a UIStackView
A scroll view should always be aware of height of its content, so you need to understand which stack view is the top one, and which is the bottom. In order to do that, you need to change for each loop to be written as for(;;) loop:
for (int i = 0; i < itemInstance.getConfigurations().length; i++) {
ItemConfiguration config = itemInstance.getConfigurations()[i]
...
}
I'm not aware of which type your array is, so if it doesn't have subscript functionality, just replace it with corresponding method.
2) Set top anchor for stack views
For the first stack view in the array, top anchor should be equal to the scroll view top anchor, for others it should be bottom anchor of the previous stack view + spacing between them (say, 8 points in this example):
if i == 0 {
configView.topAnchor.constraintEqualToAnchor(scrollView.topAnchor, constant: 8).isActive = true
} else {
let previousConfigView = itemInstance.getConfigurations()[i - 1]
configView.topAnchor.constraintEqualToAnchor(previousConfigView.bottomAnchor, constant: 8).isActive = true
}
3) Set bottom anchor for the last stack view
As was said - for the Scroll View to be aware of content size, we need to specify corresponding constraints:
if i == itemInstance.getConfigurations() - 1 {
configView.bottomAnchor.constraintEqualToAnchor(scrollView.bottomAnchor, constant: 8).isActive = true
}
Note: please be advised, that all constraints should be set on views that are already added to the scroll view.
I created a custom UIView class where I create 2 UILabels and 1 UIImageView. I set the constraints for each element. Since the Labels will hold dynamic text each view will have a different height. How can I resize the height of the view? the constraints (top to bottom) are:
View Top > 16 > Label1 > 8 > ImageView > 8 > Label2 > 16 > View Bottom
The problem is: I have to initialize the UIView with a frame. and no matter what I try the view always uses the height of the frame given by initializing. And I cannot calculate the height of all elements and set a new frame because the labels habe sometimes 1 and sometimes 5 lines.
This is how the view looks at runtime
This is how its supposed to look like
Thanks in advance
You have to initialize the view with a frame, but when setting translatesAutoresizingMaskIntoConstraints to false after initializing, the frame passed in becomes irrelevant. Therefore, you can do what #BallpointBen recommended in the comments and pass in .zero:
let newCustomView = CustomView(frame: .zero)
newCustomView.translatesAutoresizingMaskIntoConstraints = false
// auto layout constraints should now determine height
Context:
I have a pop up view that contains a tableview. I would like the pop up view to be less than the whole height of the screen but would like the tableview to scale with the number of rows it has. (If the table view contains 2 rows then it would fit those 2 rows and would not scroll, if the table view has 30 rows it will max out at the height of the screen and allow scrolling).
View Hierarchy:
- viewContainer (clear background, whole view)
-- viewPopUp (pop up container)
--- labelHeader
--- tableView
--- buttonOK
Constraints:
viewPopUp.centerY = viewContainer.centerY
viewPopUp.centerX = viewContainer.centerX
viewPopUp.leadingSpaceTo superView = 32 #750
viewPopUp.trailingSpaceTo superView = 32 #750
viewPopUp.width <= 300
viewPopUp.height <= 0.8 * viewContainer.height
labelHeader.topSpaceTo superView = 0
labelHeader.leadingSpaceTo superView = 0
labelHeader.trailingSpaceTo superView = 0
labelHeader.bottomSpaceTo tableView = 0
labelHeader.height = 33
tableView.topSpaceTo labelHeader = 0
tableView.leadingSpaceTo superView = 0
tableView.trailingSpaceTo superView = 0
tableView.bottomSpaceTo buttonOk = 0
tableView.height >= 0
tableView.height = 0 #200
buttonOk.topSpaceTo tableView = 0
buttonOK.leadingSpaceTo superView = 0
buttonOK.trailingSpaceTo superView = 0
buttonOk.bottomSpaceTo superview = 0
buttonOK.height = 35
My Question:
In my UIViewController's viewDidLoad I know exactly how many rows will need to be represented in this tableView and I would like to add an additional constraint to have the tableView scale to this number as described in the context above.
I have tried tableView.height = count * rowHeight #500 but this does not update the view. I am not sure if I am not calling something like needsUpdateConstraints or needsUpdateLayout etc.
If I add the above constraint as required then it will update the tableView as expected but I receive constraint warnings and I believe this will break if it pushes the tableView past the size of the screen which is why I wanted to add it as a non-required constraint so it will drop off after it reaches the screen height.
Does anyone have any ideas on how I can reach this desired outcome?
Thanks!
Assuming that the height of the rows are always the same, you could calculate the height of the table, check it against the view height and set this value to a referenced height constraint added to the table view.
The code would look something like:
//calculate the height
var tableHeight = numberOfRows * rowHeight
if tableheight > maxHeight {
tableHeight = maxHeight
}
self.tableHeightConstraint.constant = tableHeight //this constraint should be a iboutlet
self.view.layoutIfNeeded()
Hope it helps.
So I am currently very new to ios programming and I am having a bit of an issue with my table view. First I call my web API to get the data I required to populate my table View. Using the data I am able to calculate the number of rows and sections that would exist on my table view. After that I calculate the correct height of my table view. I change the height of my table view and reload the table. It looks like this
func tableViewHight(numberOfRows : Int)
{
let sectionHeight = CGFloat(30) * CGFloat(numberOfSections - 1)
//This is the height of all the sections in my tableview put together(except the first section since its height will always be 0)
let tableviewMaximumHeight = UIScreen.mainScreen().bounds.size.height - self.myTableView.frame.origin.y
//Maximum height would be the distance from the y position of my table view, all the way to the bottom of the device.
if(tableviewMaximumHeight <= (cellRowHeight * CGFloat(numberOfRows) + sectionHeight))
{
self.myTableView.frame.size.height = tableviewMaximumHeight
}
else
{
self.myTableView.frame.size.height = cellRowHeight * CGFloat(numberOfRows) + sectionHeight
}
self.myTableView.reloadData()
}
My table view is able to change height and reload data perfectly. The only Problem is that I am not able to reach the bottom of my table view. I do not know what else to do. I have already check that my table view has
myTableView.scrollEnabled = true
myTableView.scrollTop = false
If you guys have any advice, I would appreciate it :).
The problem when you manually set the height of a UITableView is that you'll then also have to manually set its content height.
Use Autolayout instead to set the height.
Have an IBOutlet for an NSLayoutConstraint variable (say, tableHeightConstraint) that sets the height of your table, then, in your code:
tableHeightConstraint.constant = tableviewMaximumHeight
or
tableHeightConstraint.constant = cellRowHeight * CGFloat(numberOfRows) + sectionHeight
I found the main root of my problem. The issued lied in my maximumTableviewHeight variable. The problem was that I would the value for this variable in the view did load and apparently the y position of the my table view would always give zero in the view did load. Once the maximum table view height was resolve. The application worked like a a charm.