Для начала мы ознакомимся с инструментами и компонентами для работы со внешним видом приложений, а именно стилями и темами в Android.
Внешний вид приложения является важной частью разработки под андроид и требует особого внимания со стороны разработчика. Поэтому в этой статье мы научимся использовать существующие и создавать новые стили и темы для Android приложений.
Шаблоны проектирования в Android
Android — самая популярная мобильная платформа на сегодняшний день. Как и в любой другой платформе, Андроид предлагает устоявшиеся правила и подходы к разработке приложений. Это все делается для того, чтобы ваше приложение выглядело красиво, просто и было максимально производительным. Разработчики Google регулярно публикуют лучшие практики разработки приложений под Android и советуют следовать их рекомендациям.
Использование своих стилей в Андроид
Платформа Android поддерживает создание новых пользовательских виджетов с использованием стилей.
Стиль представляет собой набор свойств, которые определяют внешний вид и способы отображение виджета на устройствах с разными размерами экрана. С помощью стилей можно задавать такие свойства, как высота, отступы, цвет и размер шрифта, а также цвет фона и многое другое. В Android стили работают аналогично CSS (каскадные таблицы стилей), которые используются в веб-разработке.
В Android стили представляют собой XML-файлы, которые размещаются в папке /res/values вашего андроид-проекта. В корне этого XML файла должен использоваться тег <resources> и вложенный в него тег <style>:
<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-макета:
<!-- фрагмент 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, где он используется. Давайте рассмотрим фрагмент кода ниже:
<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:
<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>
Применяем созданный стиль
<TextView
android:id="@+id/helloMessage"
style="@style/mTextViewStyle"
android:text="@string/hello_world" >
</TextView>
Применяем стиль к теме
Тема — это стиль, который применяется к Activity или приложению в целом.
Создание темы аналогично созданию стиля. Смотрим пример:
<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 атрибут с названием стиля. Пример:
<application
android:theme="@style/MyTheme"
...
>
Если вы хотите применить тему только к одной активности вашего приложения, то просто добавьте атрибут android:theme в тег <activity>.