As I am a newbie to iOS development and have been learning through tinkering with code via projects on youtube, I am building a chat capability into my current app. I have used the class talked about on this youtube video for addressing the UITextField and Keyboard Avoidance. However, my code is not exactly working as it should and every time the user presses the UITextField, instead of having iMessage-like functionality (the keyboard pops up only to the height necessary and doesn't move the UITextField up only necessary), I somehow get the below:
I don't the UITextField to pop up to the top like that but only that which is necessary (kinda like what the first gif is on this blog. As you can see, the UITextField is covering the whole view. My code is posted below:
//ChatView.swift
import SwiftUI
import Firebase
import Alamofire
import SwiftyJSON
struct ChatUIView: View {
@State var message = ""
//StateObject is the owner of the object...
@StateObject var allMessages = Messages()
@StateObject private var keyboardHandler = KeyboardHandler()
var body: some View {
VStack{
ZStack{
/*
HStack{
Spacer()
}*/
VStack(spacing:5){
Text("Chat")
.fontWeight(.bold)
}
.foregroundColor(.white)
}
.padding(.all)
//Spacer()
VStack{
//Spacer()
//Displaying Message...
ScrollView(.vertical, showsIndicators: false, content: {
ScrollViewReader{reader in
VStack(spacing: 20){
ForEach(allMessages.messages){msg in
//Chat Bubbles...
ChatBubble(msg: msg)
}
//whenever new data is inserted, scroll to bottom...
.onChange(of: allMessages.messages) {(value) in
//scrolling only user message...
if value.last!.myMsg{
reader.scrollTo(value.last?.id)
}
}
}
.padding([.horizontal, .bottom])
.padding(.top, 25)
}
})
HStack(spacing:15){
HStack(spacing: 15){
TextField("Message", text: self.$message)
}
.padding(.vertical, 12)
.padding(.horizontal)
.background(Color.black
.opacity(0.06)
.clipShape(Capsule())
)
//.clipShape(Capsule())
//send button
//hiding view...
if message != ""{
Button(action: {
//appending message...
//adding animation...
withAnimation(.easeIn){
allMessages.messages.append(Message(id: Date(), message: message, myMsg: true))
}
}, label: {
Image("send")
.resizable()
.frame(width: 25, height: 25)
.rotationEffect(.init(degrees: 45))
.padding()
//.aspectRatio(contentMode: .fit)
//.font(.system(size: 0.5))
//.padding(.all)
.background(Color.black.opacity(0.07))
.clipShape(Circle())
})
}
}
.padding(.horizontal)
.animation(.easeOut)
.padding(.bottom, keyboardHandler.keyboardHeight)
}
.padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom)
.background(Color.white)
//.clipShape(RoundedShape())
.clipShape(Rectangle())
.keyboardType(.default)
}
//.edgesIgnoringSafeArea(.bottom)
.background(Color.blue.edgesIgnoringSafeArea(.top))
}
}
//Chat Bubbles...
struct ChatBubble : View {
var msg : Message
var body: some View{
//Automatics scroll to bottom...
//First assigning id to each row
HStack(alignment: .top, spacing: 10){
if msg.myMsg{
//pushing msg to the left...
//minimum space ...
Spacer(minLength: 25)
Text(msg.message)
.padding(.all)
.background(Color.black.opacity(0.06))
//.cornerRadius(15)
.clipShape(BubbleArrow(myMsg: msg.myMsg))
} else {
//pushing msg to the right...
Text(msg.message)
.fixedSize(horizontal: false, vertical: true)
.lineLimit(nil)
.foregroundColor(.white)
.padding(.all)
//.background(Color.black.opacity(0.06))
.background(Color.blue)
.clipShape(BubbleArrow(myMsg: msg.myMsg))
Spacer(minLength: 25)
}
}
.id(msg.id)
//.padding(msg.myMsg ? .leading : .trailing, 55)
//.padding(.vertical,10)
}
}
// Bubble Arrow...
struct BubbleArrow : Shape {
var myMsg : Bool
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: myMsg ? [.topLeft, .bottomLeft, .bottomRight] : [.topRight, .bottomLeft, .bottomRight], cornerRadii: CGSize(width: 10, height: 10))
return Path(path.cgPath)
}
}
// Custom Rounded Shape...
/*
struct RoundedShape : Shape {
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(roundedRect: rect, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize())
return Path(path.cgPath)
}
}*/
// Model Data For Message...
struct Message : Identifiable, Equatable {
var id: Date
var message: String
var myMsg: Bool
//var profilePic: String
//var photo: Data?
}
class Messages: ObservableObject {
@Published var messages : [Message] = []
//sample data...
init() {
let strings = ["Hi!", "hello!", "How are you doing?!", "Fine, I just want to talk about life", "ok, I may be able to help with that", "This is awesome, thanks", "So what do you want to talk about?", "movies sound like a good topic. Let's start there!", "Ok, so tell me: What's you favorite movie?", "Definitely, interstellar for sure."]
for i in 0..<strings.count{
//simple logic for two sided message View...
messages.append(Message(id: Date(), message: strings[i], myMsg: i % 2 == 0 ? false : true))
}
}
func writeMessage(id: Date, msg: String, photo: Data?, myMsg: Bool){
messages.append((Message(id: id, message: msg, myMsg: myMsg)))
}
}
//KeyBoardHandlerClass.swift
import Combine
import SwiftUI
final class KeyboardHandler: ObservableObject {
@Published private(set) var keyboardHeight: CGFloat = 0
private var cancellable: AnyCancellable?
private let keyboardWillShow = NotificationCenter.default
.publisher(for: UIResponder.keyboardWillShowNotification)
.compactMap { ($0.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect)?.height }
private let keyboardWillHide = NotificationCenter.default
.publisher(for: UIResponder.keyboardWillHideNotification)
.map {_ in CGFloat.zero }
init() {
cancellable = Publishers.Merge(keyboardWillShow, keyboardWillHide)
.subscribe(on: DispatchQueue.main)
.assign(to: \.self.keyboardHeight, on: self)
}
}
Any help would be greatly appreciated!
