Noob here. Various similar questions on SO but still can't figure it out. I have a pair of buttons on the main view and a pair of buttons in a scroll view (embedded in the main view). Each pair of buttons are positioned on opposite ends of the display. The scroll view covers the bottom half of the display.
When I rotate from portrait to landscape the pair of buttons in the main view are properly repositioned on opposite ends of the display based on their layout constraints. But the buttons in the scroll view are not properly repositioned. The scroll view itself properly expands in landscape mode (as seen by the background color) but the buttons do not move. Both sets of buttons have the same layout constraints. How can I make the buttons in the scroll view mimic the buttons in the main view? In other words, how can I move the pair of buttons in the scroll view to opposite ends in landscape mode?
I don't have any custom code, everything was done with interface builder. I'm using iOS 6.1 and xcode 4.2.
The autolayout tends to be a bit confusing. You can custom position the elements once the screen has rotated. These are the methods that iOS will call when the device is rotated. Just give the buttons outlets and adjust them inside of those methods
If before rotation, override from UIViewController:
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
// do something before rotation
}
If you want to perform something after rotation:
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
// do something after rotation
}
I solved the problem without requiring any hand code. I added a single content view to the scroll view and then added my subviews (i.e., UIButtons) to the content view.
I fixed the height of the content view by adding a height constraint, anchored the left, top, and right sides of the content view to the scroll view (did not anchor the bottom to keep the content view from shrinking in landscape mode). Also, anchored the scroll view (left, top, right, and bottom) to its superview to make sure it properly shrank in height and expanded in width in landscape mode.
The secret to success was in the layout constraints. Once I fully -- and I mean fully -- understood the constraints, it all became crystal clear.
Related
Recently, i've been building and app which requires a scrollview, for all the content to fit. I've had a few difficulties creating my scrollview. I've tried a few different methods for building it, but ended up building it in storyboard with autolayout. I've set the height of the view controller to 1000, and therefore also the simulated size to freeform. The width of the content view inside the scrollview, I've to the same as the view which contains the scrollview.
The hierarchy goes like this:
-View controller scene
-Top layout guide
-Bottom layout guide
-View
-Scroll view
-Content view
-Label with text here
-Constraints
-And so on
I've been replicating the process in this link, to create the scrollview:
https://www.ralfebert.de/snippets/ios/auto-layout-recipes/uiscrollview-storyboard/
When running the application on the simulator, I get the following result:
The scrollview is not working properly on the iPad. It seems like the scrollview doesn't adapt to the changes in the width, which happens when its ran on an iPad, since it's bigger. When the app is ran on the iPad, the scrollview stays the same width as if it were shown on the iPhone.
This is how it looks in the editor. The view controller on the left is the view controller which has the scrollview implemented, and the one on the right doesn't. The first image shows the storyboard, when I view it with the iPhone 8, and the second image is when I view it with an 9,7" iPad:
It would be greatly appreciated if anyone could give me a hint to whats going on!
EDIT:
Left side is what it looks like, and right side is what it should look like:
Add the UIScrollView to your main view
Set Top, Left, Right, Bottom constraints all to Zero
Add a UILabel inside the scroll view
Set number of lines to Zero
Set Top, Left, Right, Bottom constraints all to Zero
Set the label's width constraint equal to the scroll view's width
That should do it :)
This will keep the label's text aligned to the top of the scroll view. If you add enough text to fill more than the full screen, it will scroll vertically.
so, I'm pretty sure I have my auto layout constraints set up correctly... And I have my view controller embedded in a navigation controller. I put all of the things inside of a uiview that's constrained to the 4 sides of the phone (including the bottom of the navigation bar) but this is happening.
I have the picture constrained to the vertical center of the view, and at a 1:3 ratio to it's height. the buttons are constrained on the sides
the problem is that (as you can see by the button borders and the button text being off centered) everything seems to be larger than it should be and is causing an overlap, when the buttons are supposed to be flush against the bottom and top of the image view, but instead overflow on top of it (again, shown by the button borders)
ah, I'm just an idiot. Image View wasn't clipping subviews. Auto Layout's working just fine! Thanks. My b.
I have a UIScrollView that fills the width of the device and it contains several UIViews laid out horizontally. The views all have the same width, so on the iPhone one has to scroll to see all the views, but on the iPad all of the views are visible.
My question is how can I perfectly horizontally center the views on screen? When the available space is large enough to display all views, they need to be centered but when it's not large enough to display all views they can be laid out as they are now, simply left to right.
The interface has been set up entirely in Interface Builder. The scroll view is set to fill the entire device width - leading and trailing to superview. The first view in the scroll view has leading set to its superview so it's stuck to the far left. The last button has its trailing set to the superview - to the far right of the scroll view, to define the scrollable content area. Each view in the middle is laid out relative to the view to the left of it - leading to the previous button.
Here's a graphical representation of the current layout:
Here's a graphical representation of what I'd like to obtain:
Additional info:
The scroll view doesn't have to always fill the device width, as it is actually completely transparent. When all views are visible I want to disable scrolling. This will need to be adaptive, such that upon rotating the device it can change the layout if needed, because on iPhone in landscape all the views should be visible but in portrait they won't be.
You can try setting the contentInset property of the scroll view, which has a type of UIEdgeInsets. This property simply provides the scroll view with a certain amount of "padding", adding to the scrollable area.
You can determine how much extra space you have at the end (right-hand side) of your view, divide it by 2, and use that value to provide equal-width padding on each side.
Another purely autolayout-based approach could be:
Constrain your middle view to be horizontally centered in the superview.
Constrain each view relative to the middle view in a chain
I created a custom navigation menu in my app and I want to show some info with a scrollview.
I have a mainViewController where I have a custom navigation menu at the top, and a view (placeholder). Then I created a custom segue and 3 more views, corresponding to the 3 tabs of the custom menu. These views (viewA, viewB and viewC) are smaller to fit in the placeholder so the user will see the custombar at the top and the info corresponding to viewA (B or C) in the placeholder. This is the schema of my mainViewController.
In viewA I want to display some info in a scrollview. This is my schema:
However the viewA is clipped and it does not scroll down. But if I make my scrollview smaller it scrolls down. I guess the problem is related with the Bottom Layout Guide spacing constrain since my view goes inside of a placeholder.What I am doing wrong? I want to support both iPhone 3.5 and 4-inch screens.
This sound like if you don´t set contentSize of your scrollview.
if your scrollview.contentSize frame is more bigger than your scrollview frame, your scrollview will not scrolling, so you need to set your scrollview.contentSize more bigger than your scrollView frame for scrolling.
I am new to auto layout and need to resize some views when it rotates to landscape.
My view hierarchy from top to bottom is:
Toolbar (user info)
Toolbar (scroll view #1 title)
Scrollview #1
Toolbar (scroll view #2 title)
Scrollview #2
All views are adjacent to each other and when rotated stay in the same layout.
However, I need to shrink both scroll views by a small amount so everything fits onto the screen when in landscape mode.
What is the proper way to do this?
I have tried manually changing the scrollview frames in a orientation change method, but the view size doesn't change.
Give the toolbars explicit heights.
Pin the top tool bar to top and sides.
Pin bottom scrollView to sides and bottom
Make the height of the 2 scrollViews the same.
Make all of the view have vertical spacing constraints between them (you should get this automatically, if you put them right on top of each other when you drag them in).
This should be sufficient to define every views size and position. When the view gets smaller on rotation, the only thing free to change will be the scroll view heights.