Предыстория и краткий рассказ по этой теме

Как новички в изучении разработки приложений для iOS, мы должны были знать или узнали о создании представлений с использованием раскадровок и автоматических макетов. В первый раз, когда я узнал о том, как создать приложение для iOS, я научился использовать раскадровки, включая настройку макетов для компонентов в представлении. Однако вы должны знать, что использование раскадровки очень неэффективно для реализации в достаточно больших проектах, особенно если работа выполняется в команде. Используя раскадровку, нам будет сложно объединять и разрешать конфликты при совместной работе, сложно ориентироваться, сложно рефакторить код и многое другое.

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

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

Для этого здесь я хочу поделиться способом сделать это, объяснив это через реализацию, которую я сделал в проекте моей команды.

О проекте моей команды

Итак, это приложение, которое я и моя команда создали, называется «Healo».
Healo — это приложение для анонимного общения в чате для iOS, которое связывает людей, пытающихся исцелиться от родительских ран (называемых Искателями), с кем-то, кто может слушать истории, которыми они делятся, и напоминает им о необходимости сохранять мотивацию к самовосстановлению (называемых Слушателями). ).

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

На самом деле нам нужно создать только одну страницу оценивания, но содержимое ярлыка на этой странице будет содержать различный текст, а также различаться в зависимости от номера вопроса. Это описание и сам вопрос взяты из базы данных, а не записаны напрямую и не хранятся в проекте Xcode. Поэтому, конечно, содержание текста и количество слов тоже будут различаться.

На самом деле мы можем сделать наш внешний вид аккуратным, не выполняя определенные настройки в представлении. Мы можем сделать это, настроив его на текстовые данные, которые мы извлекаем из базы данных, добавив \n для определенного текста, который должен быть в новой строке, например, «Привет, \nя люблю программирование». Но это очень неудобно, если много текста, который требует этих дополнений и нам всегда приходится делать это вручную.

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

Реализация проекта

Чтобы использовать библиотеку SnapKit, прежде чем мы начнем работать над проектом, убедитесь, что у нас установлены CocoaPods. ( Вот руководство по установке CocoaPods. )

После того, как мы уже установили CocoaPod, вот шаг за шагом, как установить SnapKit:
1. Мы должны перейти в папку нашего проекта Xcode и открыть терминал оттуда (щелкните правой кнопкой мыши + выберите «Новый терминал в папке»).
2. Как только терминал откроется, мы напечатаем «pod init», и он создаст новый файл pod в нашей папке.

3. Откройте этот подфайл и введите следующее:

Затем сохраните подфайл

4. Вернитесь к терминалу и введите «pod install». Если ошибок нет, это означает, что SnapKit успешно установлен.

5. Откройте файл Xcworkspace и начните кодить там.

Вы также можете прочитать дополнительные пояснения по установке SnapKit здесь .

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

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

Во- вторых , нам просто нужно объявить нашу метку внутри класса нашего контроллера представления (для этого проекта я все еще создаю представления внутри контроллеров представления, а не в отдельных файлах, специально предназначенных для каждого представления). Во время объявления метки самое главное, что вы не должны забывать, это добавить label.numberOfLines = 0 и label.lineBreakMode = .byWordWrapping.

Для чего вообще нужны эти вещи?

Основываясь на том, что я прочитал в документации Apple, я могу поделиться этим:

Количество строк фактически используется для управления максимальным количеством строк, используемых для размещения текста метки в его ограничивающем прямоугольнике. Если мы установим значение 0, это означает, что нет ограничений на количество строк, и мы можем использовать столько строк, сколько необходимо, в зависимости от содержания текста.

Режим разрыва строки фактически используется для переноса и усечения текста метки. Доступны некоторые режимы, но наиболее часто используемый режим — NSLineBreakMode.byWordWrapping. Если мы используем этот режим, следующее слово будет вырезано / перемещено на новую строку, если слово не помещается в 1 строку.

Вы можете прочитать больше об этом в Документации Apple для разработчиков: Объяснение количества строк и Объяснение режима разрыва строки .

Далее мы можем создать 3 функции, такие как setupData, setupView и setupLayout. Вот что внутри каждой функции (я не показываю подробно, просто показываю то, что актуально):

1. Функция настройки данных:

2. функция setupView:

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

3. функция setupLayout:

Внутри этой функции мы можем установить макет метки так, чтобы метка находилась в правильном положении (как мы хотим).

Вот как установить макет с помощью SnapKit:
1. Введите имя компонента, для которого мы хотим установить макет. В этом случае я хочу указать макет на метке themeDesc. Вот код:

}

2. Запишите все ограничения, которые мы хотим. В этом случае я хочу, чтобы метка TopicDesc располагалась ниже заголовка темы (на расстоянии 21 пикселя от нижнего заголовка темы). Вот код:

topicDesc.snp.makeConstraints { make in
make.top.equalTo(topicTitle.snp.bottom).offset(21)
}

Я также хочу, чтобы позиция метки themeDesc находилась на расстоянии 27 пикселей слева и справа от супервизора. Вот код:

topicDesc.snp.makeConstraints { make in
make.top.equalTo(topicTitle.snp.bottom).offset(21)
make.left.equalToSuperview().offset(27)
make.right.equalToSuperview().offset(-27)
}

Несколько дополнительных советов по использованию SnapKit:

Значение смещения должно быть > 0 для верхнего и левого/ведущего отступов.
Значение смещения должно быть < 0 для нижнего и правого/конечного заполнения.

Мы можем использовать inset для кода в одной строке, если расстояние равно, например:
topicDesc.snp.makeConstraints { make in
make.left.right.equalToSuperview().inset(27)
}

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

Потрясающий! Наконец-то мы узнали, как автоматически вставлять новые строки для метки в соответствии с текстовым содержимым и устанавливать макет с помощью SnapKit в приложениях для iOS. Использование самого SnapKit очень помогло мне при верстке при работе над моим проектом, и вы тоже можете попробовать его. Если вам интересно и вы хотите узнать больше о SnapKit, вы можете прочитать об этом здесь ).

Кроме того, если вам интересно и вы хотите узнать больше о проекте моей команды (Healo), вы можете протестировать наше приложение на Testflight ( Нажмите здесь, чтобы протестировать наше приложение ).

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

© 2022 Эльвина Джасия. Все права защищены.