UMI aka Unity Mobile Input

Этот пакет позволяет использовать нативные поля ввода на Android и iOS. Он работает в паре с компонентом TMP InputField и использует некоторые его настройки. Даёт возможность полноценно использовать такие функции как выделение, копирование, вставка, ввод эмоджи и другие встроенные функции.

История этого плагина началась когда я начал изучать Unity 😅 а это год 2015–2016. С тех пор практически ничего не поменялось для мобильных разработчиков. И это грустно.

Проблема

Текущая реализация мобильного поля ввода в Unity не позволяет полноценно использовать все возможности, такие как выделение, копирование, вставка, ввод эмоджи и другие встроенные функции. Будет ли это в какой-то версии Unity «из коробки» — пока не известно.

Решение

Этот плагин создаёт нативные поля ввода поверх UI канваса со всеми функциями платформы. Т.к. это хак и поля ввода расположены поверх всего UI, вам необходимо самостоятельно контролировать их видимость и позицию. Для этого в плагине есть несколько полезных функций.

Особенности

  • нативное поле ввода и клавиатура для iOS и Android
  • настройка типа кнопки: Стандартная, Далее, Готово, Поиск, Отправить
  • настройка обработки кнопки
  • настройка кнопок Готово и Очистить (iOS)
  • изменение опций поля ввода во время выполнения
  • скрытие дополнительного поля ввода (Android)
  • отслеживание появления и скрытия клавиатуры (с высотой)
  • отслеживание ориентации экрана
  • установка языка клавиатуры для поля ввода
  • поддержка пользовательских шрифтов

Установить можно как пакет, через Package Manager или скачать со страницы релизов и добавить в проект.

К сожалению UMI не будет работать если включена опция Render Over Native UI.

Настройка

Для начала использования UMI в вашем проекте, добавьте скрипт MobileInputField на объект с полем ввода TMP Input field.

В инспекторе вы можете редактировать некоторые опции которые будут применены к нативному полю ввода:

  • цвет текста
  • цвет текста подсказки
  • цвет курсора/каретки
  • цвет выделения текста (Android)
  • текст подсказки
  • лимит символов
  • размер шрифта
  • положение текста
  • тип поля ввода
  • тип клавиатуры
  • многострочность

UMI также позволяет дополнительно настраивать:

  • цвет фона
  • тип кнопки
  • обработку кнопки
  • свой шрифт
  • язык клавиатуры при инициализации
  • управление скрытием клавиатуры
  • кнопки «Готово» и «Очистить»

Если вам нужно отслеживать появление или скрытие клавиатуры, то необходимо подписаться на событие и добавить обработчик в ваш код.

using UnityEngine;
using UMI;

public class Bootstrap : MonoBehaviour {

    void Awake() {
        MobileInput.Init();
        MobileInput.OnKeyboardAction += OnKeyboardAction;
        MobileInput.OnOrientationChange += OnOrientationChange;
    }

    void OnOrientationChange(HardwareOrientation orientation) {
        // вызывается когда меняется ориентация экрана
    }

    void OnKeyboardAction(bool isShow, int height) {
        // вызывается когда клавиатура появляется или скрывается, или когда изменяется её высота
    }
    
}

При использовании события OnKeyboardAction вы можете контролировать UI элементы, например, сдвигать вверх поле ввода как мессенджерах. Смотрите демо.

Runtime методы

  • SetTextColor – изменение цвета текста
  • SetPlaceholderColor – изменение цвета текста подсказки
  • SetBackgroundColor – изменение цвета фона
  • SetContentType – изменение типа поля ввода
  • SetReadonly – изменение состояния «только для чтения»
  • SetLanguage – изменение языка клавиатуры
  • SetCaret – установка позиции курсора

Как использовать свои шрифты

  1. Скопируйте TTF шрифты в папку StreamingAssets
  2. Измените название шрифта в инспекторе вместо default
  3. Пользуйтесь

При первой инициализации UMI скопирует шрифты в специальную пользовательскую папку приложения. Если вы меняете шрифт(ы) при обновлении, то вам необходимо вызвать метод MobileInput.UpdateFonts() чтобы обновить шрифты в этой папке.

Документация

Вся небольшая документация есть на Github. Рекомендую скачать демо и посмотреть как инициализировать и использовать UMI в вашем приложении, как создать экран по типу мессенджера и как использовать свои шрифты.

Если у вас не пояляется нативное поле ввода или не устанавливается свой шрифт — ещё раз прочитайте Readme файл и посмотрите как сделана демка и какой там манифест.

Все исходники доступны на Github