I am working on an App and I want the UI to look the same in every device screen. I have an iPhone 6 device and use iPhone 5 in the simulator; when I run the App, it looks Ok in my iPhone 6, but it looks like the following in the iPhone 5 simulator...
I added some constraints but I have been having trouble with these buttons and the labels. How can I fix this? I thank you in advance for your answers.
UPDATE
I erased all constraints and started over, now the final screen looks like the following...
Looks better now, the only thing I could not fix was the position of the two buttons (Agregar and Salir) because they are located in the centre and now they moved a bit to the right.
Here are my constraints
Constraint in Xcode UI is respectively, so you need to set all of the constraint for each element, not only for those button. Every single element is constraint to each other, so make sure that each element has already set its constraint to another element.
It looks like you only have constraints on those two items, try adding a constraint between the labels and the bottom buttons, so that there is always a space between those buttons.
Related
I need to move items like labels and buttons to another position, I move them manually in the UI, but when I run the app, the moves are not done. Should I deactivate something? Or how could I do that?
I leave an image like the one I have in the storyboard, but in the app they relocate to the dotted lines.
I move them manually in the UI
Yup, that's the problem! Don't do that.
As the orange lines are telling you, you've already got autolayout constraints on those views. And that is what matters! The orange means that where you see the views (after moving them manually) makes no difference; where you've moved them to is not where they will be. They will be where the dotted lines are, as you rightly say — because that's where the constraints will put them.
The way to change the size and position of views that have constraints is to change the constraints. Select the constraint you want to change and change it (in the Size inspector). Keep doing that until you're satisfied.
(Alternatively, you can ask Xcode to change the constraints after you've moved a view manually, but I find that unreliable; it can have effects you aren't expecting.)
I edited my view with auto layout. I clicked add missing constraints. I'm working 4 inch screen on mainstoryboard. Everything looks good for 4 inch, but not the other iphone screens. I tried some ways like someone did, but I didn't fix it.
Snapshot :
This screen from iPhone 6s. Something going wrong for picker view, google ad and the others.What shoul I do? By the way sorry for black lines.
My view and UIs are here. How should I do the constraints for each every one of them? I'm really new for iphone layout. If you explain step by step basically, I really appreciate for that.
Sorry but clicking add missing constraints it's never the ideal solution, you really should understand how and which constraints you really need for your layout.
If you have clicked add missing constraints now you probably have a lot of constraints, you need to check for example your picker view which constraints it has and fix one of them or more.
So IMHO now you have two ways: post here, updating your post, the full list constraints you have for one object at least and we can try to help you, of course, I'm the first; the second solution it's clear all constraints and add one by one, understanding each rules: it could be boring at first but it will be really helpful believe me.
I would begin adding your layout constraints from the top of your view controller. You can add the constraints manually by right click dragging from the target object to another object. Most of the time, it is necessary to add at least two constraints to a view, one constraint that modifies the x coordinate of the object and another constraint that modifies the y coordinate of the object.
I would recommend using the leading/trailing space constraints and the top/bottom space constraints for all of your objects that you want to be hugging the view controller. After you make these constraints between the controller and the objects, add constraints between two objects. If all of the lines are blue or orange, you probably have sufficient and satisfactory constraints.
I have looked at many tutorials and just can't seem to get Buttons to resize and layout properly using Xcode 6 auto layout.
The tutorials that make the most sense just use Views as examples.
Trying to build a Universal soundboard app with buttons arranged in the attached picture.
I also tried putting all the buttons in one View container but still no luck.
What am i missing?
Thanks so much
Select the button you want the constraint on, and command click it's parent view.
Next, select add new constraint (at the bottom of xcode), click "Equal Widths", then click add constraint.
Select the object.
Double-click on the constraint rectangle (not obvious! "Edit" takes you somewhere else)
Then at the right hand side of xcode the attribute inspector should
come up:
At the multiplier property you can make a ratio or a decimal of the percentage value you want. If you want the button to be one fourth of it's parent view, then set the multiplier to 1:4.
This might not be the most ideal answer, but it's the best I can offer. Hope this helps!! Good luck!
You can check out this
How to create equal spacing between multiple label in ios xcode 6.3 using AutoLayout Constraints
You can also check out Evenly Spacing Views in Auto Layout
If you still have problem then comment me I will try to fix your issue
Good morning,
I am new to Xcode and am learning to create iOS applications.
When I open a single view application and click on main.storyboard, my size is w Any h Any. When I decide to add a label and run the iOS simulator (iPhone 6 or iPhone 5S), the label appears somewhere else.
This is really frustrating and I have tried many approaches such as disabling use size classes, changing the storyboard size by clicking the w Any h Any button, and even messing with the constraints as mentioned here: Xcode 6 Storyboard the wrong size?
I am really trying to continue with this but I have seem to hit a wall for a couple of hours now, if someone could shed some light to why I am messing this up, that would be amazing.
EDIT: How can I get it to be a "normal" sized iPhone, such as the iPhone 5s?
You can click on the w Any h Any to change it to a normal iphone size by mousing over the squares and reading which devices they encompass.
You are going to have to use constraints though in order to make anything go where you want it to, I really didn't want to learn them but I couldn't do without them now: they are very useful.
EDIT
Constraints are simple in concept but can be tricky in certain situations:
For any view to have valid constraints that work correctly, it needs to know what the size of the view is and its position in it's "parent container" which is just whatever view or viewController it is inside of.
The little |-O-| shaped button and its neighboring buttons next to "w Any h Any" give you options for positioning and sizing the view. So if you click on a view and then click on that square button in the middle, check the width, height boxes and click the left and top lines in that top positioning thing with sizes in it like so:
Then click on add 4 constraints. You will notice blue lines appear around your view saying that it can properly put it where it needs to go when running the app. If there is any orange or red that means there are conflicting constraints on the view.
Sometimes that can mean you put to many constraints (more than you need) and you just need to delete them in size inspector tab. But more often than not, if that doesn't fix it, I've noticed that I usually have a neighboring view that isn't properly "constrained" and is actually the cause for the other views problems.
How can I get it to be a "normal" sized iPhone, such as the iPhone 5s
You don't. The view controller's main view will be resized correctly when the app runs (on a device or in the simulator), as appropriate for the device type and other aspects of its surroundings.
Your job is to use auto layout so that no matter how the view is resized, its subviews (labels and buttons and so forth) will look good. That is what auto layout is for - it's to help you compensate for the fact that you have no idea what the real size of this view will be at runtime.
I am hoping someone can help me out with this one. I have an app that I am trying to update to get rid of the letterbox look when running on iPhone 5. I have added a Default-568h#2x.png to the project and the application seems to scale correctly. The splash screen on either device looks correct, however I have a toolbar on my "Home" screen that I can't seem to get in the right place. If I get it right for 5, I can't see it on 4s, and if I get it right for 4s, it is very low on 5.
Am I missing something? Do I need to manually move the toolbar that is at the top? And will I need to move all the controls around on all of the screens in the app?
Any advice is appreciated!
Thanks
Here are some tips on using Interface Builder to handle resizing.
Take advantage of the Simulated Metrics in Interface Builder, as shown here:
To do so, select your top-level View, and open the Attribute Inspector. Then, you can select different sizes and orientations to see how your view responds.
Select the Autosizing options as shown here:
In your case, you want a fixed margin above, but a flexible margin below. Note that this is the opposite of the default for a toolbar because the iOS convention is for toolbars to be at the bottom of the view.
Realize that resizing due to rotation and different screen sizes can often be handled the same way. (Thus, if you handle portrait and landscape orientations using Autosizing, iPhone5 layout usually takes care of itself.)