Как динамически тематизировать свое приложение Ionic и сделать своих пользователей счастливыми

1656621736 kak dinamicheski tematizirovat svoe prilozhenie ionic i sdelat svoih polzovatelej

автор Райан Гордон

Разработка элегантной цветовой схемы для мобильного приложения может занять много времени. Почему бы не разрешить пользователю выбрать свою любимую тему?

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

1*mCKTtAbjsDbmijNnIQPI6Q
Прекрасный пример динамических тем в приложении ToDoist

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

Установка и начало работы

Ionic, если вы не использовали его раньше, – это фреймворк для мобильных приложений, позволяющий писать мобильные приложения на HTML, CSS и Typescript. С помощью одной общей кодовой базы вы можете разработать приложение для iOS или Android или развернуть его как веб-приложение.

Для установки Ionic откройте терминал и введите:

npm install -g ionic@latest

Примечание: у вас должны быть установлены Node JS и npm. Если вы получаете ошибку с кодом EACCES, возможно, вам понадобятся права sudo или администратора.

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

ionic start <name of your app> siдеменю

1*mLFWCTj1IhdMdMiXSI7OVg
Пример вывода терминала из CLI

После создания проекта перейдите в каталог с помощью:

cd <name of your app>

Теперь у вас есть проект Ionic с боковым меню и двумя страницами, готовыми к работе! Чтобы увидеть свое творение, введите ionic serve в вашем терминале.

Настройка первых 2 тем: Todoist Red vs Noir

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

Во-первых, нам нужно пометить файл SCSS, который будет использоваться при применении темы. В src/theme каталога вашего проекта, вы найдете a variables.scss . Здесь также находятся подходящие файлы тем. Создайте новый файл под названием:

red.theme.scss

Этот файл используется для применения первой темы. Из этого файла можно изменить любой стандартный стиль Ionic. Есть два варианта того, как мы можем применить темы:

Вариант 1. Стилизуйте только панель навигации и определенные элементы

Вариант 2. Применение темы ко всему фоновому содержимому

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

Это первый созданный файл SCSS! Продолжение следует темный режим. Создайте другой новый файл под названием:

noir.theme.scss

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

Однако важно заметить, что нам нужно будет переименовать класс SCSS от theme-red к чему-то уникальному на эту тему. Я позвоню своим theme-noir .

Следующим шагом является импорт файлов SCSS в саму программу. Это важно, иначе тема не будет загружена в программу. Направляйтесь к app.scss файл, расположенный по адресу src/app/app.scss где вы можете импортировать тему так:

@import '../theme/red.theme';@import '../theme/noir.theme';

Теперь, когда мы создали и импортировали файлы темы в проект, мы позаботились о SCSS! Теперь перейдем к Typescript и HTML.

Программное изменение темы

Чтобы изменить саму тему, потребуется всего три шага для простой настройки:

  • обертка вокруг программы
  • функция изменения темы во время выполнения
  • что-то для поддержки текущей темы

Класс AppState

Класс AppState будет внедряемым компонентом Angular, содержащим то, что текущая тема, и который также можно использовать для обновления темы.

Нет особенного о том, как он работает, кроме того, что он имеет внутреннее переменное состояние. Когда вызывается операция Get, возвращается клон состояния. Когда происходит набор, свойство состояния обновляется новым значением в этом случае темой.

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

Когда приложение Ionic впервые настраивается с помощью CLI, вы найдете следующий код в файле app.component.ts :

// used for an example of ngFor and navigation
this.pages = [
{ title: 'Default Red Theme', component: HomePage },
{ title: 'List', component: ListPage }
];

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

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

В этом примере файл темы будет именем класса CSS, который мы хотим использовать. Мы уже импортировали файлы SCSS на момент запуска программы. Поэтому вместо доступа к файлу мы получаем доступ к корневому классу в этом файле. В случае красной темы будет использован класс ‘theme-noir’.

Отображение доступных тем и применение обертки

Последним шагом, который нам нужно сделать, будет добавить обертку div. Это будет элемент верхнего уровня в app.html файл. К этой обертке будет применена выбранная тема, позволяющая дочерним элементам получать обновления стиля. Пример этого в app.html будет выглядеть так:

<!-- Wrapper over the app which will use the theming-->
<div class="{{global.state['theme']}}">
    //in here you will have the rest of app.html 
</div>

С точки зрения отображения, если вы придерживались выше и переименовали файл this.pages массив до this.themes поэтому он содержит ваши доступные темы, тогда вам не нужно ничего изменять для отображения!

Сначала боковое меню использовалось для перехода на доступные страницы программы, но теперь это отличный переключатель тем. Названия каждой доступной темы отображаются с помощью NgFor и определенной привязки данных с помощью this.themes массив. Результатом будет очень простой список, который будет называться темой для каждой записи. При нажатии записи эта тема будет применена.

В репозитории Github можно найти лучший пример с цветным индикатором возле каждой записи.

1*X-QxmagEFaYE8JMn5w9RHA

Резюме

Настало время для краткого обзора того, что мы здесь сделали. Мы внесли такие изменения, чтобы тематика работала:

  • Созданные файлы SCSS темы для каждой нужной темы
  • Импортированы созданные файлы темы в основной файл Sass, расположенный по адресу src/app/app.scss
  • Настройте класс AppState, чтобы удерживать тему, которая сейчас применена
  • Настройте очень небольшую функцию changeTheme, которая установит новую тему в AppState
  • Добавлен элемент обертки этаж app.html к которому будет применена тема

Чтобы создать больше тем, скопируйте один из файлов темы, которые вы уже создали, переименуйте его и измените шестнадцатеричное значение цвета в этом новом файле. Вы можете сделать сколь угодно! Просто убедитесь, что вы также импортируете этот новый файл темы app.scss как вы сделали с первыми, иначе не получится.

С помощью этих пяти шагов вы можете создать динамическую тему в любом приложении Ionic. Прелесть решения состоит в том, что оно хорошо работает на всех платформах, поскольку не использует встроенные плагины – все в HTML, CSS и TS.

В качестве бонуса в репозитории GitHub я реализовал два других способа представления доступных тем.

1*FPTVBGFH--t0AHelBsBX2g
Вариант 2 налево и вариант модели направо

вывод:

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

Скрытое преимущество этого заключается в том, что мы можем собирать аналитику от наших пользователей по теме, которая им лучше всего подходит. В changeTheme обсуждаемая функция, вебхук или какое-либо событие может быть отправлено, указывая выбор пользователя. Благодаря этому разработчики могут собрать реальные отзывы пользователей о том, какие темы работают, а какие нет.

Весь исходный код этого учебника можно найти в этом репозитории Github.

1*LGQFvGWTml9dQTsUJO-s8g
Последний взгляд

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *