Swiftpack.co - Package - franklynw/InputAccessoryTextField

Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.

franklynw/InputAccessoryTextField

SwiftUI TextField replacement which offers an input accessory view & other customisation options

InputAccessoryTextField

A (almost) drop-in replacement for SwiftUI's TextField, but with a customisable input accessory view. A significant part of this is based on work by Swift Student - SwiftUI InputAccessoryView - but I've removed the need for an accessoryViewController instance in the containing view, and added quite a bit in the way of customisation options for the consumer.

Example 1

Installation

Swift Package Manager

In Xcode:

Example

NB: All examples require import InputAccessoryTextField at the top of the source file

The only additional requirement for using an InputAccessoryTextField instead of a TextField is that the containing view conforms to Identifiable, with a String id.

var body: some View {

    InputAccessory.TextField(parentView: self, tag: 1, text: viewModel.searchTerm)
        .returnKey(type: .search) {
            viewModel.beginSearch()
        }
        .foregroundColor(Color(viewModel.titleColor))
        .disableAutocorrection(!viewModel.autocorrect)
        .autocapitalization(viewModel.itemCapitalizationPolicy)
        .startInput()
}

To use with the "previous" and "next" buttons on the accessory view, each textField in the view needs to have a unique tag. Pressing "next" will show the field with the next-highest tag, pressing "previous" will show the field with the next lowest. If there is only one textField, these buttons will be hidden.

There are some additional features apart from the input accessory view -

Placeholder

You can set the textField's placeholder text. The placeholder is an Enum case, "PlaceHolder", which allows for a normal String - .text("My placeholder") - or an attributed string - .attributed(myNSAttributedString), which lets you specify colour, etc

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .placeholder(.text("Enter search text"))

or

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .placeholder(.attributed(viewModel.attributedPlaceholder))

Font

You can set the textField's font using either a UIFont, or with Font.TextStyle & Font.Weight

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .font(UIFont.systemFont(ofSize: 18, weight: .semibold))

or

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .font(.title, weight: .semibold)

Text colour

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .foregroundColor(.red)

Background colour

Set the background colour of the textField

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .backgroundColor(.lightGray)

ToolBar background colour

Set the background colour of the textField's input accessory view ToolBar

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .toolBarColor(.lightGray)

or using the static var (once per view rather than for each textField) -

InputAccessory.barColor = .purple

ToolBar tint colour

Set the colour of the textField's input accessory view buttons

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .toolBarTintColor(.darkGray)

or using the static var (once per view rather than for each textField) -

InputAccessory.barTintColor = .green

Keyboard Type

You can set the keyboard type -

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .keyboardType(.numberPad)

Return Key Type

You can set the return key type and its action -

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .returnKey(type: .search) {
        viewModel.beginSearch()
    }

Show the "Clear" button (while editing)

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .showsClearButton

Autocorrection

Autocorrection can be switched on or off -

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .disableAutocorrection(!viewModel.autocorrect)

Autocapitalisation

The autocapitalisation policy can be set -

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .autocapitalization(viewModel.autocapitalizationPolicy)

Set the insets (the padding around the text within the textField)

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .insets(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))

Become first responder

You can make the textField automatically become the first resonder (ie, it brings up the keyboard as soon as it appears) -

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .startInput()

The modifier can also take a Bool parameter to base its behaviour on another property.

Resign first responder

Adding this modifier & passing in true will resign the first responder from the tagged InputAccessoryTextField which is currently the first responder

InputAccessory.TextField(parentView: self, tag: 1, text: viewModel.searchTerm)
    .endInput(shouldEndInput)

Customise the "Done" button on the input accessory view

Pass in a system image name to use that for the button. You can also set the action to be invoked when the button is pressed, in addition to it dismissing the keyboard. If no image is specified, it will default to "keyboard.chevron.compact.down"

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .toolBarDoneButton("rectangle.and.pencil.and.ellipsis") {
        // do something
    }

You can also use the static var (once per view rather than for each textField) to set the done button image -

InputAccessory.dismissKeyboardButtonSystemImageName = "checkmark"

Hide the accessory view

Sometimes you may want to hide the accessory view, while still keeping all the other features of the InputAccessoryTextField -

InputAccessory.TextField(parentView: self, text: viewModel.searchTerm)
    .hideToolBar

Dependencies

Requires FWCommonProtocols, which is linked. GitHub page is here

License

InputAccessoryTextField is available under the MIT license

Github

link
Stars: 0
Last commit: 1 week ago