В мире Google Play нет справедливости: кто лучше выглядит — тот всех клиентов и забирает. В среде мобильной разработки лучше выглядеть означает быть органично вписанным в дизайн операционной системы.

Этим летом Google презентовала пятую версию ОС Android. Важной особенностью стало свежее видение дизайна мобильных приложений. Разработчикам предоставили новые инструменты, позволяющие создать приложения в стиле Material Design. Под этим красивым словосочетанием скрывается целая философия оформления визуального, динамического и интерактивного дизайна. Сегодня мы познакомимся с основными новшествами, которые помогут мобильному разработчику создать красивое и органичное приложение.

 

Цветовая схема

Прежде всего, появилась новая схема (theme) оформления приложения — Material Theme. Вот основные параметры этой цветовой палитры:

colorPrimaryDark — самая темная часть интерфейса, цвет панели уведомлений;
colorPrimary — основное «цветовое пятно» нашего приложения, цвет панели инструментов;
textColorPrimary — цвет текста в панели инструментов;
windowBackground — фон приложения;
navigationBarColor — цвет панели навигации внизу экрана.
Чтобы заполнить эти параметры, достаточно объявить их в файле colors.xml:

<resources>
  <color name="colorPrimary">#F50055</color>
  <color name="colorPrimaryDark">#C51160</color>
  ...
</resourses>
Рис. 1. Цветовая схема
Рис. 1. Цветовая схема
 

Списки

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

Сегодня мы создадим свое приложение, чтобы лучше разобраться, что же нам принес мир Material Design. Для начала в layout-файле опишем внешний вид элементов будущего списка.

<android.support.v7.widget.CardView
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
>

Внутри будут храниться все визуальные элементы. В данном случае это картинка-иллюстрация, заголовок к ней и краткое описание. Сегодня мы используем RelativeLayout, а значит, в параметрах элементов нужно указать, как именно они будут расположены относительно своих соседей. Чтобы приложение не «налезало» на края дисплея устройства, укажем отступ через параметр android:padding.

<RelativeLayout
  android:padding="5dp"
...>

Зафиксируем иллюстрацию в верхнем левом углу. Параметром android:layout_marginRight мы создаем небольшой промежуток от соседнего элемента:

<ImageView
  android:layout_alignParentLeft="true"
  android:layout_alignParentTop="true"
  android:layout_marginRight="16dp"
  android:id="@+id/itemImage"
.../>

Заголовок поместим сверху (alignParentTop) и с правой стороны (toRightOf) от изображения:

<TextView
  android:id="@+id/itemTitle"
  android:layout_toRightOf="@+id/itemImage"
  android:layout_alignParentTop="true"
.../>

Тем же способом добавим поле с кратким описанием: оно будет справа от изображения и под заголовком:

<TextView
  android:id="@+id/itemText"
  android:layout_toRightOf="@+id/itemImage"
  android:layout_below="@+id/itemTitle"
.../>

Теперь разберемся с тем, где будет храниться отображаемая информация. Для этого создадим класс ItemData, в конструкторе которого будет вся необходимая информация.

ItemData(String title, String descr, int photoId) {
  this.title = title;
  this.descr=desr;
  this.photoId=photoId
}

Созданный элемент нужно размножить с помощью RecyclerView и заполнить данными. В случае с объектами класса CardView нужно использовать класс RecyclerView. Он немножко запутаннее, чем привычные нам адаптеры, но мы с этим справимся. Для начала поместим его в layout-файле:

Продолжение статьи доступно только подписчикам

Вариант 1. Оформи подписку на «Хакер», чтобы читать все статьи на сайте

Подписка позволит тебе в течение указанного срока читать ВСЕ платные материалы сайта, включая эту статью. Мы принимаем оплату банковскими картами, электронными деньгами и переводами со счетов мобильных операторов. Подробнее о подписке

Вариант 2. Купи одну статью

Заинтересовала статья, но нет возможности оплатить подписку? Тогда этот вариант для тебя! Обрати внимание: этот способ покупки доступен только для статей, опубликованных более двух месяцев назад.


3 комментария

Подпишитесь на ][, чтобы участвовать в обсуждении

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

Check Also

WWW: TLDR pages — замена справке man, показывающая только самое важное

Что ты делаешь каждый раз, когда набираешь команду man в Linux или Unix? Правильно: тяжело…