Xamarin iOS Autolayout: Resize width and vertical scroll automatically for various devices while keeping the horizontal scroll disabled

Question

I want to create a page which has a vertical but no horizontal scroll. It must adjust width of the content and vertical scroll automatically as per screen size.

Som

Answer 1

The previous answer was quite right, but not right at all. Indeed I tried to solve this problem using the method described before, but to make it work, I made some adjustments.

Your view's hierarchy has to be as follow :

UIScrollview :

• View1
• View2
• View3

You don't need a container inside the UIScrollview, because apart the fact that it will be an extraview that you don't need, there is the problem that if you use this container-view you will get problem getting touch events in the views added.

So, let's make a step-by-step process:

1. Add scrollview to your viewController

The first step is to add the scrollview to your viewController, and we can simply do this programmatically in the following way:

UIScrollView scrollView = new UIScrollView();
scrollView.TranslatesAutoresizingMaskIntoConstraints = false;
View.AddSubview(scrollView);

View is the main-view of the viewController you are working in (aka Self.View). Put attention to set TranslateAutoResizionMaskIntoConstrains property of the scrollview to false, otherwise autoresizing will mess your constraints.

2. Add constraint (autolayout) to your scrollView

You need to ensure that you layout will adjust for every different iPhone-screen, so simply use auotlayout to pin your scrollView to the viewController main-view (is the View used in the next code sample):

scrollView.TopAnchor.ConstraintEqualTo(View.TopAnchor, 0).Active = true;
scrollView.BottomAnchor.ConstraintEqualTo(View.BottomAnchor, 0).Active = true;
scrollView.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor, 0).Active = true;
scrollView.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor, 0).Active = true;

In this way your scrollView is pinned to the bound of the main-view.

3. Create the view to be added

You need to create the view that you will add to the scrollView:

UIView viewToBeAdded = new UIView();
viewToBeAdded.TranslatesAutoresizingMaskIntoConstraints = false;
viewToBeAdded.Frame = new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, 200);

We have created a new UIView that setting its frame large as the screen (UIScreen.MainScreen.Bounds.Width) so it won't scroll horizontally, and with an arbitrary height (200 in the sample).

NOTE : even in this case you have to set TranslateAutoResizingMaskProperty to false, otherwise you will get a mess.

4. Add the view to the scrollView

Next step is to add our new view to the scrollView as follow:

scrollView.AddSubview(view);

Nothing more.

5. Set constraint for the view added in relation to the scrollView

Once you have added your view you have to said which will her behavior related to the scrollView. We assume that we will add several view to the scrollView, so we have to made a distinction, to the behavior of the FIRST view, the IN-BETWEEN views, and the LAST view.

So to be clear we assume that we are adding only 3 views, so we will have the three different cases.

FIRST VIEW

The important thing is that the first view has to be pinned to the top of the scrollView, we do this as follow :

firstView.TopAnchor.ConstraintEqualTo(scrollView.TopAnchor, 0).Active = true;

and then we set the others constraints:

firstView.WidthAnchor.ConstraintEqualTo(firstView.Bounds.Width).Active = true;
firstView.HeightAnchor.ConstraintEqualTo(firstView.Bounds.Height).Active = true;

IN-BETWEEN VIEW

The in between views (in our sample the secondView) need to be pinned to the previous view added (in our case the first view). So we do as follow:

secondView.TopAnchor.ConstraintEqualTo(firstView.BottomAnchor).Active = true;

So the top of the secondView is pinned to the bottom of the firstView. And then we add the others constraints:

secondView.WidthAnchor.ConstraintEqualTo(secondView.Bounds.Width).Active = true;
secondView.HeightAnchor.ConstraintEqualTo(secondView.Bounds.Height).Active = true;

LAST VIEW

The last view (in our case the third view) instead needs to be pinned to the bottom of the previousView (in our case the secondView) and to the bottom of the scrollView.

thirdView.TopAnchor.ConstraintEqualTo(secondView.BottomAnchor).Active = true;
thirdView.BottomAnchor.ConstraintEqualTo(scrollView.BottomAnchor).Active = true;

And the usual other constraints for width and eight:

thirdView.WidthAnchor.ConstraintEqualTo(thirdView.Bounds.Width).Active = true;
thirdView.HeightAnchor.ConstraintEqualTo(thirdView.Bounds.Height).Active = true;

In this way the eight of the scrollView will adapt to the eight of the views added, due to the fact that the views inside are pinned to the top and the bottom of the scrollView.

CONCLUSIONS

If you follow these simple instruction you will get everything work. Remember to disable autoResizingMask, as this is on of the common mistake.

Hope it was helpful. Cheers