Create responsive UIScrollView to handle overlapping keyboard




Firefox for iOS
4 years ago
3 years ago


(Reporter: wesj, Unassigned)


Firefox Tracking Flags

(Not tracked)



(1 obsolete attachment)



4 years ago
We need to make sure the keyboard doesn't obscure the text entry fields on the login page when its up.


4 years ago
Group: mozilla-employee-confidential


4 years ago
Blocks: 1092348
Blocks: 1092561
No longer blocks: 1092348
Assignee: nobody → bnicholson


4 years ago
Summary: [ios] Handle keyboard appearing on login screen → (ios) Handle keyboard appearing on login screen
Created attachment 8528042 [details] [review]
Pull request

It was really tricky getting autolayout to play nicely with UIScrollView, but I eventually got it working. The trick was to create a dummy view as the last child in the ScrollView whose bottom/edges are constrained to the ScrollView; this allows the ScrollView to correctly determine its content size.

I was originally going to make this an extension instead of a subclass, but extensions can't hold state or have deinitializers (both needed here).
Attachment #8528042 - Flags: review?(sarentz)
This is an interesting solution but I think doing it with a `UIScrollView` subclass is too complicated.

How about this instead: (I think this will simplify the code a lot)

* Create a plain container `UIView` and put the login items in there
* Add the container to the viewcontroller
* Start listening for keyboardWillShow and keyboardWillHide notifications
* When you receive a show or hide notification, resize the containerview: decrease/increase its height with the height of the keyboard. (the notification's `userInfo` contains the keyboard height and also animation settings - if you animate the containerView height change with the same settings you get a nice synchronous resize of the login dialog while the keyboard goes up)
* In the container view you can use just constraints to make sure the dialog items are properly positioned. If they all fit in the top part when the keyboard is showing then there should be no dynamic changes needed. Otherwise you can also show/hide or reposition items in the notification handlers. 

If you want to use autolayout for the container view, then you can add constraints to it to snap to the viewcontroller's view as usual. For the constraint at the bottom, keep a reference to the `NSLayoutConstraint` instance that you created and then instead of changing the container's view `frame`, just change the constraint's `constant` property. (Which should be padding between the bottom of the viewcontrollers view and the container view. Changes to constraints are animated if done within an animation block.
Group: mozilla-employee-confidential
Component: General → Firefox Accounts
OS: All → iOS 7
Product: Firefox for Android → Firefox for iOS
Summary: (ios) Handle keyboard appearing on login screen → Handle keyboard appearing on login screen
Brian do we still need this patch? Or was this made obsolete by other login screen changes?
We'll probably want something like this eventually for all cases where the keyboard obscures the view, but I'll close the existing PR and repurpose this bug into something more generic.
Assignee: bnicholson → nobody
Summary: Handle keyboard appearing on login screen → Create responsive UIScrollView to handle overlapping keyboard
Attachment #8528042 - Attachment is obsolete: true
Attachment #8528042 - Flags: review?(sarentz)
No longer blocks: 1092561
Component: Firefox Accounts → General
Last Resolved: 3 years ago
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.