On a View I have 6 iOSTextFields, lined up vertically, distributed over the Screen with equal spaces.
It looks as expected when I run the Simulator as iPhone 4s.
How do I use Auto-Layout to have the same equal distribution with a iPhone 5s or 6?
How to use ‘iOSLayoutConstraint’ to achive the required result?
thanks for any help
This shows horizontal but the idea is similar
http://great-white-software.com/miscellaneous/autolayout%20by%20example.zip
Basically to support iOS 7 and 8 you need to manually insert a “spacer” and then set them to be the same size
Once we can move to supporting only iOS 8 there are additional new constraint types we can expose that would remove the need for you to insert these spacers manually
The auto-layout is unnecessary difficult to work with. It would be much easier if Xojo supported relative screen width and screen height. And if it had ‘align’ properties. You would just drop a control on a view and then set it’s dimensions relative to the screen, align it to left, center or right.
For example: drop a Textfield and then set it to ‘20% of screen width’ and ‘10% of screen height’, align left.
It would then scale for all display resolutions that the different iOS devices have.
There are things that model would not accommodate
Like resizing a control based on its content
I’m not saying that it would be the only thing we need. The layout tool seems over engineered now. There are a lot of complex operations possible, but the basics are lacking.
You can already do what you suggested
Set width = “20% of parent width”
Same for height
Really? So ‘parent’ is the same as ‘screen’?
For a control that is not placed on another yes.
Its “the containing view” - the parent view.
When you put one control on another (its parented in that control) then Parent refers to the parent control.
Thank’s Norman,
I have seen the Example with the Spacer’s but that’s not working for me.
The iOSTextFields have fixed Heights, so to distribute them equally over the Screen Height the Spacers must change
their size depending on the iPhone model you use.
I do not see a way to accomplish this with Auto-Layout.
For the moment my Workaround is to calculate the Height of all iOSTextFields, subtract it from Screen Height and divide the
result to one more than number of iOSTextFields and set the ‘offset’ of each Spacer with ‘iOSLayoutConstraint’
[quote=159432:@Hanspeter Stocker]Thank’s Norman,
I have seen the Example with the Spacer’s but that’s not working for me.
The iOSTextFields have fixed Heights, so to distribute them equally over the Screen Height the Spacers must change
their size depending on the iPhone model you use.
I do not see a way to accomplish this with Auto-Layout.
For the moment my Workaround is to calculate the Height of all iOSTextFields, subtract it from Screen Height and divide the
result to one more than number of iOSTextFields and set the ‘offset’ of each Spacer with ‘iOSLayoutConstraint’[/quote]
Simpler : for 5 textfields, make their to relative to the bottomLayoutGuide top, in percentage. The first one at 16%, the second one at 32%, up to 80% for the last one. They will space evenly whatever the size of the screen, even when rotating.
Maybe the Tic-Tac-Toe example would be helpful (Examples/iOS/App/TacTacToe)? It has 9 Canvas controls that are set to 30% of the width/height of the screen and everything remains properly aligned regardless of the iOS device or orientation.
Does anyone know of a website that explains (perhaps as a flowchart) the process flow the Xojo and or iOS goes thru to solve a series of Autolayout constraints? Every site I have looked at (hundreds) simply show examples and how “magic” they are, but nothing say “given this list of constrainst, you go thru this step by step process to determine the actual pixel/point answers that best satisify the criteria”… a flowchart would be excellent…
Those videos I suggested actually go through it
I just dont recall which one
everything points back to this
http://constraints.cs.washington.edu/cassowary/
(as you suggested in one of your posts)
However that website is all messed up, broken links, missing images…
And “cassowary” is still “magic”… there are python and javascript versions, but both are compiled binary and still don’t document the “PROCESS”… I want to know HOW it works, not examples showing that it does work… I want to see “behind the curtain”
not that “this series of constrainst do this…” but “given this series of constrains, we went thru this steps, and this is how we arrived at the fact that ‘this series of constraints do this…’”
[quote=159601:@Dave S]everything points back to this
http://constraints.cs.washington.edu/cassowary/
(as you suggested in one of your posts)
However that website is all messed up, broken links, missing images…
And “cassowary” is still “magic”… there are python and javascript versions, but both are compiled binary and still don’t document the “PROCESS”… I want to know HOW it works, not examples showing that it does work… I want to see “behind the curtain”
not that “this series of constrainst do this…” but “given this series of constrains, we went thru this steps, and this is how we arrived at the fact that ‘this series of constraints do this…’”[/quote]
Just an idea, but since we have access to the constraints values, would not logging all changes in a view when it opens show the order in which they take place, hence show the calculus process ? Or same after a resize ?
The apple WWDC videos
Sorry Norman… but I guess you are not understanding my question.
None of those videos show the “under the hood” implementation… they all show the “developer facing” interface.
they show WHAT it does, not HOW it does it
Does XOJO and XCODE not follow the same set of rules to resolve Autolayout?
I would think these are identical???
in Xojo [priority=AUTO]
left>=parent.left+147
left<=parent.left+20
top=parent.top+221in Swift
let btn1 = UIButton.buttonWithType(UIButtonType.System) as UIButton
btn1.setTitle("untitled", forState: UIControlState.Normal)
btn1.setTranslatesAutoresizingMaskIntoConstraints(false)
self.view.addSubview(btn1)
self.view.addConstraint(
NSLayoutConstraint(item: btn1,
attribute: NSLayoutAttribute.Top,
relatedBy: NSLayoutRelation.Equal,
toItem: self.view,
attribute: NSLayoutAttribute.Left,
multiplier: 1,
constant: 221))
self.view.addConstraint(
NSLayoutConstraint(item: btn1,
attribute: NSLayoutAttribute.Left,
relatedBy: NSLayoutRelation.LessThanOrEqual,
toItem: self.view,
attribute: NSLayoutAttribute.Left,
multiplier: 1,
constant: 20))
self.view.addConstraint(
NSLayoutConstraint(item: btn1,
attribute: NSLayoutAttribute.Left,
relatedBy: NSLayoutRelation.GreaterThanOrEqual,
toItem: self.view,
attribute: NSLayoutAttribute.Left,
multiplier: 1,
constant: 147))BOTH XOJO and XCODE set to 4S
XOJO renders the button wide (from 20 on left to almost 80% across device)
XCODE
a) renders just right of CENTER of the device
b) button is as wide as the text (ie. 2/3 or less the size of XOJO button)
b) issues a warning that it is going to break the <=20 constraint
Am I doing something incorrect in how I am comparing? or do in fact the two pieces of code render different results but define the same constraints? if So… what is Xojo silently ignoring and why?
I just want to get a good understanding on how it works and why… and hard to do when comparing two things that I THINK should give same results, don’t
[quote=159642:@Dave S]Sorry Norman… but I guess you are not understanding my question.
None of those videos show the “under the hood” implementation… they all show the “developer facing” interface.
they show WHAT it does, not HOW it does it[/quote]
You’re right
Short of reverse engineering Apples code there is no open source reference implementation that apple has made available
[quote=159778:@Dave S]Does XOJO and XCODE not follow the same set of rules to resolve Autolayout?
I would think these are identical???
[/quote]
If thats really what you have I’m not sure they are identical
Xojo top=parent.top+221
Swift top = left + 221
And they are nonsensical
Left can’t be <= parentleft + 20 AND >= parentleft + 147
at the same time
So I’m not sure which ones it will decide to throw out as unsatisfiable
So it will decide to not satisfy one or the other