Quick Tip: Hiding the Border in iOS Text Fields

The other day Geoff was working an iOS project and asked me if there was a way to hide the border on an iOS Text Field. It turns out that this is pretty easy. Here’s how.

If you go to the iOSTextField page in the Xojo Dev Center, you won’t find a property to hide or change the border. However, that page does have a link to the native iOS control that Xojo uses behind the scenes: UITextField. I clicked that link to get the Apple Dev Center docs for UITextField.

On that page I did a find for the word “border”. This found a section of the doc page with a link to the borderStyle property. I clicked it to see its declaration, shown below:

Objective-C:

@property(nonatomic) UITextBorderStyle borderStyle;

Swift:

var borderStyle: UITextBorderStyle { get set }

These declarations both tell me that borderStyle is essentially a computed property (indicated by the “@property” in Objective-C or the “{get set}” in Swift). I next clicked on UITextBorderStyle to see what value you assign to it and it turns out it is just a series of Integer constants:

none = 0
line =1
bezel = 2
roundedRect = 3

(Xojo uses roundedRect by default for TextField borders.)

I now have enough information to write a simple Declare command to use this property to change the border. But there is one trick to remember. Since this is a computed property you have to alter the property name to include “set” at the beginning and change the case accordingly. (My understanding is that this is because it is really a method behind the scenes.) So the name being called is actually “setBorderStyle”. Since this is referring to a UI control, the library is “UIKit.Framework” and the Declare needs to pass in the handle to the TextField (as a Ptr) and the border style (as an Integer).

The final Declare looks like this:

Declare Sub setBorderStyle Lib "UIKit.Framework" Selector "setBorderStyle:" (obj As Ptr, value As Integer)

You can put that Declare on the Open event of your TextField and the call it with this code:

Const kBorderNone = 0
setBorderStyle(Me.Handle, kBorderNone)

Here is how a TextField looks with and without a border:

Watch the video: