#3 Основы работы с виджетами — Button | TextView
Если Вас интересует андроид разработчик обучение с нуля бесплатно — то изучите эту статью. Но я рекоммендую записаться на обучение
На этом уроке мы с Вами научимся работать с виджетами на пример двух самых популярных элементов — кнопка и текстовое поле. Также мы научимся обрабатывать тап по кнопке и запускать какое-либо действие. В нашем случае мы при тапе по кнопке будем записывать название этой кнопки в текстовое поле. Также мы научимся обраьбатывать тап по кнопке в случае если у нас на экране отображено несколько кнопок. То есть в зависимости по какой кнопке пользователь тапнул — мы будем записывать в текстое поле разное значение.
Работа с виджетами — основа для тех, кого интересует андроид разработчик обучение с нуля бесплатно
Мы будем использовать проект из предыдущих уроков — там просто создано два пустых активити и больше ничего нет. Практиковаться будем на главном активити — Main Activity. Мы переходим в xml шаблон этого активити, которое называется activity_main.xml
Здесь мы видим шаблоный и устаревший TextView.
Он нам не подходит — давайте удалим его.
Теперь у нас пустой xml шаблон с компановщиком ConstraintLayout.
О компановщиках мы будем говорить на одном из следующих уроках
Мы будем использовать виджеты из библиотеки AndroidX. Это библиотека с усовершенствоваными компонентами, то есть виджетами .
Все виджеты из этой библиотеки начинаются с Appcompat. Например виджет Button будет называться AppCompatButton, а в устаревшей библиотеки кнопка называлась просто Button. Это очень важно запомните это.
Для создания виджета мы внутри компановщиа -в данном случае это ConstraintLayout вводим знак открывающегося тега. Сейчас мы создадим виджет кнопки — поэтому после открвывающегося тега вводим название Button
и выбираем вот этот виджет AppCompatButton, который поставляется библиотекой AndroidX
В результате у Вас создатся виджет. Как вы можете видеть выходят ошибки — давайте их исправлять
Как Вы можете видеть у нас создался виджет, а внутри этого виджета размещаются его параметры которые называются атрибутами. По умолчанию у нас создалось два атрибута — ширина и высота.
Давайте в качестве первого атрибута над шириной
создадим один из главных параметров — индивидуальный идентификатор. Для этого мы просто вводим id и студио подсказывает нам какой параметр нужно выбрать,
мы выбираем вот этот.
Как вы можете видеть перед атрибутом мы видим ключевое слово андроид. Это обращение к библиотеки которая поставляет атрибуты для xml шаблона. Таких библиотек всего 2 — android и app – они подключаются вот здесь.
Итак мы создали атрибут, но нам нужно положить туда в качестве значения наш уникальный id по которому мы будем к нему обращаться. При присваивании id мы прописываем вот такой код
ставим слэш и прописываем уникал идентификатор — название может быть любым. Главное что бы было уникальным в этом activity
Давайте теперь зададим ширину и высоту. При работе с шириной, высотой и отступами существует три варианта значения — во первых это абсолютные значения, измеряемые в dp. Dp — пиксель, не зависящий от плотности, то есть в отличии от обычных пикселей — ширина, высота или отступы будут отлично смотреться на разных разрешениях экрана. Во вторых это размер как у родителя — match_parent. В третьих размер wrap_content – по контенту, то есть размер будет увеличиваться в случае увеличения контента, который содержит виджет.
Давайте сделаем ширину кнопки по родителю, то есть во всю ширину родителя. в данном случае родителем является компановщик СonstraintLayout, у которого ширина задана также во весь родитель, то есть на весь экран и как следствие кнопка также будет растянута на весь экран. Высоту кнопки зададим по контенту.
Компановщик ConstraintLayout мы будем разбирать на одном из следующих уроков, но для того что бы расположить виджеты внутри такого компановщика — необходимо использовать специальные атрибуты. Эту кнопку мы разместим как верх этого виджета к верху родителя — для этого используем вот такой атрибут и в качестве значения указываем позицирнирование по отношению к родителю.
У кнопки должно быть название которое собственно будет отображаться — для этого мы используем вот такой атрибут и в качестве значения указываем значение в ковычках.
В реальной практике мы бы указали текст из строкового ресурса string.xml — но об этом мы будем говорить на одном из следующих уроках, а пока разместим название вот так.
С помощью вот этого атрибута мы установим фон кнопки
а с помощью этого — цвет текста на кнопке
Здесь ситуация идентична названию кнопки — обычно мы бы указали ссылку на файл colors.xml из ресурсов — но так как мы еще не проходили эту тему, то указываем цвет из библиотеки андроид.
Что бы кнопка хорошо смотрелась на экране с помощью этого атрибута указываем внешние оступы,
а спомощью этого атрибута внутренние
Единицы измерения значения отступов указываем в dp.
И обязательно в конце нашего виджета должен стоять вот такой закрывающтийся тег.
Если мы посмотрим на компановщик то он состоит из двух частей — открывающая часть и закрывающая часть.
Этими символами мы открываем и закрываем виджет
С версткой нашей кнопки мы закончили — теперь давайте по этому же принципу создадим виджет текстового поля. Для этого открываем тег, вводим TextView, выбираем вот этот виджет.
Задаем для него индивидуальный иднтификатор, устанавливаем ширину, высоту, отступы, фоновый цвет, цвет текста. По умолчанию с помощью этого атрибута устанавливаем текст для отображения в этом виджете
Текст устанавливаем напрямую без оформления названий и цветов через ресурсы, так как эту тему мы еще не проходили. Так как мы размещаем этот виджет в ConstraintLayout, то определяем местоположения текстового поля под кнопкой и соответственно позиционируем текстовое поле по отношеию к кнопке.
Как вы могли заметить я указал позиционирование только по вертикали, так как по горизонтале это не имеет смысла потому что мы ширину указали во весь родитель, то есть на весь экран. Ту сторону ширину или высоты которую вы указали на весь экран — позиционирование по этой стороне не нужно производить. Если например у нас была бы и ширина и высота во весь родитель — то тогда вообще не нужно было указывать парамнетры для позиционирования.
Итак с версткой xml шаблона мы закончили и теперь переходим в котлин класс нашего Activity. У нас здесь еще из прошлого урока подключен viewBiding и больше ничего нету — то есть по факту у нас пустой класс.
Что нам нужно сделать? Нам нужно при тапе по кнопке записывать в текстове поле название этой кнопки — то есть передавать название, которое отображается на кнопке.
Для начала нам нужно обратится к кнопке и повесить на неё прослушиватель события, который и будет запускать определенный код после того как пользователь тапнет по кнопке. Итак навешиваем прослушиватель событий setOnClickListener – для этого обращаемся к объекту binding и вызываем нашу кнопку по id и навешиваем на нашу кнопку прослушиватель,
так как этот прослушиватель является методом ставим круглые скобки. Наша кнопка как и любой виджет является объектом класса view и поэтому в качестве аргумента мы передаем класс View и вызываем интерфейс этого класса OnClickListener – именно в этом интерфейсе реализован метод, который запускается после того как пользователь тапнул по кнопке.
Итак мы вызывали интерфейс, а затем в фигурных скобках должны прописать тот код который запускается при тапе по кнопке. Напомню, мы хотим записать в текстовое поле название этой кнопки. Для этого вот здесь мы обращаемся к текстовому полю через байндинг, а именно к его атрибуту text, который и предназаначен для отображения текста — если Вы посмотрите на xml верстку этого виджета, то там мы указывали этот атрибут и по умолчанию указали стартовый текст. Так вот при клике по кнопке мы будем этот текст менять и для этого обращаемся к атрибуту text и можем через оператор присваивания просто записать текст напрямую
Но опять же, если мы хотим записать текст напрямую то лучше его записывать через ресурсы. Но наша цель записать название кнопки и для этого после оператора присваивания мы обращаемся к кнопке через binding и вызываем атрибут text , который содержит в себе название кнопки
Давайте посмотрим что же у нас получилось. Запускаем приложение.
Итак мы видим кнопку и текстовое поле со стартовым текстом,
теперь тапаем по кнопке и текст менятся. У нас все получилось.
Теперь давайте рассмотрим пример когда у нас не одна, а несколько кнопок — скажем две. Возвращаемся в xml шаблон и добавляем вторую кнопку с новым id, новым названием и размещаем вторую кнопку под первой, а само текстовое поле размещаем под второй кнопкой
После этого переходим в Kotlin класс и меняем код навешивания прослушивателя тапов на первую кнопку — удаляем аргумент и передаем в качестве аргумента this.
This указывает на имя класса внутри которого вызывается этот прослушиватель, то есть указывает на класс MainActivity.
Теперь нам нужно там где наш класс активити унаследуется от шаблонного класса поставить запятую и вызвать класс View, поставить точку и вызвать знакомый вам уже интерфейс OnClickListener
После этого класс подчеркнится красным, что будет свидетельствовать об ошибке.
Мы кликаем по названию класса , появляется красная лампочка открываем ее и выбираем имплементацию методов,
в следующем окне выбираем методы, которые нужно импортировать и кликаем ok.
В итоге у нас импортируется метод
Мы меняем аргумент метода и удаляем все в теле метода.
Внутри метода создаем условный оператор when и в качестве объекта наблюдения указывам объект view – котор мы передали в аргументе метода, но не просто мы будем отслеживать объект view, а его id.
Напомню, что объектом класса view является любой виджет в том числе и кнопка.
Далее мы отслеживаем по какой кнопке тапнул пользователь — поэтоиу укзаываем id первой и второй кнопки. Указываем через ресурсы и в теле из каждого условия мы в текстовое поле в атрибут text записываем соответствующие названия кнопок
Все бы хорошо но код дублируется — давайте его оптимизируем.
Все кто интересуется темой андроид разработчик обучение с нуля бесплатно сталкиваются с проблемой дублирования кода.
Чуть ниже создаем функцию, которая в качестве аргумента будет принимать в себя строковую переменную и в теле этой функции мы записываем в текстовое поле — в атрибут text эту строковую переменную.
Теперь все что осталось это просто вызвать эту функцию в 2 наших условиях и передать в качестве аргумента соответстующие названия кнопки.
Теперь Вы можете протестировать работу приложения. Давайте запустим компиляцию!
Вы теперь понимаете как создавать виджеты. Как Вы можете видеть все работает. Вы знаете как обрабатывать нажния на кнопку и запускать какие-либо действия.
Если урок был Вам полезен, то поделитесь им в социальных сетях и напишите комментарий. Это поможет ознакомиться со статьей всем тем кто интересуется андроид разработчик обучение с нуля бесплатно. Спасибо за внимание!