1

After using Xcode 12 for almost 3 months now, one thing I have consistently faced problem with is with the keyboard changing the orientation of the view. Although it is helpful sometimes as you don't have to change the offset manually based on the keyboard height, sometimes you just need more control over the look of your view.

Video

In the video below, the textfield moves up when the keyboard pops out, but it moves a bit too much. I have been trying to move the view with the login button sticking to the keyboard.

Video demonstrating the problem.

Code

VStack(spacing: 40) {
    SignInView() // Consists 1 TextField, 1 SecureField and 1 Button
    
    Rectangle()
        .frame(width: screen.width, height: 2, alignment: .center)
        .foregroundColor(Color(.systemGray5))
        .padding(.top, 100)
    
    HStack(spacing: 0.0) {
        Text("Don't have an account? ")
        
        Button(action: {
            ...
        }) {
            Text("Create one.")
                .foregroundColor(Color("blue"))
        }
    }
    .font(.system(size: 16, weight: .regular))
}

How I tried to resolve it. I tried to nullify the auto-offset by applying an offset of keyboard.current, where keyboard represents a KeyboardResponder class, and subtracting the offset by 20 to give a bit of breathing area between keyboard and the login button. Unfortunately this didn't work. Even if it did, I'm sure that this is not the best solution.

@State private var keyboard = KeyboardResponder()

var body: some View {
    VStack(spacing: 40) {
        ...
    }
    .offset(y: keyboard.currentHeight != 0 ? (keyboard.currentHeight - 20) : 0)
}
Praduyt Sen
  • 137
  • 1
  • 8
  • 20 seems to be the safeArea Inset no ? – CZ54 Sep 22 '20 at 09:14
  • No. I applied 20 in order to give some spacing between the keyboard and the login button once it keyboard pops out. – Praduyt Sen Sep 22 '20 at 09:36
  • 1
    This answer might help you: [iOS 14 SwiftUI Keyboard lifts view automatically](https://stackoverflow.com/a/64016326/8697793) – pawello2222 Sep 22 '20 at 19:14
  • Thanks @pawello2222 your answer with the `Spacer` did work out for me. I had tried the `ignoreSafeArea` on the my previous app, it didn't work out for me. I'll re-visit it with this approach. Thanks mate. – Praduyt Sen Sep 23 '20 at 02:11
  • Hey @pawello2222 I'm facing problems with using `Spacer`. First is that, in some parts of my apps, using spacer is changing the look of the view, second is that even after using `Spacer` and `ignoresSafeArea`, the view moves a bit up and comes down again. Do you have any solution for this?. – Praduyt Sen Sep 23 '20 at 09:37
  • 1
    @PraduytSen I don't know what do you mean by *the view moves a bit up and comes down again*. Please post a new question describing your problem - I'll try to help you there. – pawello2222 Sep 23 '20 at 09:45
  • @pawello2222 it is just like a bouncy effect that lasts for less than a second when the keyboard pops out, which means that the keyboard is still affecting the view. Sorry, couldn't explain better before. – Praduyt Sen Sep 23 '20 at 09:53
  • Hey @pawello2222 I found that using `GeometryReader` worked out for me. The keyboard doesn't interfere any more. Thanks for keeping up with the questions. Appreciate it mate. – Praduyt Sen Sep 23 '20 at 10:02
  • @PraduytSen Nice, good to hear it. That's what I wrote - *you need to fill all the available area*. It can be done with Spacers but also with a GeometryReader (which behaves in a similar way). I updated my answer to explicitly mention GeometryReader as it wasn't clear before. – pawello2222 Sep 23 '20 at 10:10
  • Thanks @pawello2222. Well with geometry reader I didn't have to use `ignoresSafeArea`. I would have to try it out in different layouts to be sure about it but as of now, this is the scenario. – Praduyt Sen Sep 23 '20 at 11:37

0 Answers0