-6.6 C
New York
Sunday, December 22, 2024

ios – SwiftUI TabBar overlaps with keyboard in SearchBar element


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:

  1. Utilizing .ignoresSafeArea(.keyboard) modifier
  2. 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
            }
    }
}
  1. Utilizing .scrollDismissesKeyboard(.instantly)
  2. 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:

  1. Works constantly throughout completely different iOS variations
  2. Maintains clean animations
  3. Retains all content material accessible when the keyboard is proven
  4. Correctly handles the TabBar place

Any assist can be vastly appreciated!

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles