Разработка более сложного приложения.

1. Приложение «светофор»

Для закрепления навыков создадим приложение, чуть сложнее предыдущего, а также познакомимся с другими приёмами программирования.

В качестве примера напишем программу под условным названием «Светофор». Интерфейс программы будет выглядеть следующим образом. На красном экране расположены три кнопки и одна текстовая надпись. При нажатии кнопок фон программы будет меняться на соответствующий свет, который закреплён за определённой кнопкой. Я попробую вам показать решение задачи с разных сторон, чтобы вы почувствовали себя увереннее.

Первые шаги вполне очевидны. Создаём новый проект на основе "Hello, World" и перетаскиваем с панели инструментов две (пока) кнопки. Далее растягиваем их по ширине экрана. Найдите на панели инструментов над формой кнопкуToggle Fill Width, на которой изображена двусторонняя стрелка ↔. Также можете это сделать вручную - для этого в окне свойств присваиваем свойству Width значение match_parent. Данному свойству соответствует атрибутandroid:layout_width.

В окне Outline выделите строку button1. У вас должно появиться окно свойств Properties. Давайте избавимся от стандартных идентификаторов, а будем сразу приучаться давать осмысленные имена. Например, для первой кнопки присвоим свойству Id значение @+id/buttonRed вместо стандартного @+id/button1, а для второй кнопки -@+id/buttonYellow.

Теперь попробуем создать третью кнопку не через визуальное проектирование, а через код. Для этого в главном окне переключитесь с вкладки Graphical Layout на вкладку activity_main.xml. Здесь вы увидите XML-разметку программы, в том числе и код для двух кнопок.

Наверное, вы уже догадались, как можно создать третью кнопку. Нужно просто взять за образец код любой из двух кнопок и добавить под ними новую строчку перед закрывающим тегом </RelativeLayout> (не забудьте изменить идентификатор и атрибут android:layout_below).

Настоятельно рекомендую не копировать строку, а написать ее вручную. Заодно вы увидите, как работает подсказка при наборе текста. Для ускорения набора после ввода нескольких символов можно использовать комбинацию клавиш Ctrl+Space, чтобы среда разработки предложила подходящий вариант для продолжения. Выбрав нужный вариант, нажмите Enter, чтобы вставить готовое выражение.

2. Строковые ресурсы

Теперь нам нужно заменить текст на кнопках Button на слова Красный, Жёлтый и Зелёный. На прошлом уроке мы просто присвоили свойству Text нужную строку. Но на самом деле это неправильный подход и даже среда разработки выводит предупреждающие значки у кнопок. По правилам, строки нужно хранить в строковых ресурсах. Подобный подход даёт разработчику множество преимуществ, в частности, быструю локализацию приложения. Считайте это стандартом, которого нужно придерживаться.

Процесс создания строковых ресурсов очень прост. Переключитесь обратно в режим Graphical Layout и выберите кнопку buttonRed. В окне свойств выделите свойство Text. Во второй колонке отобразится кнопка с троеточием. Щёлкните на кнопке. У вас откроется диалоговое окно Resource Chooser.

Нажмите на кнопку New String... для создания нового строкового ресурса. В новом окне Create New Android Stringвведите текст для кнопки (напр. Красный) в первом текстовом поле String, а во втором поле New R.string введите название ресурса, например, red. Аналогичным образом поступите с другими двумя кнопками (Жёлтый и Зёленый).

Щёлкните кнопку OK, чтобы подтвердить изменения. Обратите внимание, что текст на кнопках поменялся, а свойствуText были присвоены значения @string/red, @string/yellow, @string/green.

Программно можно добиться такого же результата, отредактировав файл strings.xml, который находится в папкеres/values вашего проекта. Сейчас он может выглядеть так.

