Text overlapping with custom button in TextView swift - swift

Question

Problem: Im trying to build a "comment" component to my app. I have managed to create a textview that expands as more text gets typed, and also created a button within the textview that will stay top right corner at all times. However when i write text, the text will go under the button and is not visible. What i want is that the text does not overlap the button, and instead just stays away from the button.
Question
How can i achieve this ?
This is my code:
class ClickedOnPostViewController: UIViewController, UITextFieldDelegate, UITextViewDelegate {
var answersOf: Answer?
#IBOutlet weak var tableView: UITableView!
#IBOutlet weak var commentText: UITextView!
override func viewDidLoad() {
super.viewDidLoad()
commentText.translatesAutoresizingMaskIntoConstraints = false
[
commentText.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
commentText.leadingAnchor.constraint(equalTo: view.leadingAnchor),
commentText.trailingAnchor.constraint(equalTo: view.trailingAnchor),
commentText.heightAnchor.constraint(equalToConstant: 43)
].forEach{ $0.isActive = true }
commentText.addSubview(button)
button.heightAnchor.constraint(equalToConstant: 50).isActive = true
button.widthAnchor.constraint(equalToConstant: 100).isActive = true
button.topAnchor.constraint(equalTo: commentText.topAnchor).isActive = true
button.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
view.bringSubview(toFront: button)
commentText.delegate = self
commentText.isScrollEnabled = false
//Keyboard listeners
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow(notification:)), name: NSNotification.Name.UIKeyboardDidShow, object: nil)
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide(notification:)), name: NSNotification.Name.UIKeyboardDidHide, object: nil)
// qNotificationCenter.default.addObserver(self, selector: #selector(keyboardWillChange(notification:)), name: NSNotification.Name.UIKeyboardWillChangeFrame, object: nil)
// Do any additional setup after loading the view.
}
let button: UIButton = {
let button = UIButton(type: .system)
button.backgroundColor = .orange
button.setTitle("Click Me", for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
#objc func keyboardWillShow(notification: NSNotification) {
if let keyboardSize = (notification.userInfo?[UIKeyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue {
if self.view.frame.origin.y == 0 {
self.view.frame.origin.y -= keyboardSize.height
}
}
}
#objc func keyboardWillHide(notification: NSNotification) {
if self.view.frame.origin.y != 0 {
self.view.frame.origin.y = 0
}
}
#IBAction func refresh(_ sender: Any) {
}
func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
if text == "\n" {
commentText.resignFirstResponder()
return false
}
return true
}
func textViewDidChange(_ textView: UITextView) {
let size = CGSize(width: view.frame.width, height: .infinity)
let estimatedSize = textView.sizeThatFits(size)
textView.constraints.forEach { (constraints) in
if constraints.firstAttribute == .height {
constraints.constant = estimatedSize.height
}
}
}
}
UPDATE issues with Sh_Khan current answer:
Before typing the last character that will overlap button
After typing the last character that will overlap button

Answer 1

You need
commentText.translatesAutoresizingMaskIntoConstraints = false
button.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(commentText)
view.addSubview(button)
NSLayoutConstraint.activate([
commentText.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
commentText.leadingAnchor.constraint(equalTo: view.leadingAnchor),
commentText.heightAnchor.constraint(equalToConstant: 43),
button.heightAnchor.constraint(equalToConstant: 50),
button.widthAnchor.constraint(equalToConstant: 100),
button.topAnchor.constraint(equalTo: commentText.topAnchor),
button.trailingAnchor.constraint(equalTo: view.trailingAnchor),
button.leadingAnchor.constraint(equalTo: commentText.trailingAnchor,constant:20)
])
commentText.delegate = self
commentText.isScrollEnabled = false
Don't mix RTL with LTR logic in your case using rightAnchor with trailingAnchor
If the UI of comment textfield is build in storyboard / xib , don't set constraints for it again
to have the width of textView = 80% , remove this
button.heightAnchor.constraint(equalToConstant: 50),
and add this
commentText.widthAnchor.constraint(equalTo: view.widthAnchor,multiplier:0.8,constant:-20),