Как рисование фигур может улучшить пользовательский интерфейс Android
Если вы новичок в разработке приложений для Android и выбрали Android Studio и Java или Kotlin, после ознакомления с компонентами пользовательского интерфейса (представлениями и макетами) вы можете подумать, что чего-то не хватает. Но после того, как я немного отточил свою практику и наткнулся на чертежи фигур, я понял, что нашел свой ответ.
На первый взгляд, многие новые разработчики Android, использующие Android Studio, которые не знают о чертежах фигур, обычно жалуются, что у них нет необходимых инструментов для реализации своих пользовательских интерфейсов так, как они хотят - и это правда. Однако, когда вы поймете, как рисовать фигуры и обнаружите, насколько они хороши в улучшении вашего пользовательского интерфейса, вам понравится проектировать с их помощью.
Фигурные элементы делают компоненты или представления вашего пользовательского интерфейса более привлекательными и удовлетворяющими, придавая им настоящий индивидуальный подход, который вы хотите для своих представлений. Они отлично справляются с настройкой ваших кнопок, TextViews, EditText и многих макетов в соответствии с вашими предпочтениями.
Фигурные чертежи создаются в XML, а синтаксис прост для понимания, что упрощает знакомство любому новичку.
В этой статье вы увидите некоторые полезные чертежи фигур, как их создавать и как они улучшают ваш пользовательский интерфейс.
Как создать и использовать фигуру, которую можно рисовать
Создание чертежей форм выполняется в XML с помощью элементов <item> и <shape>.
Элемент <item> является родительским элементом <shape>. Он определяет такие атрибуты, как ширина и высота фигуры, но это возможно, только если ваш проект имеет API 23 и выше.
В элементе <shape> определяется форма вашего чертежа и определены все его вложенные элементы. Атрибут android:shape может содержать четыре значения: rectangle, oval, ring или line. Если вы не укажете значение, по умолчанию это будет прямоугольник.
В элемент <layer-list> можно вложить несколько элементов формы. Список слоев может содержать набор <item> элементов, наложенных друг на друга, причем последний элемент должен быть первым поверх остальных.
Внутри элемента <shape> к фигуре могут быть добавлены другие вложенные элементы, создающие фигуру, такие как <stroke>, <gradient>, _18 _, _ 19 _, _ 20_ и <solid>.
Элемент <stroke> используется для установки ширины, цвета, dashGap и dashWidth границ фигуры.
Элемент <gradient> используется для установки startcolor, centerColor, endColor и некоторых других атрибутов, используемых для придания фигуре окраски с линейным градиентом.
Элемент <corners> используется только для установки радиуса для каждого угла формы.
Элемент <padding> используется для установки отступов для всех сторон фигуры.
Элемент <size> используется для установки ширины и высоты фигуры, но это можно сделать в элементе <item>, если ваш проект ориентирован на API 23 и выше.
Элемент <solid> используется для установки общего единого цвета, покрывающего всю форму.
После создания формы для рисования, чтобы использовать ее в ваших представлениях, вы должны установить ее как значение атрибута background представления.
Полезные чертежи фигур для пользовательского интерфейса
Проверьте репозиторий выше. В нем есть длинный список полезных чертежей фигур, которые вы можете использовать в своих проектах.
Кнопка со скругленными углами
Кнопка по умолчанию на Android выглядит не очень хорошо, но с помощью фигур, которые можно рисовать, вы можете сделать так, чтобы ваши кнопки и кнопки изображений выглядели как угодно:
Приведенный выше рисунок можно использовать для создания кнопок, TextViews и EditText в соответствии с вашими предпочтениями.
Это можно использовать для создания ваших ImageButton и ImageView фонов, а также для изменения кода в соответствии с вашими цветовыми предпочтениями.
Плавающая форма кнопки действия с возможностью рисования
Для новичков в Android-разработчиках создание крутой плавающей кнопки действия может показаться головной болью, но с возможностями рисования фигур это совсем несложно.
Чтобы использовать это в кнопке с плавающим действием, установите его как значение атрибута src кнопки.
Градиент формы круга рисованной
Подобно фоновой форме круга выше, вы можете использовать градиентный круг для множества вещей. Вы можете уменьшить его размер и использовать как индикатор вкладки или использовать его как бегунок на панели поиска.
Выдвижная форма кольца
Это можно использовать как индикатор вкладки для невыбранной вкладки. Настройте XML в соответствии со своими предпочтениями и используйте его в своих проектах.
Рисунки круглой формы флажка
Многие новые разработчики в Android жалуются, что нет возможности реализовать закругленные флажки, но с помощью фигур, которые можно рисовать, вы можете делать гораздо больше, чем просто круглые флажки. Прочтите эту статью, чтобы узнать, как настроить флажки в Android.
Чтобы установить фигуры на флажке, вы должны создать еще один доступный для рисования селектор состояний и включить две фигуры с соответствующими состояниями, как показано ниже:
Когда ваш селектор состояния готов, вы можете использовать его в своем флажке, установив селектор состояния флажка в качестве значения атрибута android:button.
Фигуры индикатора табуляции
Индикаторы вкладок - это чертежи, которые можно использовать для идентификации выбранной вкладки в макете вкладок или выбранной страницы в пейджере просмотра с большим количеством страниц. Обычно индикаторы вкладок имеют вид точек, и многие разработчики используют для этого изображения, но проще и эффективнее использовать для этого форму, которую можно рисовать.
Вы можете изменить цвет и размер фигуры, которую можно нарисовать выше, чтобы создать индикаторы вкладок с различными состояниями - обычно выбранными и невыделенными.
Чтобы использовать эти индикаторы вкладок в макете вкладок, вам нужно сначала создать селектор состояния, который можно рисовать:
После создания селектора состояния установите его как значение атрибута app:tabBackground макета вкладок. Затем в своей деятельности вы можете связать ее с помощью пейджера просмотра.
Линия поиска и формы большого пальца
Если вы реализуете воспроизведение звука в своем проекте Android, вы, вероятно, захотите использовать SeekBar, чтобы показать пользователю ход воспроизведения звука. Вы можете настроить SeekBar по своему вкусу или в соответствии с канвой пользовательского интерфейса проекта. Этого легко добиться с помощью чертежей форм.
Чтобы применить эти графические элементы к вашему SeekBar, установите SeekBar thumb drawable в качестве значения атрибута SeekBar’s android:thumb, а затем установите прогресс-drawable в качестве значения атрибута SeekBar’s android:progressDrawable.
Потрясающие пользовательские интерфейсы с возможностью рисования фигур
Большая часть использования элементов рисования фигур - это понимание того, насколько быстро вы можете создать желаемый пользовательский интерфейс, когда у вас есть все формы. Это также увеличивает вашу эффективность при создании пользовательского интерфейса в Android - независимо от сложности.
Преимущества использования фигурных чертежей
- Они помогают вам придать индивидуальный подход, который вы хотите реализовать в своем пользовательском интерфейсе.
- Они не занимают много места и легко модифицируются.
- Они экономят время на создание пользовательских изображений различной плотности, поскольку легко масштабируются и адаптируются к вашим представлениям.
- Они значительно уменьшают размер вашего приложения, поскольку не требуют нескольких плотностей для одной и той же формы. Изображения PNG и JPG весят намного больше и должны быть разной плотности.
- Фигуры более гибкие, поскольку вы можете легко работать с ними в своем коде действий, и их можно использовать несколько раз в одном проекте.
Заключение
Теперь, когда вы знаете, насколько велик будет ваш пользовательский интерфейс с использованием элементов рисования фигур, не забудьте заглянуть в репозиторий ниже, чтобы найти длинный список полезных элементов рисунков для ваших проектов. Вам также предлагается внести свой вклад, добавив свои собственные чертежи фигур.
Больше подобных статей можно найти в моем блоге Техника Android.
