Floating UILabel on UITextField with custom border

Question

I'm basically trying to create a UITextField which, when the user has typed something, shows the placeholder text in a UILabel pretty much on the top border.

I've managed to get the UILabel into position with animations and everything, except the UITextField's border is running through the UILabel when I give it (the border) a custom colour and width. If I leave the standard RoundedRect border, without giving borderColor or borderWidth, it all works perfectly. I need the colour though :/

(Ignore the red background - doing it for visibility)

Custom borderColor goes through label

And this is with no custom border (see - no border through the UILabel 👏)

So yeah - any help would be appreciated. Thanks 😀🙏

Answer 1

Thanks everyone for the answers 🙏 Been sitting with this for ages and 2 hours after I resort to posting here, I figure it out. Typical.

I was specifically trying to make a subclass of UITextField so I can reuse it all over the place without much hassle. That's why I didn't want to make a UIView which contained UITextField and UILabel as subviews - I'd then have to do that every time... Not ideal.

So after digging into the view hierarchy of a UITextField, it turns out there is a subview _UITextFieldRoundedRectBackgroundViewNeue which is always first and it is the one which holds the roundedRect border. Adding a custom border via layer.border actually adds it on the frame - on top of the entire view hierarchy. That's why it would rule infront of the UILabel.

So what I did was apply a layer.border to that _UITextFieldRoundedRectBackgroundViewNeue, essentially forcing the border to always be at the bottom, behind everything.

I'd suggest anyone doing this do a check if subviews[0].classForCoder.description() == "_UITextFieldRoundedRectBackgroundViewNeue" just to make sure it's actually there and to make sure you're not adding a border to a random subview you don't expect. 😊

Now, adding a UILabel to the actual UITextField object, with a white background, will give the effect of a floating label. Sweet. 🥳