Мы совсем забыли про элемент TextView. Исправим упущение. Пусть на нём выводится текст, извещающий о текущем цвете фона приложения. Так как в ресурсах у нас уже есть слова Красный, Жёлтый и Зелёный, изначально предназначенные для кнопок, то мы не будем создавать новые строковые ресурсы, а воспользуемся готовыми наработками. По умолчанию у нас используется красный цвет. В окне свойств выбираем свойство Text для TextView и нажимаем кнопку с троеточием для вызова знакомого диалогового окна. На этот раз мы не будет щелкать на кнопкеNew String..., а сразу выделим строку red, которая, как мы помним, содержит текст Красный и щёлкнем кнопку OK(можно сделать сразу двойной щелчок на строке).

Переключитесь в режим редактора кода и посмотрите, как теперь выглядит описание для TextView.

Рекомендую постоянно переключаться в этот режим и смотреть, что происходит в коде. Это позволит вам увереннее разбираться в коде и читать чужой код. Как правило, новички предпочитают работать через визуальные инструменты, а программисты с опытом самостоятельно пишут практически весь код. Нужно найти разумный баланс между двумя подходами. Всё придет со временем.

Со строками вроде разобрались. Давайте теперь в ресурсах зададим цвета для фона программы. Откройте сначала файл strings.xml, а затем откройте в нём закладку Resources. В появившемся окне щёлкаем на кнопке Add..., далее выбираем строку Color и закрываем окно щелчком кнопки OK. У нас появился новый ресурс типа Color. Заполним текстовые поля Name* и Value* значениями redColor и #FFFF0000 соответственно. Для жёлтой кнопки установим значения yellowColor и #FFFF00, для зелёной - greenColor и #FF00FF00.

К сожалению, сама среда не имеет встроенного помощника выбора цвета.

Обычно для цветовых ресурсов создаётся отдельный файл colors.xml, но мы пока учимся и нам простительно писать корявый код.

Определив в ресурсах все необходимые цвета, можно сразу присвоить красный цвет для элемента RelativeLayout. В окне свойств находим для данного элемента свойство Background и через редактор ресурсов устанавливаем ему значение @color/redColor. Либо вручную добавьте строчку android:background="@color/redColor" для тегаRelativeLayout.

Общий каркас приложения завершен. У нас есть три кнопки с соответствующими текстами, текстовая надпись со словом Красный, и красный фон, используемый в контейнере RelativeLayout. Пора приступать к программной логике программы. А пока можно запустить приложение в эмуляторе, чтобы убедиться, что мы не сделали ошибок в разметке.

3.Код для программы «Светофор»

Наша задача - обработать щелчки трёх кнопок и менять цвет фона приложения, а также текст в TextView. На прошлом занятии мы уже познакомились с удобным способом обработки события onClick. Давайте закрепим пройденный материал и повторим тот же код для первой кнопки. Пропишем вручную событие onClick в теге Button:

Открываем файл класса активности MainActivity.java. Объявим переменные в классе и получим к ним доступ в методеonCreate():

Пишем обработчик события сразу после метода onCreate():

Вроде ничего сложного. Мы обращаемся к созданным ресурсам через специальный класс R и через точку указываем тип ресурсов, а затем имя ресурса. Если вы до этого не присвоили идентификаторы для RelativeLayout и TextView, то вернитесь в файл activity_main.xml и добавьте атрибуты android:id="@+id/relativelayout" иandroid:id="@+id/textView1". На будущее старайтесь сразу присваивать идентификаторы элементам, с которыми придётся работать в коде.

Для третьей кнопки (Зелёный) событие зададим визуально. В окне свойств для кнопки butGreen найдите свойство On click и присвойте ему значение buttonGreen_Click. В этом случае среда разработки сама добавит нужную строчкуandroid:onClick="buttonGreen_Click" в файле разметки. В обработчике события Click код будет похож на код для красной кнопки, только необходимо поменять названия ресурсов.

Для второй кнопки напишем код в традиционной манере через прослушку события OnClickListener.

Запускаем приложение и щёлкаем по кнопкам - текст в надписи и фон в приложении должны меняться в соответствии с нажатой кнопкой.

Полный текст кода будет выглядеть следующим образом: