I am trying to embed UIPageViewController into Container View. The ContainerView has the following layout:
It consists of UIViewController which holds Container View and 2 buttons at the bottom.
The connection between Container View and UIPageViewController is established through "embed segue".
UIPageViewController manages 3 UIViewControllers. Each UIViewController represents app walkthrough tutorial screen, and has the following layout:
The Problem: When I run the app, the first walkthrough screen looks as it is supposed to, meaning all the layout elements are displayed properly:
However, when I scroll to the next walkthrough screen only UIImageView is displayed, pushing down the other two labels, that are below it, out of the frame:
I was wondering how can the Container View display all elements of the UIViewControllers managed by UIPageViewController?
You shouldn't set the imageView's bottom constraint to 0. You should constrain it to the heading's top anchor. Similarly you should set the bottom of the heading to descriptions top. And set the descriptions bottom to its superview's bottom.
I have solved this issue by putting the contents of tutorial screen inside vertical stack view, and giving the UIImageView lesser Content Compression Resistance Priority
Related
I have a static UITableViewController embedded within a UIContainerView. All created using Storyboards.
I'm setting the positioning of the container view using autolayout, whereby it is always touching the top, left and right of the uiviewcontroller it is within and always 50px from the bottom due to a UIButton being there.
The UITableViewController has a larger content size than the height of the container view, so one would expect you to be able to scroll the tableview from the container view.
But for some reason I cannot get it to work, when you initially load the UIViewController the scroll indicator appears and then hides and it won't let you scroll the tableview. How would I solve this?
(It has previously worked for me, I just can't remember what I did.)
I have several UIViews within aUIScrollView and I want them to scroll all the way to the bottom of the UIScrollView before cutting off (See Image #2).
Background on the scroll view:
I created the UIScrollView itself is a subclass of a customUIView. I put the view in a UIScrollView so the auto layout in storyboard creates the correct frame for the device.
In the view controller attached to the storyboard UIViewController I created anIBOutlet to theUIView, and in the viewDidAppear function I called a function attached to the view that populated the UIScrollView.
In the storyboard I gave the view a blue background so I could tell its frame. Here is the what the storyboard looks like:
Then this is what it looks like on my phone:
Notice how much space exists between where the view cuts off and where the bottom of the screen is. It does this on all devices.
I have tried adjusting the bottom content inset. It is currently at 0.0 but I tried to make it -20 and that did not help.
How can I fix this?
So, what I need: 3 pages (with swipe support): two of them just fit the screen, third one must have vertical scrolling.
1) Can you provide what bunch of controls I need to use: ScrollView with vertical scrolling inside parent ScrollView with paging enabled? Or ScrollView with PageControl?
2) How to adjust vertical ScrollView. I've read bunch of question here, and tried to do that by myself.
I tried to add 4 constraints for ScrollView (pin it to parent edges), then I add child UIView, also pin it to Scroll edges. Then I add some rectangles to child view, and using different settings I got: just horizontal view, horizontal+vertical scroll, only vertical scroll but with top space from UINavigationBar and with clipped some height from child rectangles (I can't scroll to them).
Can someone provide some example of how to do that? I prefer IB for constraints, but if it's necessary to calculate some math in code - it's ok.
Thanks
When paging between view's like that, I would suggest using a UIPageController (You can easily get a sample application by creating a new project and selecting "Page Based Application"). Change the transition style from Page Curl to Scrolling and there is the functionality you need for paging between view controllers. Now you just can place a scroll view in your third view controller and make sure the attributes are as follows. DirectionLockEnabled is the key to what you are trying to do, as it determines if scrolling is disabled in a particular direction (this case horizontal scrolling). Using this type of solution, it is then really easy to set constraints because you're setting constraints for 3 separate view controllers rather than 3 views within a scroll view
edit: disable "Shows Horizontal Indicator" Checkbox also
I've created a Page-Based Application and hacked it a bit for some experiments; my simple aim is to have a UIPageViewController whose pages will contain a UIViewController holding a UITableView (after further inspection, the outcome of my experiment is the same if I use a UITableViewController instead).
To do this I've simply edited the project template, and added the UIPageViewController as an embedded view of the RootViewController using Storyboard's ContainerView object, as you can see in this screenshot:
Every controller is configured via storyboard to automatically adjust scroll view's content inset, and if I start the project with this configuration everything looks fine, and the DataViewController's tableview has its content insets properly adjusted right under the navigation bar as expected; however, as the user makes an interaction with the tableview, the content insets break and the tableview underlaps the navigation bar:
I have been able to fix this by manually setting the content insets in DataViewController's viewDidLayoutSubview method, and by disabling Adjusts Scroll View Insets on any controller, so I don't need this as an answer to solve my problem.
My question is why the content insets are properly set right after the first controller gets loaded from the storyboard the first time, and why they break after any kind of user interaction.
If you need to test it directly, here's a link to the project
I'm not 100% sure it's what you're running into, but here's some explanation regarding your setup:
By default, UIViewControllers tend to be configured to extend their content behind non-opaque bars, and to adjust scroll view insets. In your setup above this means that the container VC:
Extends its content so as to appear behind the navigation bar
Sets its scrollview's .contentInset and .scrollIndicatorInsets to be the same height as the navigation bar
"But, ah!" I hear you say, "that container view controller doesn't have a scroll view". Well this is the tricky bit:
It seems UIViewController's definition of "my scroll view" is rather simplistically, "the first scroll view I come to when searching down through my view hierarchy".
UIPageViewController happens to be implemented using a scroll view. So the container VC finds that scroll view, and adjusts its top insets. This is not really what you want; it confuses the page controller, and tends to upset layout at some point.
The simple solution there is simply to turn off .automaticallyAdjustsScrollViewInsets for the container view controller.
You then need to solve the next problem of your table view needing some kind of top insets to account for the navigation bar. So far it seems to me the best way to do this is manually either in the storyboard, or code.
Found an elegant solution:
From your storyboard, select your UIPageViewController
In the Attributes inspector, uncheck the option ViewController => Extend Edges => Under Top Bars
That's all, no weird UI hacks
Have you tried fixing the Auto Layout constraint in the container view of the Root view controller in the Storyboard (that is, the top space constraint should be set related to the Top Layout Guide and not the Superview, with constant = 0)?
You will only lose the effect of the Table View scrolling under the Navigation Bar
I have an app which shows two images housed within a UIScrollview.
The scrollview is of size (320, 530), underneath it is an imageview size (320,38), this acts like a dock at the bottom of this screen, ( in fact it has to be there at the bottom of all screens in this app).
As it stand the scrollview works fine and the images switch from one to anothr when the user
moves the scrollview.
The problem is, I need the scrollview height to go all the way down ( from 530 to 568), and end up behind the dock imageview, when I change its height and the height of images within it, it just stops scrolling.
Is this impossible in scrollviews? does it have to have all of its screen real estate as top view?
Any solutions for this?
Thanks.
Update :
so I worked on the alpha and the image constraints, and the bottom imnage is located properly,
still the scrolling is not functioning.this is the latest code with changes.
http://ge.tt/4LYJGWl/v/0?c
thanks.
This is certainly possible. Add a full height scroll view to the controller's view, then add the small image view to the bottom. In the scene list at the left move that image view up so it's directly underneath the main view, which will make it a subview of that view rather than the scroll view (you'll then need to move the scroll view up above the image view so the image view will appear on top). You'll probably have to change some constraints to pin it to the bottom, and give it an alpha value less than 1 so the scroll view will show through.
After Edit
This is the screen shot of the scene from your updated code:
You only have one view that's directly under the main view, your scroll view. Compare that to my image.