InputBarAccessoryView Documentation

repository·master·Indexed 23 days ago

https://github.com/nathantannar4/inputbaraccessoryview

A customizable iOS component for chat applications providing a sophisticated input bar with self-sizing text views, autocomplete support via AutocompleteManager, and attachment management via AttachmentManager. It features reactive hooks for InputBarButtonItem and supports iOS 14.0+ with Swift 6 (version 7.0.6), with legacy support available for iOS 11 through 13.

Tokens
2K
Snippets
2
Records
13
Agent score
79%

What's inside InputBarAccessoryView

  1. Understand the InputBarAccessoryView layout

    master

    The InputBarAccessoryView layout consists of four InputStackViews and one InputTextView:

    • Top/Bottom/Left/Right InputStackViews: Act as toolbars for placing buttons.
    • InputTextView: A self-sizing text view (can be replaced with any other view).

    Padding: You can adjust the layout by changing the padding and textViewPadding properties; constraints update automatically.

    Stack View Widths: The left and right InputStackViews are anchored by width constraints. This allows the InputTextView to fill the remaining space. You can hide all buttons to the left or right by setting their width constraint constant to 0.

    func setLeftStackViewWidthConstant(to newValue: CGFloat, animated: Bool)
    
    func setRightStackViewWidthConstant(to newValue: CGFloat, animated: Bool)
  2. Install InputBarAccessoryView via Swift Package Manager

    master

    You can add InputBarAccessoryView to your project using the Swift Package Manager (SPM).

    Option 1: Package.swift Add the dependency to your Package.swift file:

    Option 2: Xcode SPM Editor Use the following URL in the Xcode dependency manager: https://github.com/nathantannar4/InputBarAccessoryView.git

    dependencies: [
        .package(url: "https://github.com/nathantannar4/InputBarAccessoryView.git", .upToNextMajor(from: "6.0.0"))
    ]
  3. Implement Autocomplete using AutocompleteManager

    master

    To add autocomplete functionality to your InputBarAccessoryView, use the AutocompleteManager. You must initialize it with the inputTextView of your input bar and assign a delegate and data source.

    Setup Steps:

    1. Initialize: Create an AutocompleteManager instance for inputBar.inputTextView.
    2. Configure Prefixes: Use register(prefix:with:) to define how specific prefixes (like @ or #) should be styled when matched.
    3. Register Plugin: Add the manager to the inputBar.inputPlugins array.
    4. Implement Data Source: Provide completions via autocompleteManager(_:autocompleteSourceFor:).
    5. Implement Delegate: Handle visibility changes via autocompleteManager(_:shouldBecomeVisible:) to show/hide the autocomplete table view.
  4. Use AttachmentManager to display content

    master

    The AttachmentManager allows you to display images, URLs, or other data above the InputTextView.

    Attachment Types Attachments are defined via the Attachment enum:

    • .image(UIImage)
    • .url(URL)
    • .data(Data)
    • .other(AnyObject)

    Customization

    • isPersistent: If true, the manager is always visible (default: false).
    • showAddAttachmentCell: Determines if the AddAttachmentCell is visible (default: true).

    Managing Attachments

    • insertAttachment(_:at:): Performs an animated insertion of an attachment at a specific index.
    • removeAttachment(at:): Performs an animated removal of an attachment at a specific index.
  5. Use Reactive Hooks with InputBarButtonItem

    master

    Each InputBarButtonItem supports reactive hooks that allow you to execute actions during specific lifecycle events. This is useful for creating animated or responsive UI elements (e.g., similar to Facebook Messenger).

    Available action hooks include:

    • ontouchUpInsideAction: Triggered when the button is touched.
    • onKeyboardEditingBeginsAction: Triggered when keyboard editing begins.
    • onKeyboardEditingEndsAction: Triggered when keyboard editing ends.
    • onKeyboardSwipeGestureAction: Triggered on swipe gestures.
    • onTextViewDidChangeAction: Triggered when the InputTextView text changes.
    • onSelectedAction / onDeselectedAction: Triggered on selection state changes.
    • onEnabledAction / onDisabledAction: Triggered when the button's enabled state changes.
  6. Use InputBarButtonItem in InputStackView

    master

    When adding buttons to an InputStackView, it is recommended to use InputBarButtonItem. The stack view uses the button's intrinsicContentSize to layout arranged views. If extra space is available, views expand based on their content hugging UILayoutPriority.

    Customizing Size and Spacing

    • Size: You can override the intrinsicContentSize by setting the size property. Setting it to nil reverts to the superclass's intrinsic size.
    • Spacing: Use the spacing property to adjust layout. Setting it to .fixed(CGFloat) changes the content hugging UILayoutPriority and adds extra space to the intrinsicContentSize.
  7. Implement AttachmentManagerDataSource and Delegate

    master

    To customize how attachments are displayed and when they appear, implement these protocols:

    AttachmentManagerDataSource

    • attachmentManager(_:cellFor:at:): Return an AttachmentCell for a specific Attachment at a given index.

    AttachmentManagerDelegate

    • attachmentManager(_:shouldBecomeVisible:): Return a Bool to determine if the AttachmentManager should be inserted into the InputStackView.
  8. Implement AutocompleteManagerDataSource and Delegate

    master

    To provide custom data and control visibility for autocomplete, implement the following protocols:

    AutocompleteManagerDataSource

    • autocompleteManager(_:autocompleteSourceFor:): Return an array of [AutocompleteCompletion] for a given prefix.
    • autocompleteManager(_:tableView:cellForRowAt:for:): Provide a custom UITableViewCell to populate the AutocompleteTableView.

    AutocompleteManagerDelegate

    • autocompleteManager(_:shouldBecomeVisible:): Return a Bool to determine if the autocomplete interface should be inserted into the view.
  9. Configure AutocompleteManager

    master

    The AutocompleteManager handles the logic and views for autocomplete functionality. You can customize its behavior by setting properties on the manager instance or by subclassing it and assigning it to the InputBarAccessoryView's autocompleteManager property.

    Key customization properties include:

    • isCaseSensitive: Determines if matches are case-sensitive (default: false).
    • appendSpaceOnCompletion: If true, adds a space after the autocompleted text (default: true).
    • keepPrefixOnCompletion: If true, keeps the typed prefix when text is autocompleted (default: true).
    • autocompletePrefixes: An array of Character values that trigger autocomplete (default: ["@"]).
    • autocompleteDelimiters: Characters that invalidate the current autocomplete session (default: [" ", "\n"]).
    • defaultTextAttributes: NSAttributedStringKey dictionary for default text styling.
    • autocompleteTextAttributes: A dictionary mapping a Character (prefix) to its specific NSAttributedStringKey attributes for highlighting.
  10. Implement InputBarAccessoryViewDelegate

    master

    Implement InputBarAccessoryViewDelegate to respond to user interactions and layout changes within the input bar:

    • inputBar(_:didPressSendButtonWith:): Called when the user taps the send button. Provides the current text.
    • inputBar(_:didChangeIntrinsicContentTo:): Called when the intrinsic content size changes. Useful for updating UICollectionView or UITableView bottom insets.
    • inputBar(_:textViewTextDidChangeTo:): Called when the text in the input text view changes.
    • inputBar(_:didSwipeTextViewWith:): Called when a swipe gesture is recognized on the text view.
  11. AutocompleteManagerDelegate Protocol

    master

    Implement AutocompleteManagerDelegate to manage the lifecycle and visibility of the autocomplete UI.

    Methods:

    • autocompleteManager(_:shouldBecomeVisible:): Called when the autocomplete interface should be shown or hidden. You typically respond to this by inserting or removing the manager's tableView from the inputBar.topStackView and calling inputBar.invalidateIntrinsicContentSize().