Динамическая высота обзора аксессуаров в iOS

Всем здравствуйте! Я надеюсь, что у вас все хорошо, поэтому через долгое время я собираюсь начать вести блог о представлении аксессуаров. Если вы знакомы с концепцией вспомогательного представления, вы можете пропустить вводную часть и сразу перейти к практической части ее реализации, и снова, если вы уже реализовали ее в приложениях для чата, вы можете прокомментировать ниже, чтобы попробовать лучший подход. из.

Введение:

Я думаю, вы все используете приложения для чата, такие как Whatsapp или Facebook Messenger. Итак, нет сомнений в том, что вы уже видели вид аксессуаров, но, возможно, не знали, что я

Если вы используете приложения для обмена мгновенными сообщениями, такие как Whatsapp и Facebook Messenger, вы уже видели представление «Аксессуары», хотя, возможно, не знали, что оно так называется.

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

Техническая точка зрения:

Присоединение пользовательского представления к представлению ввода, поставляемому системой, т.е. клавиатура является дополнительным представлением.

Альтернативный способ ввода в приложение чата - разместить представление внизу контроллера представления и изменить его нижнее ограничение на высоту клавиатуры, что не является хорошим подходом для реализации пользовательского интерфейса чата.

Давайте углубимся в практический рецепт 🥙🍗🍤🍽

Итак, как вы все знаете, начните с создания проекта Xcode. Назовите его как хотите и присвойте ему отличный идентификатор Bundle. После этого воспользуйтесь библиотекой GrowingTextView, которая поможет автоматически задать значение высоты текста в textView.

if knowCocoaPods {
   pod ‘GrowingTextView’
} else {
   //Link: https://cocoapods.org/
}

Теперь вставьте tableview внутри viewController, как на следующем изображении:

Теперь создайте новый файл типа UIView (файл .xib) и назовите его ChatAccessory.

и выберите представление xib, перейдите в инспектор атрибутов и измените его размер на произвольный, чтобы вы могли изменить его размер по своему усмотрению.

Теперь создайте представление для ввода текста, как в Whatsapp или Facebook для отправки сообщений. Я собираюсь разработать простой дизайн следующим образом:

Перетащите текстовое представление внутри ChatAccessory View и дайте ему собственный класс GrowingTextView.

а затем перетащите UIButton и примените ограничения к кнопке, например

трейлинг = 0, нижний = 0, высота = 56 (не применяйте верхнее ограничение для просмотра)

затем примените ограничения к текстовому представлению, такие как ведущий = 16, нижний = 8, верхний = 8 и конечный пробел к UIButton из 8

Затем мы должны указать минимальную и максимальную высоту текстовому представлению через инспектор атрибутов.

Обеспечьте высоту кнопки = 56 = минимальная высота аксессуара

textview мин. height = 56- (верхнее ограничение textview + нижнее ограничение textview)

textview мин. высота = 56- (8 + 8) = 40

textview макс. height = 128 (как хотите)

аксессуар вид макс. height = textViewMaxHeight + (верхнее ограничение textview + нижнее ограничение textview)

аксессуар вид макс. высота = 128 + (8 + 8) = 144

Теперь создайте новый .swift ChatAccessory.swift и класс с именем ChatAccessory, расширенный до класса UIView, и присвойте класс владельца файла ChatAccessory.xib

Теперь просто создайте выходы для текстового представления и действия кнопки внутри класса ChatAccessory.

Теперь мы собираемся создать собственный класс для нашей таблицы, который мы вставили в наш контроллер представления ChatTable.swift, расширенный до UITableView и передав этот класс tableview внутри нашего контроллера представления. Теперь мы воспользуемся нашим ChatAccessory внутри, чтобы сделать его входным аксессуаром. Не забудьте указать высоту рамки для аксессуаров чата = макс. высота аксессуара, которую мы вычислили ранее, то есть 144. Добавьте наблюдателей клавиатуры, чтобы настроить вставку нижнего содержимого табличного представления в соответствии с высотой клавиатуры, и на свойстве table клавиатуры отключите интерактивно из инспектора атрибутов раскадровки для плавного UX во время прокрутки нижнего содержимого содержимого.

Наконец, вставьте несколько ячеек внутри таблицы, сделайте вывод представления таблицы в контроллере представления и в viewDidLoad () UIViewController напишите

tableViewOutlet.becomeFirstResponder()

Просмотреть фрагмент кода контроллера:

Теперь вы можете запустить свой код на устройстве или в симуляторе. а вот выходной образец.

На приведенных выше снимках экрана высота дополнительного вида динамически изменяется в соответствии с текстом в текстовом представлении.

Примечание: - если вы хотите представить какой-либо UIAlertController или какое-либо представление в окне ChatViewController, обязательно сначала уволите первого респондента textview внутри accessoryView.

Ссылка на репозиторий Github: - https://github.com/SandeepSpider811/ChatAccessoryView

Если вы нашли эту статью полезной, похлопайте по ней и поделитесь.

Мирные парни 👋 👋👋