Как стать автором
Обновить

Как создавать пользовательские представления в Android (Custom Views)

Уровень сложностиСложный
Время на прочтение4 мин
Количество просмотров3.3K
Автор оригинала: Роберт Тадевосян

Вступление

В данной статье расскажу как создать свои кастомные представления(view) при разработке приложений для андроид устройств. Если вы не знакомы с разработкой приложений для андроид предлагаю прочитать официальную документацию. В статье будет использовано язык программирования Kotlin(официальный язык программирования для создания приложений для андроид). Можно прочитать про Котлин здесь.

Перед тем как перейти к основной части статьи, предлагаю разобраться в двух вопросах:

1) Что такое пользовательское представление(custom view) в Android ? Пользовательское представление - это элемент пользовательского интерфейса, который полностью создается разработчиком. Пользовательские представления используются, когда существующие представления, предоставляемые Android, не соответствуют конкретным требованиям к дизайну или функциональности. Пользовательские представления создаются путем расширения класса View, который предоставляет базовую структуру для рисования и обработки пользовательских взаимодействий.

2) Когда или при каких условиях может понадобится создать свои view при создании Android приложений?
Создание пользовательского представления(Custom View) в Android - важнейший навык для разработчиков, которые хотят создавать инновационные и уникальные приложения. Пользовательские представления предоставляют разработчикам возможность создавать сложные визуальные элементы, которые улучшают пользовательский опыт, обеспечивая при этом гибкость и кастомизацию. В этой статье мы расскажем вам, как создавать пользовательские представления в Android.

Звучит немного абстрактно) не так ли ? Давайте перейдем к делу, чтобы было понятнее)

И так для начало открываем андроид студио и создаем пустой проект в (Android Studio - Официальная интегрированная среда разработки (IDE) для разработки приложений для Android. На всякий случай оставлю ссылку). Не забываем на первом этапе выбрать Empty Activity. После того как создастся проект у нас будет пустой активность с разметкой которое нам понадобится в конце(MainActivity.kt, activity_main.xml)

Я назову проект CustomView, вы можете дать любое название.

Далее создаем новый класс, нажимаем правой кнопкой мышки на папку "customview", выбираем new -> Kotlin class/file, пишем название класса MyCustomView, выбираем в списке class и нажимаем Enter.

Наш MyCustomView должен наследоваться от класса View который предоставляет "андроид".

В следующем шагу нам нужно переопределить(override) функицю onMeasure, чтобы вычислить размер пользовательского представления.

Вот как это делается

Далее нужно переопределить метод onDraw класса MyCustomView для обработки чертежа пользовательского вида. Использовать объект canvas для рисования пользовательского вида на основе спецификаций дизайна. В данном примере у нас нет конкретного дизайна, так как мы рассматриваем способ создания пользовательского вида(custom view) и по этому в этой здесь нарисуем просто серый прямоугольник с обводкой. В принципе у нас уже все готово, но для интереса и более детальной кастомизации предлагаю добавить новые параметры нашему MyCustomView, сделав его более гибким в использовании. Для этого нам понадобится создать .xml файл для наших атрибутов. Нажимаем правой кнопкой мышки на папку res/values -> new -> values resource file, пишем название для файла(обычно такой файл я называю attrs.xml), нажымаем Enter. Далее заполняем этот файл таким образом(см в скриншот далее)

Мы добавили два параметра - один для цвета обводки второй для размера(ширины) той де обводки. Тут можно придумать разные параметри в зависимости от задачи.К этим атрибутам можно получить доступ в классе пользовательского представления и использовать их для изменения внешнего вида и поведения пользовательского представления. (смотрите следующий скриншот)
Мы добавили два параметра - один для цвета обводки второй для размера(ширины) той де обводки. Тут можно придумать разные параметри в зависимости от задачи.К этим атрибутам можно получить доступ в классе пользовательского представления и использовать их для изменения внешнего вида и поведения пользовательского представления. (смотрите следующий скриншот)

Теперь нужно в нашем классе MyCustomView обрабатывать эти атрибуты. Пишем блок init{} в нашем классе, в нем и мы будем обрабатывать эти атрибуты.

Для обработки берем объект theme из доступной нам переменной context и вызываем функцию obtainStyledAttributes(attr, R.styleable.MyCustomView, 0, 0) который возвращает объект типа TypedArray из которого будет "достать" кастомные параметры, собственно как это и сделано на скриншоте выше.

И в конце нам остается только использовать наш MyCustomView в нашем приложении. Добавим его в activity_main.xml который создался при создании проекта а начале.

Добавьте пользовательский вид в макет, используя полное имя класса пользовательского вида в качестве имени элемента XML. Используйте пользовательский вид в своем приложении, получив к нему доступ с помощью кода или используя его в файле макета.
Добавьте пользовательский вид в макет, используя полное имя класса пользовательского вида в качестве имени элемента XML. Используйте пользовательский вид в своем приложении, получив к нему доступ с помощью кода или используя его в файле макета.

нажимаем на Build -> Rebuild Project и по завершению в предпросмотре можем увидеть наш MyCustomView.

Общие советы по созданию пользовательских представлений в Android.

  • Используйте метод onMeasure класса custom view, чтобы задать размер пользовательского представления.

  • Всегда обязательно вызывайте суперконструктор при создании нового пользовательского представления.

  • Используйте объект canvas в методе onDraw для рисования графики и визуальных элементов в пользовательском представлении.

  • Используйте параметр AttributeSet в вашем конструкторе пользовательского представления для чтения пользовательских атрибутов из XML-файла.

  • Рассмотрите возможность использования пользовательских файлов макета для группировки и упорядочивания представлений в пользовательском представлении.

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

Теги:
Хабы:
Рейтинг0
Комментарии6

Публикации

Истории

Работа

Swift разработчик
25 вакансий
iOS разработчик
18 вакансий

Ближайшие события

Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
AdIndex City Conference 2024
Дата26 июня
Время09:30
Место
Москва
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область