Using Xcode 7.3, I have a stop button (just a 100x100 pixel image, no text) that in my Any,Any size class I have added a center horizontally constraint and then a trailing constraint. This keeps it centered and just a bit off the bottom edge of the screen - which works for most cases.
However for a 4-inch iPhone in landscape, my other elements constrain things and I want to put the button vertically centered and somewhat off the right hand side of the screen.
When I go to the Compact Width, Compact Height class view, add Center Vertically in Container and then choose Update Frames to see the result, IB changes the height of my button from 50 to 300. Why does it do this? I want to keep the image dimensions the same.
Related
In my project I would like to essentially 'Pin' a button to a certain position on an image. The imageView scales to the screen size from the centre and maintains its aspect ratio.
I am trying to make it so that each button remains over the chakras "coloured icons in centre of body". I need them to maintain a scale that is the size of the chakras and maintain their position over the chakras regardless of screen size.
Wanted Result
Current Result
Scaling Settings
Aspect Settings
Here's an example - you will want to play with the exact positioning, but this should show you the method. You can do everything using auto layout in Xcode.
I took one of your images, and edited it to remove the buttons, and used it as the image in a UIImageView filling the screen of a UIViewController
Then I created 7 small buttons, and added constraints to them width & height = 20, and Align Centre Y to Image View
The tricky part is to add a constraint to align the centre of each button to a fixed percentage of the UIImageView centre - and that will be trial and error until it looks right.
Here's how to set the constraint
here's the app running on the iPhone 12 simulator
and here it is on an iPad (12.9 inch)
and here in landscape
You can take parent containerView for each imageView and Button.
Please see the picture to this link for better understand.
https://ibb.co/dsTjxbw
I have buttons on my screen I have attached constraints but on different sizes of screen I don't see my buttons right as I want to. There are the same size on different screens and I can't see all buttons on small screens
Here is a good version of it on iphone 8 plus in xcode
and then I change view to iphone se or any another iphone and I get these troubles:
What do I need to do to have the same screens?
Make the buttons have a width that is in proportion to the view
width.
Then add a 1:1 aspect ratio constant so that the buttons remain
square.
Then position the buttons in relation to the screen dimensions (not
absolutely).
This should get the job done for you.
Setting proportional width
Suppose the main view's dimension is 375 x 667 in interface builder. Suppose you place a 90 x 90 button on it. To make it always have a width in proportion to the main view's width,
Add an equal widths constraint to the superview for the button.
Edit the constraint's multiplier: Change it from 1 to (90/375)
Doing the above makes sure that for different screen widths, the button's width will also change in proportion.
Here are screen shots from iPhone XR and iPhone 5s, that I took from a sample I just did to try this out. As you can see, the buttons stay within the screen and maintain their shape. Hope this helps.
You don't seem to have defined the constraints of the button to superview. eg: left edge, top edge...
*edit: post complaint below #raisedeybrow
You will need to define (add constraints) how far from the edge (left and top, right and bottom) you want your button/s to be. Then apply content hugging and compression priorities on buttons for all of them to scale as you'd like. Some will need to be bigger, some you don't want to allow to shrink etc. Lots to set if you'd want it to look fluid
So I have an app I'm working on, but I hit a major problem. In this app we have several images. I'm learning AutoLayout, and I can make stuff appear the same on all device screens, except for the fact that the images (and for that matter, everything) remain the same size. I want them to get bigger and smaller according to screen size. I've tried everything I know. Help!
Here you can use propotional width and height to the superView. At first Ctrl drag from your imageView to superView and set Equal Height and Equal Width. And now set the Propotional height and width to the superView from the constraint list. Here you can set your height and width with Propotional to superView with Multiplier option. And finally set your x and y position of your image Final Image. Here I have used horizontaly and verticaly centered.
Using the image here as an example:
First, place your imageview where you would like it, in terms of how far it should be from borders of the view or other objects.
Then, click on the small tie-fighter like icon in the bottom to bring up the add new constraints window.
From there, click on the four links show in red inside the red box. These tell XCode that it should be "80 units from the left most object, 80 units from the right most, etc".
Now, when you change to different devices, it will always adhere to those standards.
However, depending upon the size you selected, it may not work under certain conditions such as being rotated to landscape, or in a split view on an iPad. This is where you get into the other size classes, which you access by clicking the text at the bottom of XCode that says "w Any h Any".
One item of note, do not select the image size in width or height in the constraints window seen below. Doing so will constrain the image size, invalidating the margins put in place.
I am attempting to create a keypad for an app that I'm playing with. The keypad will be a standard four rows with the numbers 0 - 1, a decimal, and +/-. Nothing special. I am attempting to get it to only take up 1/2 of vertical screen space. Using constraints, I pinned the bottom left button to the left and bottom of the screen, and the bottom right button to the bottom and right of the screen. I set the width and height of the left button, and then used Aspect Ratio on that button. On the remaining bottom buttons, I control-drag left to the one next to it, and select Horizontal Spacing, Center Y, Equal Width, and Equal Height I then control drag from each of the buttons above, to the button below, and select Vertical Spacing, Center X, Equal Width, and Equal Height from the list of constraints. My thinking was that the bottom left button would adjust based on the device selected, and then all of the other buttons would adjust based on this button.
Apparently, I was wrong. The buttons are nicely set up in that they remain above and next to one another, without any spaces, but they are not taking up exactly one half of the screen. Depending on the device selected, there is proportionatally more or less space above them. Apparently, I am either missing something, or I am totally approaching this the wrong way.
Any advice on how to accomplish this task would be appreciated. I'm still learning about how constraints play with one another, but I thought that my idea was sound. Make one button adjust itself to the correct size (Aspect Ratio on the bottom left button), and then force all of the other buttons to maintain the same width, height, and distance.
The bottom left button is not going to adjust its size, because you gave it a fixed width and height. The buttons should not have any explicit widths or heights set on them. They should all be set to the same size, and as long as you have constraints going from the left edge to the right, that should set theirs widths. Their heights will also be set by virtue of the aspect ratio constraints.
This will cause the buttons to just their size based on the screen size, but it doesn't make them be half the height of the screen (that could only work for one screen size with a particular aspect ratio). To make the buttons take up half the vertical height of the screen, you would probably want to enclose them in a view that was that height. However, then you'll have a conflict between the aspect ratio of the buttons, and the aspect ratio of the screen. You either need to give up on the aspect ratio, or, not pin the right side of the buttons to the right side of the screen, and use an aspect ratio that will make the buttons all fit on the screen.
I have this viewController that shows a navigationBar at the top (white box on top) and a toolbar at the bottom (orange box in picture).
Because the navigationBar is something iOS is adding to the viewController, when the viewController is visible, self.view's high will be reported as the screen size minus 44 points.
I have added an imageView to the view and I want it centralized between the navigationBar and the toolbar, like seen in the following picture.
What I did was to add a constraint to centralize vertically the imageView. As you see in the picture Xcode shows that the imageView is perfectly vertically centered as I want but this is not what happens when the app runs (thanks Apple).
In practice this is what happens: suppose I am running it on iPhone 5. iPhone's 5 screen high is 568 points. Because there is a navigation bar, the hight of self.view will be 524 pt (568 - 44). The constraint stupidly will disregard the top 44 pixels where the navigation bar is and centralize the imageView on the are between the bottom of the navigationBar and the top of the toolbar. The result is that the imageView will be closer to the bottom.
This imageView is carefully chosen to fill completely the space between the toolbar and the navigationBar when the app is running on iPhone 4. Also this imageView has to respect an aspect ratio constraint. Exactly like this:
Instead of centralizing the imageView using a vertically centered constraint I tried to add a top constraint to the superview and a bottom constraint to the toolbar. That works fine in all iPhones, except on the iPhone 4, where these two constraints force the imageView into another aspect ratio, like this:
So, what kind of constraint I have to apply to the imageView to make it center on the space between the navigationBar and the toolbar without losing the aspect ratio?
If you want the view to be centered between the navigation bar and the tool bar, then deselect both "Under Top Bars" and "Under Bottom Bars" for your controller. Add a centerY constraint to your image view, give it 0 length spacing constraints to the 2 sides, and finally, the aspect ratio constraint. I tested this, and it worked at all sizes, with a 1:1 aspect ratio. If you want a taller aspect ratio (your image looks like ~1:1.2 w:h) then you need to do some additional work to make it turn out right for the 3.5" screen because there's not enough height to get that ratio with the image view being full width (assuming that you also have the status bar showing -- if not, then these constraints should work for the 3.5" screen). I can edit my answer to include how to do that, if you say what aspect ratio you want, and if you want some minimum spacing between the two bars, or whether you want the image view to be as wide as possible while still maintaining its aspect ratio (which would mean there would be no space to the two bars).