📱 Using Scroll View & Responding to Keyboard Activities Programmatically (iOS – Xcode)
✅ 1. Definition
🔹 UIScrollView
A Scroll View is a container view that allows users to scroll content that is larger than the screen size (vertically or horizontally).
🔹 Keyboard Handling
It refers to adjusting the UI when the keyboard appears or disappears, so that input fields are not hidden.
👉 When combined:
Scroll View + Keyboard handling = smooth form-based apps (login, registration, chat apps)
🧠 2. Key Concepts
🔹 Why Scroll View is Needed
- Keyboard often covers text fields
- Small screens cannot show all content
- Scroll view allows movement of content
🔹 Content Inset
- Extra space added inside scroll view
- Used to move content above keyboard
🔹 Notification Center
- Detects keyboard show/hide events
🏗️ 3. Basic Structure
View Controller
↓
Scroll View
↓
Content View
↓
UI Elements (TextFields, Buttons)
⚙️ 4. Step-by-Step Setup (Storyboard)
🔹 Step 1: Add Scroll View
- Drag UIScrollView into View Controller
🔹 Step 2: Add Content View
- Inside scroll view, add a UIView
- This holds all UI elements
🔹 Step 3: Add UI Elements
- Text fields
- Buttons
- Labels
🔹 Step 4: Add Constraints
- Scroll View → edges to superview
- Content View → pinned inside scroll view
⌨️ 5. Handling Keyboard Programmatically
🔹 Step 1: Add Observers
override func viewDidLoad() {
super.viewDidLoad()
NotificationCenter.default.addObserver(self,
selector: #selector(keyboardWillShow),
name: UIResponder.keyboardWillShowNotification,
object: nil)
NotificationCenter.default.addObserver(self,
selector: #selector(keyboardWillHide),
name: UIResponder.keyboardWillHideNotification,
object: nil)
}
🔹 Step 2: Add Scroll View Outlet
@IBOutlet weak var scrollView: UIScrollView!
🔹 Step 3: Adjust When Keyboard Appears
@objc func keyboardWillShow(notification: Notification) {
if let keyboardFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect {
let keyboardHeight = keyboardFrame.height
scrollView.contentInset.bottom = keyboardHeight
scrollView.verticalScrollIndicatorInsets.bottom = keyboardHeight
}
}
🔹 Step 4: Reset When Keyboard Hides
@objc func keyboardWillHide(notification: Notification) {
scrollView.contentInset.bottom = 0
scrollView.verticalScrollIndicatorInsets.bottom = 0
}
🔹 Step 5: Remove Observers
deinit {
NotificationCenter.default.removeObserver(self)
}
📊 6. Diagram Description (for Exams)
Draw:
Keyboard Appears
↓
Scroll View Insets Increase
↓
Content Moves Up
↓
TextField Remains Visible
💡 7. Example App
🎯 Login Form App
- Username field
- Password field
- Login button
Problem:
- Keyboard hides password field
Solution:
- Scroll view adjusts automatically
scrollView.contentInset.bottom = keyboardHeight
📌 8. Important Rules / Tips
- Always embed content inside Scroll View → Content View
- Use contentInset for keyboard adjustment
- Remove observers to avoid memory leaks
- Test on different screen sizes
- Combine with Auto Layout for best results
⚠️ 9. Common Mistakes
- ❌ Not using Content View inside Scroll View
- ❌ Forgetting constraints → layout breaks
- ❌ Not resetting inset on keyboard hide
- ❌ Hardcoding keyboard height
- ❌ Missing NotificationCenter observers
🧠 10. Best Practices
- Use Auto Layout with Scroll View
- Always adjust insets dynamically
- Keep forms inside scroll view for usability
- Animate UI changes for smooth experience
- Test with different keyboards (numeric, email, etc.)
📝 11. Likely Exam Questions
- What is a Scroll View in iOS?
- Why is Scroll View used in apps?
- How do you handle keyboard appearance programmatically?
- Explain contentInset in UIScrollView.
- Write code to adjust Scroll View when keyboard appears.
- What is Notification Center used for in keyboard handling?
- Why is Content View important inside Scroll View?
- Explain the relationship between keyboard and scroll view.
📚 12. Quick Revision Summary
-
Scroll View = allows scrolling of large content
-
Used in forms and login screens
-
Keyboard handling prevents UI hiding
-
Steps:
- Detect keyboard (NotificationCenter)
- Adjust scrollView.contentInset
- Reset on hide
-
Improves usability and user experience