When my ios apple keyboard shows up I would like to have my view site right on the top edge of it, without any gaps. So far I tried using the NotificationCenter UIResponder.keyboardWillShowNotification but I still get gaps when using the userInfo![UIResponder.keyboardFrameEndUserInfoKey] frame height.
Currently I tried using the view's offset modifier with the keyboard height but it just does not align. Now if I remove the offset entirely it sort of works but then I get no padding between the last element of my view and the top of the keyboard. I hesitate to put my entire code as its rather long, but here it is for review. The offset is towards the bottom.
import SwiftUI
struct MiniAddCommentView: View {
var person: Person
@State var commentTxt: String = ""
@State var showSubTextField = false
@State var height: CGFloat = 0
@Binding var clickedOut: Bool
let placeholder = "Add a comment"
func emojiButton(_ emoji: String) -> Button<Text> {
Button {
if self.showSubTextField == false {
self.showSubTextField = true
}
self.commentTxt += emoji
} label: {
Text(emoji)
}
}
var body: some View {
ZStack {
HStack(spacing: 10) {
PersonThumbView(person: person, width: 15, lineWidth: 2)
TextField("Add a comment", text: $commentTxt, onEditingChanged: {_ in
if self.clickedOut == true {
self.clickedOut = false
}
self.showSubTextField = true
})
.overlay(RoundedRectangle(cornerRadius: 5)
.stroke(Color("PrimaryColor"), lineWidth: 0.1))
emojiButton("🤎")
emojiButton("🙌")
Image(systemName: "plus.circle")
.instaStyleTertiary()
.frame(width: 15)
.padding(.trailing, 10)
}
.onAppear {
NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { (noti) in
let value = noti.userInfo![UIResponder.keyboardFrameEndUserInfoKey] as! CGRect
self.height = value.height
print("keyboard height \(self.height)")
self.clickedOut = false
}
NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillHideNotification, object: nil, queue: .main) { (noti) in
self.height = 0
self.showSubTextField = false
}
}
if self.showSubTextField == true {
VStack (spacing: 8) {
HStack(spacing: 25) {
emojiButton("🤎")
emojiButton("🙌")
emojiButton("🔥")
emojiButton("👏")
emojiButton("😟")
emojiButton("😍")
emojiButton("😦")
emojiButton("😭")
}
.frame(height: 40)
.font(.system(size: 20))
.border(Color.blue)
HStack {
PersonThumbView(person: person, width: 30, lineWidth: 2)
.padding(.trailing, 10)
HStack {
CustomTextField(text: $commentTxt, isFirstResponder: self.showSubTextField)
Button {
} label: {
Text("Post")
.foregroundColor(Color("SecondaryColor"))
.font(.system(size: 14))
.opacity(0.5)
}
.padding(.trailing, 10)
}
.frame(height: 35)
.overlay(
RoundedRectangle(cornerRadius: 15)
.stroke(Color("SecondaryColor"), lineWidth: 0.25)
)
}
.frame(height: 50)
.padding(.leading, 4)
.padding(.trailing, 4)
.border(Color.blue)
}
.background(Color("PrimaryColorInvert"))
.padding(.trailing, 35)
.offset(y: -self.height)
.animation(.spring())
}
}
.onChange(of: self.clickedOut) { clickedOutNew in
if clickedOutNew == true {
self.showSubTextField = false
}
}
}
}