GO FURTHER, FASTER: Try the Swift Career Accelerator today! >>

Compact screens, keyboard and dynamic type UI issues

Forums > SwiftUI

When testing my app on an iPhone SE i noticed an issue with the UI when editing some text in a text field. When the keyboard comes up it pushes everything in the view up and part of the text field gets covered by the navigation title and buttons. It gets worse when testing dynamic fonts and changing the text to XXLarge or higher. On a larger screen there is no issues.

Is it possible to prevent the keyboard from push up the content of the view when it is displayed?

This is with the default font of large.

This is with the extra large text

  var body: some View {
    NavigationStack {
      VStack {
        HStack {
          Text("Name")
          Spacer()
          TextField("Name", text: $name)
            .multilineTextAlignment(.trailing)
            .textFieldStyle(.roundedBorder)
            .frame(width: 240)
            .onChange(of: name) {
              if name.count >= 10 {
                isShowingLongNameWarning = true
              } else {
                isShowingLongNameWarning = false
              }
            }
        }

        VStack(alignment: .trailing){
          HStack {
            Text("Short Name")

            Spacer()
            TextField("Short Name", text: $shortName.max(shortNameCharacterLimit))
              .multilineTextAlignment(.trailing)
              .textFieldStyle(.roundedBorder)
              .frame(width: isShowingLongNameWarning ? 215 : 240)
            if isShowingLongNameWarning {
              VStack {
                Image(systemName: "exclamationmark.circle")
              }
              .popoverTip(shortNameTip)
            }
          }
          Text("Short Name Length: \(shortName.count) characters")
            .font(.caption)
            .foregroundStyle(shortName.count >= shortNameCharacterLimit ? .red : .primary)
        }

        HStack {
          Text("Fluid Amount")
          Spacer()
          TextField("Fluid Amount", value: $amount, format: .number)
            .multilineTextAlignment(.trailing)
            .textFieldStyle(.roundedBorder)
            .keyboardType(.decimalPad)
            .focused($numberPadIsFocused)
            .frame(width: 140)
            .toolbar {
              if numberPadIsFocused {
                ToolbarItemGroup(placement: .keyboard) {
                  Spacer()

                  Button("Done") {
                    numberPadIsFocused = false
                  }
                }
              }
            }
        }
        HStack {
          Text("Unit of Measure")
          Spacer()
          Picker("Unit of measure", selection: $unitOfMeasure) {
            ForEach(FluidUnit.allCases) {
              Text($0.title)
            }
          }
          .tint(colorScheme == .dark ? .yellow : .pink)
        }
        .accessibilityElement()

        Toggle("Favorite Drink", isOn: $isFavorite)

        Text("Drink Image")
        ScrollView(.horizontal) {
          HStack{
            ForEach(DataStore.drinkImages, id: \.self) { image in
              Button {
                selectDrinkImage(imageName: image)
              } label: {
                ZStack {
                  Image(image)
                    .resizable()
                    .scaledToFit()
                    .frame(height: 100)
                  if imageName == image {
                    SelectedDrinkImageView()
                  }
                }
              }
              .padding(.trailing, 30)
            }
          }
          .scrollTargetLayout()
        }
        .scrollIndicators(.hidden)
        .scrollTargetBehavior(.viewAligned)

        Spacer()
          .navigationTitle("Add a Drink")
          .navigationBarTitleDisplayMode(.inline)
          .toolbar {
            ToolbarItem(placement: .topBarTrailing) {
              Button("Save") {
                addDrink()
              }
              .tint(colorScheme == .dark ? .yellow : .pink)
              .disabled(disableSaveButton())
            }

            ToolbarItem(placement: .topBarLeading) {
              Button("Cancel") {
                dismiss()
              }
              .tint(colorScheme == .dark ? .yellow : .pink)
            }
          }
      }
      .padding()
    }
  }

   

Hacking with Swift is sponsored by RevenueCat.

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's all new Paywall Editor allow you to remotely configure your paywall view without any code changes or app updates.

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.