I have a really stupid question...
I'm afraid I'm stuck at the basics, trying to fit a 2732 × 2048 (Read up that this is the resolution for the iPad pro, for which I'm building an app) image, but it doesn't scale no matter what I do. I want it to scale to fit the screen, rather than be beyond the borders of the screen.
I tried playing with the align constraints, but nothing changed no matter what I adjusted...
Thanks in advance!
Edit: Added an image and described my failure
drag a UIImageView to the controller in Storyboard.
scale it to match the size of view in controller, add some constraints by tap Editor in menu bar -> Resolve Auto Layout Issues -> Reset to Suggested Constraints.
Set image of UIImageView to you image, set view mode to Scale to Fit
I am not familiar with Auto Layout, this may not be the perfect way.
Related
Got a map which is composed of multiple parts:
Each part is an UIButton with an Image. I positioned everything to make up the map and it first looks all right. The problem I have is about resizing the View for different screens sizes. Tried with Autoresizing and Constraints but couldn't get it to look properly for minimizing and maximizing it. The parts should always sick together and up-/downscale according to the screen size. I'm testing the behaviour directly in the Interface Builder by resizing xib's dimensions.
What works is setting all arrows in autoresizingMask for each UIButton and maximizing the view. But minimizing it distorts the map.
Unfortunately it's the first time for me working with the Interface Builder in Xcode. Here you find the source files. Thanks!
Edit:
Setting only the arrows for width and height in the autoresizingMask makes it possible to downscale without distortion. Upscaling pulls the parts apart. How to support proper up-/downscaling simultaneously?
Edit1:
Replaced the every UIButton with UIImage which resize properly in the Interface Builder! See repo here. Unfortunately on simualtor devices the Autoresizing differs and the map-parts don't stick together anymore. Setting the size of UIView in Main.storyboard exactly to xib's size the Autoresizing works perfectly (tested on multiple devices). But later on in the "real" project I'm not in control over the parent's view dimensions.
Played a litte bit with this line of code and it seems to be responsible for "blocking" Autoresizing. How to avoid that? Thanks in advance. I think I’m maybe mixing up Autoresizing with AspectFit which seems to have no effect.
I guess it would be much easier if all the Bundesländer images had the same size. Put them all on top of each other in a common view. Give all the buttons zero padding to all side. Subclass UIButton to check if the the touch event is on a non transparent pixel. Search for "irregular button ios" to find out more about it.
I am able to achieve this using this images, which have all the same size, border added to demonstrate size
and this constraints
The most important constraint might be the Aspect Ratio Constraint on MapWrapper, the view that contains all the buttons.
Using Ole Begemann's OBShapedButton
Some notes:
Your image content is perfect for factorised graphics. Export them to pdf and add them as such as single scale to your assets
you should not include the states names' in the images, but use it as the buttons titles'. To position them correctly, use title insets.
example project: https://github.com/vikingosegundo/germanStateSelection
In my application i have a screen which contains close button on top and program information at bottom and both trailing,leading,bottom and top constraints related to safe area.
Button width and height is 1:1. Program info area height is 0.25 of view height. In run time adding avplayerviewcontroller view on screen whose height is 75% of self.view.It's working fine in all device except iPhone X. If i launch app in landscape then alignment is fine and if I change orientation I can see 44 pixels as x value. If I launch app in portrait first then portrait orientation values are correct if I change orientation to landscape then 44 pixels top(y) value is adding. I am not getting how to fix this issue. Please guide me.
[![enter image description here][1]][1]
I guess your problem is that you have defined constraints in percentages, which might be an issue. When you rotate the screen the mid section might be too small. Have you tried the rotated layout in interface builder to see what is happening? Defining layouts with constraints is relatively easy in interface builder and you can test the layouts as well.
If you programmatically set the constraints, it is hard to find out where it went wrong. If you have one ambiguous constraint, the whole screen can be weird.
If you need to make programmatically set constraints, you should make a test setup in interface builder and implement the good setting in the program code, when everything works as planned.
I have checked your storyboard and I think the issue might be that you have two safe area defined. One outside the containerview and one inside. What you put inside the container view, might be wrongly calculating the constraints inside.
Try to take out this checkbox and try it again.
Maybe striving for a "warning free" project is futile, but I am nervous enough about Adaptive Layout/ AutoLayout that I am compelled to try and squash these warnings.
I have a uiview that I want to be dynamically sized based on the portrait screen width. I have my app set in the Build Info for Universal, Portrait only (and upside down). I have constrained the uiview the following ways:
Aligned the view's Center to Superview's center X
Made the view's width proportional to the Superview's width
Gave the view an aspect ratio constraint of 1:1
Given the view a vertical constraint to the superview's top
For details please see the screenshot below.
So now I get the warnings about the view's "frame being different at run time", in particular the size and position at runtime versus what is in the canvas. Not sure why Xcode "cares" about the canvas where the class sizes are set to Any height and Any width. I thought the whole point of Adaptive layout is that sizes and positions are resolved at runtime based on the devices screen size and orientation.
If I breakdown and let Xcode "Update frames"... yes the warning goes away, but with the super large views it is virtually impossible to work graphically in the tiny canvas in a WYSIWIG fashion. Any solution here to getting rid of the warnings without creating oversized views that make working inside the canvas nearly impossible?
To get rid of the warning, and let the constraints place the views "correctly", just select the view that is giving the warning, press the little triangle thing in the bottom right corner of the storyboard:
And then select "Update frames" for "All Views in Container"
(I wish there was some way of doing this to a whole storyboard. At least I haven't found it)
Select a view and press
Option + Command + =
This will update the frame size. Repeat for all offending views. It doesn't take that long, especially if you find them by clicking on the error messages.
Thanks to this answer for the idea.
Notes
After updating to Xcode 8, and choosing some View as device, I was getting this error. The menu is different than in Xcode 7, so #Spoek's answer was no longer working. Also clicking Update or Reset was not working for me.
Update
Update Frames now has its own button. That's why I missed it before.
You can change simulated metrics size for example to 4-inch iPhone!
Or Freeform and then change the size to what suits you best.
I was getting this error on static tableview cells. I unchecked the Automatic option and the warnings went away
I created a UICollectionView in the storyboard editor and added it to my (custom) ViewController. Like every view controller in storyboard, it says the size is 600x600 and so the UICollectionView, which takes up the whole view, is also 600x600.
This is not correct though, as I am writing an iPhone app and so the real dimensions should be 320x568!
Because of this, when I add items to my collection, they are placed off the right side of the screen. For example, I first add a cell with an image in of size 160x213. It is left justified and it takes up exactly the left half of the screen. When I add the next image, there is a huge gap and it appears on the left side, partly cut off. The third image I would expect to appear below the first, but it doesn't appear at all. I believe it is off the right side of the screen. This implies that the size of the UICollectionView is 600x600 and not 320x568.
I should mention that I've tried everything I could think of to fix this. For example:
I tried adjusting the size of the collection view:
self.photoCollection.frame = CGRectMake(0, 0, 320, 568);
I tried unchecking "Use Size Classes" in the storyboard editor.
It seems to work if I uncheck "Use Auto Layout" but I would like to use auto layout. How do I get this work?
You can set the "Simulated Metrics" of the view in your storyboard like this below. Personally, I prefer using 3.5/4-inch to construct my layout, as with auto layout, i only need to add some constraints to elements and iOS will automatically support the 4.7 and 5 inch screen size.
I think you should google for some "Auto Layout" tutorials, and I don't think its too hard for you to pick up :D. For instance, if you want to set the collection view frame equal to your view frame. You can do it like this
Feel free to ask any follow up question if your have any, Cheers!
After adding my launch image using a xib (and I even tried the traditional launch image way as well) some of my view controllers have a strange right margin now. For example before I might have had a label whose width was the entire screen, and used auto layouts such that it was leading/trailing to the content margins, and now despite that after adding a launch image there is a margin (it's not on every screen, but definitely some). On one of my screens where this is most prevalent i'm using autolayout but overriding with constraints that I add programmatically. Not sure if that's related.
Has anyone experienced anything like this or does anyone know if adding launch screens affect the story board / view controllers in any way?
Thanks!
On the launch screen select your image view, then select the pin at the bottom right of xcode (3rd option). Make sure all constraints are set to 0, while making sure the red I is selected for each one when they are set and uncheck constraint to margins. Finally click add constraints :)
Hope this helps you!
Rachel