CODEWITHSUNDEEP
iosmaterial-componentsmaterial-components-ios
ThibaultV
ThibaultV

Reputation: 569

[Material Components iOS][TextFields] Add margin between leading view and text field

I'm using in my app the TextFields component of Google's Material Components library.

As you can see in the following screenshot, the text input is way too close of the leadingView. How can I add some margin between them?

Here's the code I'm using to create this text field:

emailTextField.translatesAutoresizingMaskIntoConstraints = false
emailTextField.delegate = self
emailTextField.leadingView = UIImageView(image: UIImage(named: "MailIcon"))
emailTextField.leadingViewMode = .always

emailTextFieldController = MDCTextInputControllerUnderline(textInput: emailTextField)
emailTextFieldController?.placeholderText = "Email"

Upvotes: 2

Views: 1926

Answers (1)

Will Larche
Will Larche

Reputation: 3149

The underline style text field is not a recommended design anymore. And the original design didn't specify a padding constant for the leading view. Consider changing to the filled controller which has been shown to perform much better in user research studies.

If you have to stick with underline, getting your desired layout is pretty easy.

  1. Make sure you're on the latest version of MaterialComponents. This could mean you need to run pod update MaterialComponents if you're using CocoaPods.
  2. Subclass MDCTextInputControllerUnderline.
  3. Override the property leadingViewTrailingPaddingConstant and return whatever padding you'd like. In Objective-C, this would look like:

- (CGFloat)leadingViewTrailingPaddingConstant { return 16.f; }

  1. Set your text fields to use the new class you've made.

Incidentally, we just pushed the ability to change the clear button's color easily. You can set it to match the underline and text by setting the property textInputClearButtonTintColor.

Upvotes: 1

Related Questions