Downside Description:
I am growing an iOS app utilizing SwiftUI and encountering a difficulty the place the TabBar overlaps with the keyboard when the SearchBar is targeted. This happens in a number of views that use a standard SearchBarView
element, notably within the MarketView
.
Present Conduct:
- When the SearchBar is tapped and the keyboard seems, it pushes up the content material
- Nevertheless, the TabBar stays at its place and overlaps with the keyboard
- This makes it not possible to see the previous few search outcomes when scrolling
Anticipated Conduct:
- When the keyboard seems, the content material ought to modify to stay seen
- There needs to be no overlap between the TabBar and keyboard
- All content material needs to be scrollable and accessible when the keyboard is proven
Code:
Here is the related code construction:
// MarketView.swift
struct MarketView: View {
@State non-public var searchText = ""
@State non-public var showFilterMenu = false
@State non-public var isFilterActive = false
@FocusState non-public var isSearchFocused: Bool
var physique: some View {
NavigationStack {
ZStack(alignment: .prime) {
AppTheme.colours.background.ignoresSafeArea()
ScrollView {
VStack(spacing: 0) {
// Search Bar
SearchBarView(
textual content: $searchText,
showFilterMenu: $showFilterMenu,
isFilterActive: $isFilterActive
)
.padding(.horizontal)
.padding(.vertical, 8)
.padding(.prime)
// Content material...
Spacer()
.body(peak: 100) // Backside padding for TabBar
}
}
.scrollDismissesKeyboard(.instantly)
}
}
}
}
// SearchBarView.swift
struct SearchBarView: View {
@Binding var textual content: String
@Binding var showFilterMenu: Bool
@Binding var isFilterActive: Bool
@FocusState non-public var isFocused: Bool
var physique: some View {
HStack(spacing: 8) {
// Search bar content material...
}
.padding(.horizontal, 12)
.padding(.vertical, 8)
.background(Coloration(hex: "1C1C1E"))
.cornerRadius(16)
.onTapGesture {
isFocused = true
}
}
}
What I’ve Tried:
- Utilizing
.ignoresSafeArea(.keyboard)
modifier - Implementing a customized
KeyboardAdaptive
modifier:
struct KeyboardAdaptive: ViewModifier {
@State non-public var keyboardHeight: CGFloat = 0
non-public let tabBarHeight: CGFloat = 49
func physique(content material: Content material) -> some View {
content material
.padding(.backside, keyboardHeight > 0 ? keyboardHeight + tabBarHeight : 0)
.onAppear {
NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .important) { notification in
guard let keyboardFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
withAnimation(.easeOut(period: 0.16)) {
keyboardHeight = keyboardFrame.peak
}
}
// ... keyboard cover notification dealing with
}
}
}
- Utilizing
.scrollDismissesKeyboard(.instantly)
- Including further padding on the backside of the ScrollView
Setting:
- iOS 17.0+
- SwiftUI
- Xcode 15.0
Query:
How can I correctly deal with keyboard look in a SwiftUI view with a TabBar to forestall overlap and guarantee all content material stays accessible? I want an answer that:
- Works constantly throughout completely different iOS variations
- Maintains clean animations
- Retains all content material accessible when the keyboard is proven
- Correctly handles the TabBar place
Any assist can be vastly appreciated!