Якщо ви коли-небудь звертали увагу на великі бренди, ви помітили, що вони нічого не залишають на волю випадку, а їхня типографіка є ключовим елементом для миттєвої впізнаваності їхньої ідентичності. У світі розробки для Android, і особливо при використанні Jetpack Compose, створення застосунку, що виділяється з натовпу, обов'язково передбачає знання того, як працювати зі шрифтами та стилями тексту.
Йдеться не лише про те, щоб текст виглядав гарно, а й про те, щоб спрямувати погляд користувача на те, що дійсно важливо, та створити візуально цілісний досвід. У цій статті ми розглянемо все: від основ, таких як додавання файлу .ttf до папки resources, до більш просунутих методів, таких як використання змінних шрифтів та інтеграція з Material You.
Налаштування власних шрифтів у Compose
Для початку, компонент Text у Compose пропонує нам параметр fontFamilyОсь тут і відбувається диво. За замовчуванням у нас є класичні шрифти із засічками, без засічок, моноширинний та курсивний, але якщо ми хочемо надати їм унікального вигляду, нам знадобляться імпортувати власні файли від джерела.
Перший крок – створити каталог під назвою font в resДуже важливо, щоб файли мали розширення . . FTT і що їхні імена суворо в малі літери та без спеціальних символіввикористовуючи лише символи підкреслення, якщо необхідно. Після цього ми визначаємо змінну типу FontFamily де ми зіставляємо кожен файл з відповідним йому розміром, наприклад FontWeight.Bold o FontWeight.Light.
Якщо ви не бажаєте завантажувати програму великими файлами, починаючи з версії Compose 1.2.0, ви можете використовувати API шрифтів, що можна завантажитиЦе дозволяє вам асинхронно імпортувати шрифти з Google Fonts. Вам просто потрібно налаштувати GoogleFont.Provider з відповідними обліковими даними та визначити назву джерела, наприклад, «Лобстер Два», щоб система могла керувати ним автоматично.
Дуже корисний трюк – налаштувати резервні копії шрифтів . По суті, ви кажете програмі: «Спробуйте завантажити цей шрифт з Google, але якщо немає інтернету або завантаження не вдається, використовуйте цей локальний файл, який у мене вже є в папці res». Це гарантує, що інтерфейс ніколи не виглядатиме погано, навіть якщо є проблеми з мережею.
Розширені стилі та ефекти тексту
Окрім шрифту, нам потрібно контролювати візуальний вигляд. Найпоширеніші параметри: color, fontSize (використовуючи sp (щоб зробити його масштабованим), fontStyle для курсиву та fontWeight для жирного тексту. Але якщо ви хочете піти далі, ви можете додати тіні за допомогою параметра стилю, що визначає зміщення та радіус розмиття для надання глибини.
Коли вам потрібно, щоб один і той самий абзац мав різні кольори або товщину, рішення полягає в AnnotatedString. Наскрізь buildAnnotatedStringВи можете чергувати різні стилі обведення (SpanStyle) і стилі абзаців. Це важливо для виділення ключових слів або створення посилань у блоці тексту без необхідності створювати кілька компонентів «Текст».
Для тих, хто шукає нестандартний дизайн, Compose дозволяє використовувати Brush API . Це означає, що ви можете застосувати лінійний градієнт або будь-який інший тип пензля до тексту, щоб кольори перетікали через літери. Ви навіть можете експериментувати з вибірковою непрозорістю , використовуючи параметр альфа через певні інтервали в тексті.
Ще один дуже вражаючий ефект полягає в basicMarqueeЦей модифікатор призводить до горизонтального зміщення тексту, якщо він занадто довгий для доступного простору, створюючи те, що ефект шатра Він настільки класичний, що залишається дуже корисним для сповіщень або довгих заголовків у невеликих просторах.
Глобальні системи дизайну та типографіки
Якщо ви не хочете налаштовувати кожен текст окремо, ідеальним рішенням є інтеграція всього в МатеріалТема. У файлі Type.kt, ви можете визначити об'єкт Typography що призначає певні стилі для різних рівнів ієрархії: displayLarge для вражаючих назв, bodyMedium для основного змісту та labelSmall для субтитрів.
Обернувши вашу заявку в MaterialTheme Налаштовані, всі компоненти успадковують ці правила. Це не лише економить час, але й гарантує, що програма має єдина візуальна ідентичністьКрім того, ви можете створювати динамічні теми, які автоматично перемикаються між світлий і темний режим на основі конфігурації системи або вподобань користувача.
З приходом Росії Матеріал ВиПерсоналізація досягла нового рівня. Тепер можна витягти кольори шпалер користувача за допомогою... DynamicColorPaletteзавдяки чому додаток виглядає як продовження пристрою. Типографіку також можна адаптувати для зберегти читабельність незалежно від застосованих динамічних кольорів.
Змінні джерела живлення та сумісність системи
Змінні джерела живлення – це майбутнє: вони дозволяють вам мати кілька стилів в одному файліЗамість того, щоб мати один файл для жирного шрифту та інший для світлого, у вас є лише один, і ви налаштовуєте осі (товщину, ширину, нахил) за допомогою FontVariation.SettingsЦе зменшує розмір програми та пропонує неймовірну гнучкість у налаштуванні товщини тексту аж до міліметра.
Однак, сумісність викликає занепокоєння. Змінні шрифти працюють лише на Android O (API 26) і вище . Тому важливо впровадити захисний бар'єр (систему контролю версій), який призначає традиційний статичний шрифт для старіших пристроїв, щоб запобігти збоям програми.
Зрештою, ми не повинні забувати про інтерфейс системиЩоб зробити тему ідеальною, рекомендується використовувати SystemUiController з бібліотеки акомпаніатора та таким чином синхронізувати прозора панель навігації в додатках Android з кольорами вашої теми Compose, уникаючи цих надокучливих візуальних скорочень.
Оволодіння типографікою в Jetpack Compose передбачає балансування використання локальних ресурсів, можливостей завантажуваних шрифтів та гнучкості тем Material Design. Поєднуючи передові стилі, такі як AnnotatedString, з ефективністю змінних шрифтів та адаптивністю Material You, ми створюємо інтерфейси, які є не лише функціональними, але й передають індивідуальність бренду та забезпечують повну доступність для будь-якого користувача, незалежно від його пристрою.
