I haven’t been able to pinpoint the cause of an issue i’m having , regarding our company project.
I have notice that in all the auto layout views in the project , the views that appear to be attached to a specific side in interface builder,
are presented on the opposite side after the build.
I.e when i am adding a view to a storyboard view controller, than creating an horizontal space constraint to it’s superview leading margin (left side) it appears ok on interface builder and the preview, but after the build, it appears to be inverted on simulator/device , the view has the same horizontal space but to the opposite side ( right side on this example).
The same issue happens to all the views that are already were on the app (the views that supposed to be on the right side appear to be on the left side and vice versa )
I spend hours to figure out what cause this invert with out any success (the issue happens only in our project), i even tried to change the project definitions according to a new one.
I’ll appreciate if you will be able to help me on this matter.
I'am adding the screenshot of the view in interface builder, the preview and the simulator
There are two kinds of horizontal constraint — universal and language-bound.
The universal constraints are called Left and Right. The meanings of these constraints never change.
The language-bound constraints are called Leading and Trailing. Their meaning depends on the language environment in which the app is running. If the language is like English, Leading is left and Trailing is right; but if the language is like Arabic or Hebrew, which are written from right to left, Leading is right and Trailing is left. This allows labels to be constructed that work correctly regardless of writing direction.
This distinction is drawn in Interface Builder with the "Respect language direction" menu item; to get the universal Left-Right constraints, uncheck it:
So, you may be using Leading and Trailing correctly and appropriately for some views, but it sounds from your complaint as if you have accidentally used Leading and Trailing for some views where you meant to use Left and Right.
It happened when you have Right-to-left system language, for example hebrew or arabic. It's default Apple feature.
If you change system language to English everything should be ok.
Related
I will mention right away that I'm not iOS developer and this is first time I'm messing with it because I was asked to update web application inside iOS WKWebView wrapper.
I managed to load the web app inside iOS app but on iPhone X there is always white space on top and bottom. I just learned about constraints and I heard that this is default safe area behaviour. I'm trying to expand my WKWebView past safe area to go all the way to the top notch and bottom home button so that there are no white spaces. Inside Xcode all constraints for safe area object is set equal to superview, following web view container object set equal to superview. But I still have white spaces on top and bottom.
There is also top "View" object which I think is elsewhere known as superview, which when I click on I see the constraints for it set equal to safe area and I can only keep it set to safe area or web view container which itself is set to superview. I find this very confusing. What am I doing wrong here?
I would appreciate help regarding storyboard and not code related as I don't speak Swift.
EDIT: Snapshots of constraints
Web View Container Object: https://imgur.com/GcRFeL0
If you use storyboard, you can do like this:
select this constraint and at the right panel, you should change the Second item form Safe Area to SuperView like below:
modify the Constant value from 44 to 0, like below:
the same operation to other constraints.
I started iOS development a week ago and I'm currently learning AutoLayout. and sadly I can't wrap my head around the Leading & Trailing constraints and when to use them, I don't even understand them at all. I have done some research and I'm just actually more confused now. Can someone give some examples?
This definition is form the Apple website:
The values increase as you move towards the trailing edge. For a
left-to-right layout directions, the values increase as you move to
the right. For a right-to-left layout direction, the values increase
as you move left.
https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html
Thanks
TL;DR
They couldn't just name it left and right because it had to make sense in both layout orientations: left-to-right and right-to-left. Hence Trailing and Leading.
Longer Answer
I think the question you're asking yourself is why the heck Apple is not just naming it left and right. What's with the trailing and leading.
The reason behind this is that there might be 2 different layouts. Starting with iOS 9, the UI layout for left-to-right languages (like English) is.. well left-to-right. But in case of Arabic for example, it's right-to-left.
However Autolayout is smart enough that you don't need to setup your layout twice for these 2 types of layouts. You just set it up once and the system auto-inverts it in case your app supports right-to-left languages.
For this answer, ignore languages like Arabic and Hebrew that flow right to left. I'm going to answer for the majority of languages that flow left to right.
For those languages, the "leading" constraint determines the space on the left of an object, and the "trailing" constraint determines the space on the right side. (A good mnemonic for this is that left and leading both start with "L".)
For languages that flow the opposite way, the sides are switched, but the "leading" still pins an object to the leading edge (The side where you start reading.)
Leading means the starting point of the view and trailing means the ending point of the view.
For example, if a view has a frame (x: 0, y: 0, width: 100, height: 100) its leading will me 0 and trailing will be 100.
So if you move right from the leading the distance between the leading and the point moved will increase and similarly this happens in case of trailing.
This was covered (briefly) in one of the WWDC 2015 videos on the Mysteries of Autolayout (I think it was part 1 but both are worth watching).
Left and Right constraints are absolute, they will always refer to the left/right of the screen or the control. Leading and trailing constraints are affected by the device locale; In locales where the reading direction is left to right (English, French, Spanish and so on) leading & left (and trailing & right) can be used interchangeably. In locales where the reading direction is right to left (e.g Hebrew) then 'leading' will be the right side and 'trailing' will be the left side.
The advice in the video was you should almost always use leading/trailing rather than left/right unless you have a specific requirement for absolute left/right.
Consider the typical 'form' of a label and a text field. If you use leading/trailing constraints then you will get the label on the left and text field on the right for an English locale and label on the right, text field on the left for a Hebrew locale.
If you made a children's app where you were teaching left from right and you always wanted the 'left' button on the left of the screen then left/right constraints would be appropriate.
Check the original answer here: Difference between leftAnchor and leadingAnchor?
I have an iOS Application that supports different languages, which uses LTR Storyboard and RTL Storyboard, and reads from Plists. When I run the app on my Device with English iOS Version, everything looks perfect when switching between the languages. But when I change the iPhone OS Language to RTL languages. The UI is messed up.
This happens especially when I enable Localizations to change the app name on home screen.
Any idea why does that happen?
The whole menu is messed up for example, it's to the left side while it should be to the right side, and the menu items icons must be to the left and the labels to the right.
RTL Language on LTR iOS Language Device i.e English
RTL Language on RTL iOS Language Device
This is because you are use leading and trailing constraint.
In a LTR environment leading means left while in an RTL environment, leading means right.
This is Apple way of helpings us to deal with RTL/LTR easily :[ in your case, not so much...
To disable this behaviour, change the semantic attribute of your views.
Semantic Content
If you lay out your views using leading and trailing constraints, the
views automatically flip positions when switching between
left-to-right languages (like English) and right-to-left languages
(like Arabic). However, some interface elements should not change
their position based on the reading direction. For example, buttons
that are based on physical directions (up, down, left, and right)
should always stay in the same relative orientation.
The view’s semanticContentAttribute property determines whether the
view’s content should flip when switching between left-to-right and
right-to-left languages.
In interface builder, set the Semantic option in the Attribute
inspector. If the value is Unspecified, the view’s content flips with
the reading direction. If it is set to Spatial, Playback, or Force
Left-to-Right, the content is always laid out with the leading edges
to the left and trailing edges to the right. Force Right-to-Left
always lays out the content with the leading edges to the right and
the trailing edges to the left.
Assuming that you are already using Auto Layout,
Make sure you have done the following
Remove fixed width constraints. Allow views that display localized text to resize. If you use fixed width constraints, localized text may appear cropped in some languages.
Use intrinsic content sizes. The default behavior for text fields and labels is to resize automatically. If a view is not adjusting to the size of localized text, select the view and choose Editor > Size To Fit Content.
Use leading and trailing attributes. When adding constraints, use the attributes leading and trailing for horizontal constraints. For left-to-right languages, such as English, the attributes leading and trailing are equivalent to left and right. For right-to-left language, such as Hebrew or Arabic, leading and trailing are equivalent to right and left. The leading and trailing attributes are the default values for horizontal constraints.
Pin views to adjacent views. Pinning causes a domino effect. When one view resizes to fit localized text, other views do the same. Otherwise, views may overlap in some languages.
Constantly test your layout changes. Test your app using different language settings, as described in Testing Your Internationalized App.
Don’t set the minimum size or maximum size of a window. Let the window and its content view adjust to the size of the containing views, which may change when the language changes.
See more
Probably a matters of constraints. In the storyboard, you can use the preview editor to get a .. well.. preview, of your UI in diffrent device size in different language.
I use Auto Layout programmatically a lot but there are still two things that I do not understand.
What is the difference between leading and left attribute/anchor and between trailing and right attribute/anchor?
To me there seem to be the same but according to the docs:
However, Auto Layout does not allow constraints that mix leading and trailing attributes with left or right attributes. As a result, this constraint crashes at runtime.
The order of the the items inside the NSLayoutConstraint does not matter for the Auto Layout system at all, am I right? (At least for .Equal relation.)
Do not get confused about the attributes for each individual item, I'm aware of that.
Left and right are always left and right.
Leading and trailing are not. From Working with Constraints in Interface Builder:
If you lay out your views using leading and trailing constraints, the views automatically flip positions when switching between left-to-right languages (like English) and right-to-left languages (like Arabic). However, some interface elements should not change their position based on the reading direction. For example, buttons that are based on physical directions (up, down, left, and right) should always stay in the same relative orientation.
The order of items for an equal relation is irrelevant.
The difference between leading and left is important when taking into account RTL languages, such as Hebrew. In that case, the UI is inverted to complement text direction, and so are the UI elements with constraints. In this case, leading means the side where text starts. left is always left, for text direction agnostic UIs, such as media playback controls.
The order constraints are placed in does not matter. If there are conflicting constraints, the behavior is undefined.
I'm new to iOS development and I'm working through my first tutorial. One thing the tutorial kind of skipped over is positioning. I have a list where each cell has an image with some text next to it. At least in Interface Builder that's how it appears. When I actually run the app the image appears on top of the text (i.e. both have the same exact positioning from the left-hand side of the screen).
Interface Builder:
Running App:
I essentially want what, in CSS lingo, would be "float: left", or even just relative positioning with x/y coordinates for each element (i.e. if it would look the same/similar when running the app as it appears in the storyboard), that would be great.
In playing with all of various View attributes, I'm not finding anything that will position the views… I can find attributes that will position them in Interface Builder, but none of those settings seem to carry over to the app when it is running, and the image/text always appear on top of each other.
I apologize for the newbie question… it's probably something simple/obvious that has somehow slipped by me.
If you are using Xcode5 to do the test, the app will use AutoLayout feature by default. And the constraint you made for this layout seems to be wrong.If you want to position the views to the right place with AutoLayout ,you need to read some material from apple official website.If you do not have too much time to learn,you can try to edit xib without AutoLayout. You can disable AutoLayout in "file inspector" of interface builder.
If you are new to iOS development (as I am), you should familiarize yourself with AutoLayout, as suggested in Eric's answer.
If you're looking for a quick fix to the question as asked, all of the following options worked for me:
Select the label, then select the Horizontal Space Constraint and delete it.
Select the label and hit cmd-plus (i.e. cmd+shift+equals). This will delete all of the positioning constraints at once.
Turn off AutoLayout.
There are other ways to fix the problem I was having, but generally the issue was incorrect AutoLayout constraints.
If you feel comfortable in the code, I suggest manually setting the frame to a CGRect that you define with CGRectMake(origin.x, origin.y, width, height). You can also do this with the autolayout settings but I find that programmatically positioning elements gives me much more flexibility, and, as a programmer, it's much easier than trying to figure out the options in interface builder.
The iOS coordinate system is top-down, meaning that y=0 is the top of the screen and y=568 is the bottom of the screen (on iPhone 5). X is 0 on the left side of the screen.
Coordinate systems are relative to the view that they are in. In your case, your elements are in a UITableCell, which is given its own coordinate system by the rendering engine. So if you want your image to be 10px from the top and 10px from the left of the cell's edge (a la padding:10px in css), you would set its frame like so:
image.frame = CGRectMake(10, 10, 50, 50)
...assuming the image is 50x50.