Этой статьей начинается серия уроков по программированию под Android. Для начала мы ознакомимся с инструментами и компонентами для работы со внешним видом приложений, а именно стилями и темами в Android.
Внешний вид приложения является важной частью разработки под андроид и требует особого внимания со стороны разработчика. Поэтому в этой статье мы научимся использовать существующие и создавать новые стили и темы для Android приложений.
Шаблоны проектирования в Android
Android — самая популярная мобильная платформа на сегодняшний день. Как и в любой другой платформе, Андроид предлагает устоявшиеся правила и подходы к разработке приложений. Это все делается для того, чтобы ваше приложение выглядело красиво, просто и было максимально производительным. Разработчики Google регулярно публикуют лучшие практики разработки приложений под Android и советуют следовать их рекомендациям.
Использование своих стилей в Андроид
Платформа Android поддерживает создание новых пользовательских виджетов с использованием стилей.
Стиль представляет собой набор свойств, которые определяют внешний вид и способы отображение виджета на устройствах с разными размерами экрана. С помощью стилей можно задавать такие свойства, как высота, отступы, цвет и размер шрифта, а также цвет фона и многое другое. В Android стили работают аналогично
CSS(каскадные таблицы стилей), которые используются в веб-разработке.
В Android стили представляют собой XML-файлы, которые размещаются в папке /res/values вашего андроид-проекта. В корне этого XML файла должен использоваться тег <resources> и вложенный в него тег <style>:
|
1 2 3 4 5 6 7 8 9 10 11 |
<resources> <!-- Это стандартная тема созданного 'Hello world' проекта --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- используем тег item для задания цветов вашей темы --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> |
Как видим из примера выше, этот тег содержит несколько тегов <item>, которые определяют цвета, которые будут использоваться в теме. Например, в приведенном ниже примере мы создадим TextView. Для этого мы будем использовать стандартный Android редактор XML-макета:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- фрагмент xml-файла для определения стиля TextView --> <ImageView android:id="@+id/gallery_item_imageView" android:layout_width="match_parent" android:layout_height="120dp" android:textStyle = "bold" android:layout_gravity="center" android:textColor = "#336633" android:background = "#f0f0f0" android:typeface = "serif" android:scaleType="centerCrop"> </ImageView> |
Это довольно громоздкий код разметки, однако для одного view «пойдет», но что делать, если мы еще захотим использовать такую же разметку и для какого-то TextView, например, в других местах нашего приложения? Первое, что приходит на ум — копирование того же стиля, но это приведет к двум проблемам:
- Что делать, если через месяц нам захочется немного изменить дизайн андроид-приложения? В этом случае нам придется вносить изменения во все места, где использовался один и тот же «копипаст» стиля. И я знаю, это будет забирать много времени.
- Повторное написание одного и того же кода в итоге выльется в большое приложение которые нереально эффективно поддерживать.
Чтобы избежать таких проблем, нам сразу нужно делать правильно и объявить стиль для TextView. Один и тот же стиль может использоваться несколькими мест нашего android-приложения. Изменение в самом стиле автоматически подхватятся в других view, где он используется. Давайте рассмотрим фрагмент кода ниже:
|
1 2 3 4 5 |
<TextView android:id="@+id/helloMessage" style="@style/mTextViewStyle" android:text="@string/hello_world" > </TextView> |
Как видите, TextView ссылается на стиль @style/mTextViewStyle.
Создание стиля в Android
XML-файл со стилями может быть создан один раз и быть использован в других макетах. Для этого нужно создать новый XML-файл и сохранить его в папке res/values/ вашего проекта. Как вы уже знаете, в корне файла должен быть тег <resources>.
В одном файле style.xml могут быть определены сразу несколько стилей. Для каждого стиля, который вы хотите определить в файле style.xml, следует добавить тег <style> с уникальным идентификатором стиля. Затем добавьте тег <item> для каждого свойства этого стиля. Значением тега <item> может быть строка, шестнадцатеричный код цвета, ссылка на другой тип ресурса или другое значение в зависимости от свойства стиля.
Давайте рассмотрим на примере TextView:
|
1 2 3 4 5 6 7 8 |
<style name = "mTextViewStyle" > <item name="android:layout_width">match_parent</item> <item name="android:layout_height">120dp</item> <item name="android:textColor">#336633</item> <item name="android:typeface">serif</item> <item name="android:background">#f0f0f0</item> <item name="android:textStyle">bold</item> </style> |
Применяем созданный стиль
|
1 2 3 4 5 |
<TextView android:id="@+id/helloMessage" style="@style/mTextViewStyle" android:text="@string/hello_world" > </TextView> |
Применяем стиль к теме
Тема — это стиль, который применяется к
Activityили приложению в целом.
Создание темы аналогично созданию стиля. Смотрим пример:
|
1 2 3 4 |
<style name="MyTheme" parent="android:Theme.Light"> <item name="android:windowNoTitle">true</item> <item name="android:colorBackground">@color/default_bg</item> </style> |
Обратите внимание, этот стиль переопределяет тему по умолчанию android:Theme.Light и переопределяет значение android:windowNoTitle.
Чтобы установить эту тему для всех Activity вашего приложения, откройте файл AndroidManifest.xml и отредактируйте тег <application> добавив android:theme атрибут с названием стиля. Пример:
|
1 2 3 4 |
<application android:theme="@style/MyTheme" ... > |
Если вы хотите применить тему только к одной активности вашего приложения, то просто добавьте атрибут android:theme в тег <activity>.
Это была первая статья из серии уроков программирования под Андроид для начинающих. Следите за обновлениями и делитесь статьей с друзьями!
