I have a problem which drives me crazy. I want to be able to zoom into a picture and scroll around. So I put a ScrollViewController onto my ViewController. And onto my ScrollViewController an ImageViewController. When I am setting the constraints I am always getting the note, that the Image will be different at run time. You can see where the yellow dotted lines show where the Image is going to be. I cant get the right constraints to get rid of this error so that my picture isnt cut in half. So when I am running the app in the simulator the Picture is always shifted downwards. The weird thing is when I am not using an Navigation Controller I dont have any errors. I dont know whether this is a bug or if I have a mistake in my constraints which I dont see. Is somebody here to help me ? To see the picture Click on "Screenshot xCode"
Thanks
Update: I uploaded a picture how it the view looks on the Scrollview and a picture when the Imageview is being added and it runs in the simulator.
i needed to delete the firs picture due to my reputation. But in the "screenshot2 xcode" shows the same problem
screenshot 2 xcode
screenshot 3 simulator
You need to add a view as a content view inside scrollview. You need to add following constraint to your contentview
- leading
- trailing
- top
- bottom
- width (equal to scorllview)
- height(equal to scorllview)
Its so confusing to add width and height constraint even if you add leading,trailing, top and bottom. But this width and height is actually for scrollview content width and content height.
Than add a imageview to contentview. give constraint as follow
- leading
- trailing
- top
- bottom
Hope this fix your problem.
Constraints must be as follow:
Per scroll view:
Align center x: Superview
Align center y: superview
Equal width: superview
Equal height: superview
Per image View:
Align center x: superview
Trailing space: superview
Leading space: superview
Bottom space: superview
Top space: superview
Height equal: make this the view height
Start all sizing from the top left corner in interface builder
Related
I don't want to do this programatically. Please show me the storyboard way to achieve this.
I want orang view to of half size of the space between nav-bar & tabbar. Refere dashed rect, I want half of that rect.
There are a couple of ways to approach this that I can think of.
Use a container view
The first is to add a UIView to the superView to act as a container. You can "pin" this container view to the bottom of the navigation bar and the top of the tab bar.
Now add your orange view to this container. With constraints pinning it to the top, left and right. You can then give it equal height with the container and a 0.5 multiplier and it will have half the height between the nav bar and tab bar.
Use a "spacer" view
The other method is to use a spacer view. Add your orange view and then add another view beneath it. Pin them to the nav bar and tab bar respectively and give them a vertical spacing of 0 between them.
Now give them equal heights.
This will make them both take up half the space between the nav bar and the tab bar.
Now make the "spacer view" hidden. It will hide but the constraints will still work.
Both of these will work for any device size and any orientation. Also, for edge cases like if satnav guidance or an incoming call changes the height of the nav bar etc...
As #Fogmeister mentioned You can use spacer view
Pin both of them and make their heights Equal Height.
And set blue view Hidden.
Very easy, add the following constraints.
Left and right constraints pinning the view to the superview.
Top constraint pinning view to superview with a constant of 64 to offset the nav bar.
Equal heights constraint with the superview. Change the multiplier of this constraint to 0.5 and the constant to -54 (half of the 64pt nav bar + status bar and half of the 44pt tab bar) and update frames.
Job done. :)
Here is my problem.
I have a square image which does not fit on an iPad or iPhone app, as the screens are not square, so i decided to add a UIImageView which:
When the Phone is on Portrait position i add a constraint to the top (-20) and bottom (0) to fill the whole screen aligning X in the center and keeping the aspect ratio to keep the image square even if the screen is bigger or smaller, this means that in both sides i will "loose" part of my image, but that is fine.
When I rotate my phone to landscape position, the screen is widder,so i see a square image in the middle of the screen but a white rectangle in both sides.
I think the sollution to this is when it is on landscape position i need to remove the top and bottom constraints and add one to lead (-20) and one to trail (-20), center the image on Y axis and keep the 1:1 ratio...
But my question is: how to add a constraint to valid for one orientarion and change it to the other?
What is the best approach?
thanks
FP
You don't need to do it programmatically. I recommend you make the view fill the superview -- have one constraint each to top, bottom, left, and right. Then for the UIImageView attributes inspector in Interface Builder, set "View Mode" to Aspect Fill.
I think you have it the wrong way around.
While on portrait you should set trail and lead constraints as your height is bigger than the width, so if you set (0) for trail and lead and 1:1 ratio you are safe that it will fit beautifully. Also center it vertically in container.
On landscape, as the width is bigger than the height, you should set top and bottom (0) and ratio 1:1 and center it horizontally in container.
I know this question has been answered before, many times, but my use case seems to be just different enough from all of them that I can't quite figure it out.
My Problem
I have a scroll view that is not the same size as its superview. The scroll view has 1 subview that is the same size as it, but it needs to be able to be pinch-zoomed.
Attempted Tutorials:
(1) - Apple's Technical Note - This is done only with code and the examples show only full screen scroll views.
(2) - Natasha The Robot's Article - This was a really well written article but I could not get it to work for me. I think it's due to the fact that her scroll view is full screen.
(3) - Happy Coding Blog Article - Another full screen scroll view
... and lots other tutorials that were very similar to these
My requirements
My scroll view needs to be full width
My scroll view needs to be 40pt from the top and have a 1:1 aspect ratio
My scroll view needs to have one subview that is the exact same size of it but can be pinch-zoomed (aka content size = scroll view size)
I don't think that the size of the scroll view should impact anything, but it appears to.
What I have tried
As all the tutorials above recommended, I have only a single subview of the scroll view and have aptly named it "Content View".
View Controller
|-View
|-ScrollView
|-ContentView
|-ZoomableView
Here is a picture of my constraints:
As you can see, I have an equal width set up from the "Grid" (Zoomable view) to the view controller's view. I've also tried adding an equal width of the content view and the VC's view.
My question
I know I can get this to work with an explicit width and height, but I know I should be able to get it by setting the width equal to the view's width and height equal to the view's width as well (AKA 1:1 aspect ratio). How can I achieve this?
I think I ran into the same problem in the past. What I end up doing was adding a "container" view and use it to set up my width and height equality constraints instead of the view controller's view.
This setup will produce what you want I think: a scrollview with 1 subview that can be pinch-zoomed in the view controller's view (grey in the screenshot) but with a top margin of 40pt.
Without using code, I'm basically trying to achieve the "Desired outcome" in this picture:
I want the constraint on the "Hello!" label to shrink its length when the screen height is shorter.
As you can see in "Actual result", the Button in the bottom is off the screen. I want the image view to have fixed width and height.
I know I can create IBOutlets for constraints and doing it by code like this kind of posts suggest (autolayout - make height of view relative to half superview height), but I'm trying to avoid using code as much as possible.
Side question: If there's no way to do this in IB, what are the best ways to do this in code?
Thanks for the help!
Yes. The easiest way to have this kind of "split height" constraint is to put a "header" view between your image view and the top of the screen, and embed your "Hello" label inside this new header view. Then add a constraint to keep the "Hello" label vertically centered inside the header view.
To keep the header view the right size, add constraints to keep the top of the header view pinned to the top of the screen, and the bottom of the header view to the top of the image view.
Then you'll just add constraints to keep the button and image view pinned to the bottom of the screen. (Or, see comment from Sulthan, below.)
In Xcode 5.1 (in beta), there is UI to make more general constraints, including the ones you want, but you have to do it like this or in code in earlier versions.
it's the first time I'm seriously using autolayout so I'm sure I'm missing something obvious.
I have a very simple view embedded in a UINavigationController. There are three subviews: a UIWebView, a UIToolbar (which in turn contains three UIBarButtons) and a UIActivityIndicatorView. It's just a basic browser view, basically.
I managed to have everything appear as it should even on rotation, except for the toolbar: if the view is first loaded in vertical orientation, going landscape will not resize the toolbar from 44 to 32 points. Originally, before I wiped everything out, it did resize the toolbar BUT the built-in UIBarButtonItems appeared lower and cut off, as if the toolbar was still 44 points tall but pushed 16 points out of the screen.
If the view is first loaded horizonttaly, the bar is 32 points high but the built-in UIBarButtonItems appear still like that, and rotating to vertical will keep it at 32 points.
I honestly have no idea how to make this work as expected (ie. resize properly when rotated, with the buttons showing properly!), so if anyone could point me in the right direction -- pun intended -- I would be really grateful.
The activity indicator is right in the middle of the frame, with these constraints:
Align Center X to Superview
Align Center Y to Superview
The web view is set to use all available space from the top of the view (including the navbar) up to the top of the toolbar, and has these contraints:
Top Space to Superview
Bottom Space to Toolbar
Align Trailing to Toolbar
Bottom Space to Toolbar (it's actually listed twice)
Align Leading to Toolbar
The toolbar is a mess. It has:
Bottom space to Superview
Align Center X to Superview
Top Space to Web View
Align Trailing to Web View
Top Space to Web View (listed twice)
Leading Space to Superview
Align Leading to Web View
Bottom Space to Bottom Layout Guide
The problem is that by not adding any constraints at all, the web view is much bigger than it should be, and the toolbar doesn't even show.
I mostly set these constraints using the horizontal and vertical red bars (similar to springs and strouts) in the 'pin' popover for autolayout, but I'm starting to think that's not the most appropriate approach.
Note that I'm not trying to use autolayout within the toolbar, I read that it wouldn't work and I'm just using the built-in buttons plus a couple of labelled ones (those 'arrows' are really unicode characters, I may change them to prettier images at some point.)
Thank you in advance. :-)