Разработка Android приложения Twitter. Урок 5: Шрифты. Иконки шрифта Font-Awesome.

Автор Andrei Golubev
Разработка Android приложения Twitter. Урок 5: Шрифты. Иконки шрифта Font-Awesome.

в этом уроке.

Нам необходимо привести внешний вид всех тексту в порядок чтобы они выглядели так же как и на макете которые нам необходимо сделать для этого мы применим стили текста. Принц и добавим шрифт Font awesome проект и. Давайте сразу перейдем к файлу styles.xml помним, что в предыдущем уроке мы добавили три текст текст примеры Text secondary теперь нам необходимо добавить атрибут к всему тексту приложение — это мы можем сделать добавив этот атрибут в стиле текст атрибут который мы добавим называется font-family этот атрибут указывает каким шрифтом будет отрисовывается текст указывать этот атрибут необходимо без префикса Android его надо убрать потому мы используем спорт библиотеку для совместимости старых девайсов и значение указываем sans-serif указываем, что мы будем использовать шрифт без засечек он применяется по умолчанию поэтому нашла я вот визуально сейчас не изменится следующим шагом мы изменим стих для самого первого текста её, что выглядит.

Он намного больше остальных сделать его визуально больше мы можем увеличив ему.

Вес вес шрифта можно задавать атрибутом textile у которого три значения болт — это мы будем использовать значение болт. Давайте создадим новый стиль текста 1. МТС который назовём текст примеры хедер скопированный текст примеры и допишем. Фёдор и мы укажем два новых атрибута делаем побольше text-size указав значение 22. СПб и также укажем атрибут textile куда передадим значение болт после этого нам необходимо создать стиль текста в Premiere cuda передадим атрибутом этот текста 1 с которой мы только, что создали допишем название хедер и. Здесь также поменяем ссылку на текст соперницу и. Давайте добавим. Этот стиль в нашу я вот к первому тексту переведём. Файлик activiti User info и тексту поменяем. Стиль на тексту примеры. Фёдор открой вкладку дизайн и видим, что тексты выглядит теперь также как на макете следующим шагом мы добавим вот эти нижние элементы количество читателей и количество тех кого мы читаем видим, что здесь по факту расположены два текста с разными стилями. Мы — это можем сделать двумя способами или давай вот эти вот элементы 0 и following двумя разными тексты или использовать один текст. И изменять шрифты и стили в Java коде используя класс по небу сейчас классно было работать не будем. Потому, что — это будет немного сложновато. А мы добавим эти отдельными текст в начале создадим для них стиль который назовём тексту примеры болт придём. Файлик styles.xml можем полностью скопировать текст про вымирающих видов и просто укажем стиль болт место хедер указываем болт и удаляем атрибут Text Says потому, что размер шрифта у этих элементов не меняется по аналогии копируем тексту пример header изменяем здесь название на болт также меняем текста первый раз едали нам необходимо добавить два тексту в.а. User infolink.ru пойдём этот файл видим два элемента following folders можем полностью скопировать текст ей поменяем и точку — это будет following account также поменяем стиль — это будет тексты о праймере болт зависимости белом топ остаётся значение текста поменяем на четыре то есть вот этот элемент, а он теперь будет находиться слева, а элементов. Лунтика Нам необходимо задать зависимость находить справа от той of forming тексту и также. Давайте добавим небольшой. Марвин Марвин. Старк в каждом значении 5D чтобы — это выглядело так же как называли. Аналогично добавим and followers контекстную вставляем значение изменяем этажку стиль и. Давайте значение марки научусь увеличить кто и не забываем изменить текст допустим пусть будет 27 у элементов followers тексту меняем зависимость права он должен находиться справа от счётчика меняем значение магазин стартера на 5 дпп после этого посмотрим на вкладку дизайн видим, что элементы отображались также как выглядят на макете следующим шагом и добавить иконку местоположение. Как видите на экране делать мы будем тоже отдельным textview сейчас мы его добавим Way Out и пока вместо иконки будем использовать символ английский и перейдем layout File и копируем элемент User Location текстура вставим первым делом поменяем идентификатор у нового элемента и этимология и текст заменим на и и также нам придётся поменять зависимости у элемента User Location. Давай зависимость справа от клиентов и идентификатор иконки и также добавила немножко отступа слева пусть будет посмотрим на вкладку дизайн видим, что добавился текст с текстом и далее. Нам необходимо сделать из символа и реально иконку местоположения. Мы — это сделаем добавили в приложение шрифт который поддерживает иконки, а именно фонд. России в начале создадим папку куда мы можем добавлять новые шрифты в правой кнопкой нажмем на папку резко беременную Android directory и в ресурсной перебираем значение фонд нажимаем OK и видим, что — это папка создалась далее перейдем на сайт vkontakte.com. Откуда мы получаем нужный нам шрифт опустимся ниже видим, что мы можем скачать. Но — это версия 5 её сложнее подключать поэтому мы воспользуемся версия 4.7 нажмем download и откажемся скачать версию скачаем четвёртую после того как мы скачали откроем архив перейдём в папку font-awesome 4.7 папка fonts и. Нам нужен 11. Файлик в Android студии правой кнопкой нажимаем папки фонд и нажимаем капец после чего разархивируется файл в папку фонд нажму OK после этого можно увидеть что. Файлик оказался именно в этой папке и обязательно сейчас нам. Надо переименовать шрифт на font-awesome нажми Shift F6 и его просто Font awesome через нижнее подчёркивание иначе Android Studio ругалась бы.

0 комментариев
0

Читайте также