0

I have an input screen which does looks like the following

Portrait orientation

If I rotate the screen it hides some elements as can be seen here

Landscape orientation

I already implemented a feature which scrolls the screen when the keyboard hides the textfield (seems to be fragile). My problem is that some elements (e.g. the last textfield) is completely hidden at all. If I don't resign the first responder the user would never see it. My question now is what can I do against this? The user needs to scroll the view but it is clipped. I already tried to put the UI elements into a scroll view, but I still can't scroll the content. I know that this is a common problem but I can only find posts about hiding the keyboard, which isn't my problem. Auto Layout also cannot manage this.

How should I deal with this situation that the content is still visible?

Edit:

First I tried to set up everything in iOS Designer which didn't worked. Now I've done everything in code:

UIScrollView scrollView = new UIScrollView ();
UIView image = new UIView ();
image.BackgroundColor = UIColor.Blue;
UITextField username = new UITextField ();
username.Text = "Benutzername";
username.BorderStyle = UITextBorderStyle.RoundedRect;
UITextField password = new UITextField ();
password.Text = "Passwort";
password.BorderStyle = UITextBorderStyle.RoundedRect;
View.AddSubviews (scrollView);
scrollView.AddSubviews (image, username, password);

scrollView.TranslatesAutoresizingMaskIntoConstraints = false;
image.TranslatesAutoresizingMaskIntoConstraints = false;
username.TranslatesAutoresizingMaskIntoConstraints = false;
password.TranslatesAutoresizingMaskIntoConstraints = false;

NSMutableDictionary viewsDictionary = new NSMutableDictionary ();
viewsDictionary ["scrollView"] = scrollView;
viewsDictionary ["image"] = image;
viewsDictionary ["username"] = username;
viewsDictionary ["password"] = password;


View.AddConstraints(NSLayoutConstraint.FromVisualFormat("H:|[scrollView]|",(NSLayoutFormatOptions)0, null, viewsDictionary));
View.AddConstraints(NSLayoutConstraint.FromVisualFormat("V:|[scrollView]|",(NSLayoutFormatOptions)0, null, viewsDictionary));
scrollView.AddConstraints(NSLayoutConstraint.FromVisualFormat("V:|-[image(240)]-(30)-[username(30)]-(16)-[password(30)]",(NSLayoutFormatOptions)0, null, viewsDictionary));
scrollView.AddConstraint (NSLayoutConstraint.Create (image, NSLayoutAttribute.CenterX, NSLayoutRelation.Equal, scrollView, NSLayoutAttribute.CenterX, 1, 0));
scrollView.AddConstraint (NSLayoutConstraint.Create (username, NSLayoutAttribute.CenterX, NSLayoutRelation.Equal, scrollView, NSLayoutAttribute.CenterX, 1, 0));
scrollView.AddConstraint (NSLayoutConstraint.Create (password, NSLayoutAttribute.CenterX, NSLayoutRelation.Equal, scrollView, NSLayoutAttribute.CenterX, 1, 0));
scrollView.AddConstraints(NSLayoutConstraint.FromVisualFormat("H:[image(160)]",(NSLayoutFormatOptions)0, null, viewsDictionary));
scrollView.AddConstraints(NSLayoutConstraint.FromVisualFormat("H:[username(100)]",(NSLayoutFormatOptions)0, null, viewsDictionary));
scrollView.AddConstraints(NSLayoutConstraint.FromVisualFormat("H:[password(100)]",(NSLayoutFormatOptions)0, null, viewsDictionary));

scrollView.ContentSize = new SizeF (320.0f, 1000.0f);

This code is in viewDidLoad, but it doesn't scroll. After some reading I found out that I have to set the content size in viewWillAppear, which is not enough. I also have to place it in didRotateFromInterfaceOrientation. Or easier: put it in viewDidLayoutSubviews.

But why do I have to set the content size everytime?

I think I have followed the Pure Auto Layout Approach. Only the part being sure that the constraints tie to all four edges of the scroll view I don't quite get. I have set a width/height and not used all four edges. All four edges can only be used in some certain circumstances where you want to fill out the whole scroll view ...

Now I tried to change my constraint to 

scrollView.AddConstraints(NSLayoutConstraint.FromVisualFormat("V:|-[image(240)]-(30)-[username(30)]-(16)-[password(30)]-|",(NSLayoutFormatOptions)0, null, viewsDictionary));

and I don't need to explicitely set the contentSize. Now the scrollview knows the height as described here.

One question remains: What if I don't use auto layout? I'll have to try to set the content size.

Community
  • 1
  • 1
testing
  • 19,681
  • 50
  • 236
  • 417
  • Use a UIScrollView and set the contentSize. – titaniumdecoy Nov 26 '14 at 18:28
  • I did set the `contentSize` in `viewDidLoad`, but it doesn't scroll in landscape orientation when the content is hidden. So there must be some more steps ... – testing Nov 26 '14 at 20:53
  • It will scroll if you set contentSize to be taller than the bounds in landscape. – titaniumdecoy Nov 26 '14 at 21:03
  • Now it is 1000x1000 (larger than the iPhone screen) and it still doesn't scroll. Don't know what I'm doing wrong. I don't use auto layout and I only dragged some views on my scroll view as can be seen on the screenshots above. – testing Nov 26 '14 at 21:43
  • Are you sure your views are actually _inside_ the scroll view and not on top of it? – titaniumdecoy Dec 04 '14 at 01:47
  • Thanks for your suggestion. Actually, I had this problem. Only arranging the textfields above the scroll view is not enough. You have to drag the elements and place it inside the scroll view. But I got it managed as you can see in the update of my question. – testing Dec 04 '14 at 07:23

0 Answers0