In my storyboard I have a MapView that I would like to use the entire width of the screen. I created two constraints for the leading and the trailing space and they are set up as follows:
On the iPhone 4S - 6 the view works as expected, with the map using the entire screen width. But on the 6+ I can see that the map isn't using the entire width and has about 5px of padding on both sides, as seen here - it's hard to see with the background being white:
How can I make this mapview use the entire width of the screen for the 6+?
Edit the constraints so that they're not using the margins (do this in the size inspector for each constraint, from the item drop down) then set the constants to 0. It looks like the margins are bigger on the 6 plus, so using -16 to offset isn't giving you the right effect.
Only use constraints relative to the margin if you actually want a margin. I've no idea why this is now the default, it's stupid.
Related
I am trying to take an image from filling the right hand side of the screen when viewed in horizontal orientation, to the top quarter when viewed in portrait.
I've followed lots of guides and points on here, but they all related to older version of XCode that seemingly have things XCode 11 don't - such as selecting constant - or just don't work.
I am completely perplexed as to how this should work as when I add "Vary for traits" it applies the move to all devices. I am sure I must be over thinking this, it must be simpler no?
I am using XCode 11.4 with iOS 13.x> above support.
Start by adding a new view controller - use iPhone 8 layout in Portrait Orientation (wC hR):
Add a new UIImageView and position it at the top with about 1/4 the height (doesn't matter how close):
Add top / leading / trailing constraints:
Add a proportional height constraint, at 0.25:
Now change View as to Landscape Orientation (wC hC):
It will look like this (as expected):
Click Vary for Traits, and select Height because we changed from (wC hR) to (wC hC):
Look at the constraints in the Size Inspector, and select This Size Class:
Delete the Leading and Proportional Height constraints:
and add a Bottom constraint and a Proportional Width (0.5) constraint:
And click Done Varying. Now it looks like this:
Notice that we have 2 "grayed-out" (inactive) constraints... If you switch back to View as Portrait Orientation, those two constraint will become "active" and the two (wC hC) constraints will show as "inactive".
Because apps can run in partial screens (iPad multi-tasking), it's advised to no longer think in terms of Portrait and Landscape. Rather, think in terms of size classes / traits.
If your design warrants, you might also add (wR hR) trait variations.
Now, if you really want Portrait vs Landscape, you'll need to use some code. Define a set of constraints for Tall/Narrow layout, and another set of constraints for Wide/Short layout. Then implement viewWillTransition(to size: ... and activate / deactivate the appropriate constraints based on the "to size" width > height or height > width.
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
I'm trying to have auto layout for my ios application but for iphone 6s the border is too small I've tried using pin and alignment constraints but it doesnt look right. The iphone 6s plus looks fine though. The only problem I have is the iphone 6s. The third image is what I have right now which is the view has is horizontal and vertical in container.
It looks like you're using fixed dimensions for the cells and the inter-cell spacing. Using a UICollectionView is probably overkill for this example, because you'll always have 9 squares for Tic-Tac-Toe. If that's the case, then you can do the following, assuming that the squares are UIButtons and they're contained in a plain UIView:
Constrain one cell's height and width to be 1/3rd the view's height and width. You can do this in the storyboard by adding height and width constraints that are equal to the superview's, but with a multiplier of 0.33.
Constrain all other cells' heights and widths to be equal to cell #1's.
For the borders, use User Defined Runtime Attributes to add a border, like this:
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.
I have a viewController, which is configured for the iPhone5 screen size. In red rectangle is the view.
To make this view show properly in iPhone4 - I used auto layout. But when I specify constrains such as: leading edge, trailing edge, bottom space and top space (in top space I even made constraint's priority to LOW ) - the view still goes partially down the screen as if my constraints don't work.
BUT if instead of top space constraint I specify view's heigh and delete top space constraint - everything works perfectly.
Does anyone can explain it please? Thank you.
Thats because when you set up the top space constraint it will move the view by the constant you provided. iPhone 4 and iPhone 5 screen height is different but the constant remains the same so obviously it will behave differently. One way to troubleshoot your interfaces is to switching between iPhone4 and iPhone 5 on storyboard device on storyboard (first button from left to right on the bottom right corner of interface builder).
Auto-layout is all about experience in my opinion. I struggled alot with it until i learned. If you want your view to be attached to the bottom of the screen you should set the BOTTOM SPACE to 0 and specify the view's height like you did or adjust constraints for it's subviews so that the height is set dinamically according to the views inside.