RxSwift : How to autoresize sublayer with view's resizing - swift

Question

I'm learning RxSwift.
I added a border as CALayer to TextField. I would like to make this border reactively auto-resized as the textField is expanded (inputView changed to pickerView so I wish it could be resized by selecting titles)
I tried .rx.observe(CGRect.self, "frame") but it doesn't work properly.
extension UITextField {
func addBorderBottom(height: CGFloat, color: UIColor, width: CGFloat){
let border = CALayer()
border.frame = CGRect(x: 0, y: self.frame.height - height, width: width, height: height)
border.backgroundColor = color.cgColor
self.layer.addSublayer(border)
}
}
// viewContrller
func listDetailUISetup() {
let yellowColor = UIColor.hex(string: "FFB500", alpha: 1)
tagTextField.addBorderBottom(height: 1.0, color: yellowColor, width: tagTextField.frame.width)
}
//
picker.rx.modelSelected(String.self)
.subscribe(onNext: { tags in
self.tagTextField.text = tags[0]
})
.disposed(by: disposeBag)
tagTextField.rx.observe(CGRect.self, "frame")
.subscribe(onNext: { frame in
print("field frame changed")
let layer = self.tagTextField.layer.sublayers![0]
layer.frame = frame!
})
.disposed(by: disposeBag)
In a second way, I also tried to manually re-set a border after removing the previous one when a title in the pickerView is selected. But apparently, the width of the item selected at the previous time is reflected.
initial width
All's width
Favourite's width
icker.rx.modelSelected(String.self)
.subscribe(onNext: { tags in
self.tagTextField.text = tags[0]
self.tagTextField.layer.sublayers = nil
self.listDetailUISetup()
})
.disposed(by: disposeBag)
Hopefully, you could help to resolve this issue.
Thank you.

Answer 1

The frame property on a UIView is not KVO observable, so you can't observe it. The text field's layoutSubviews method is called whenever it changes size though so you can use that.
extension UIView {
func addDynamicBorderBottom(height: CGFloat, color: UIColor) -> Disposable {
let border = CALayer()
border.frame = CGRect(x: 0, y: frame.height - height, width: frame.width, height: height)
border.backgroundColor = color.cgColor
layer.addSublayer(border)
return rx.methodInvoked(#selector(UIView.layoutSubviews))
.bind(onNext: { [frame] _ in
border.frame = CGRect(x: 0, y: frame.height - height, width: frame.width, height: height)
})
}
}
But you would be better off making your border a UIView and setting up constraints to ensure it stays the right size.