Лабораторная работа № 2.
Создание приложение для Android под названием Светофор
Цель: Освоить основы работы с управляющими элементами в среде Android Studio.
Рассмотрим разработку программы под условным названием «Светофор». Интерфейс программы будет выглядеть следующим образом. На красном экране расположены три кнопки и одна текстовая надпись. При нажатии кнопок фон программы будет меняться на соответствующий свет, который закреплён за определённой кнопкой. Я попробую вам показать решение задачи с разных сторон, чтобы вы почувствовали себя увереннее.
Создание кнопок
Первые шаги выполняем по стандарту. Создаём новый проект на основе "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):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="@dimen/padding_medium"
android:text="@string/hello_world" />
<Button
android:id="@+id/buttonRed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="@+id/buttonYellow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/buttonRed"
android:text="Button" />
<Button
android:id="@+id/buttonGreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/buttonYellow"
android:text="Button" />
</RelativeLayout>
Рекомендуется не копировать строку, а написать ее вручную. При этом вы увидите, как работает подсказка при наборе текста. Для ускорения набора после ввода нескольких символов можно использовать комбинацию клавиш Ctrl+Space, чтобы среда разработки предложила подходящий вариант для продолжения. Выбрав нужный вариант, нажмите Enter, чтобы вставить готовое выражение.
Строковые ресурсы
Теперь требуется заменить текст на кнопках Button на слова Красный, Жёлтый и Зелёный. В лабораторной работе 1 было просто выполнено присвоение свойству 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 вашего проекта. Сейчас он может выглядеть так.
<resources>
<string name="app_name">TrafficLight</string>
<string name="hello_world">Hello world!</string>
<string name="menu_settings">Settings</string>
<string name="title_activity_main">Светофор</string>
<string name="red">Красный</string>
<string name="yellow">Жёлтый</string>
<string name="green">Зелёный</string>
</resources>
Также отредактируем элемент TextView. Допустим, требуется, чтобы на нём выводился текст, извещающий о текущем цвете фона приложения. Так как в ресурсах у нас уже есть слова Красный, Жёлтый и Зелёный, изначально предназначенные для кнопок, то мы не будем создавать новые строковые ресурсы, а воспользуемся готовыми наработками. По умолчанию у нас используется красный цвет. В окне свойств выбираем свойство Text для TextView и нажимаем кнопку с троеточием для вызова знакомого диалогового окна. На этот раз мы не будет щелкать на кнопке New String..., а сразу выделим строку red, которая, как мы помним, содержит текст Красный и щёлкнем кнопку OK (можно сделать сразу двойной щелчок на строке).
Переключитесь в режим редактора кода и посмотрите, как теперь выглядит описание для TextView.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="@dimen/padding_medium"
android:text="@string/red"
tools:context=".MainActivity" />
Рекомендуется постоянно переключаться в этот режим и смотреть, что происходит в коде. Это позволит увереннее разбираться в коде и читать чужой код. Нужно найти для себя разумный баланс между двумя подходами в программировании – визуальным и непосредственным написанием кода.
Рассмотрим создание ресурсов. Зададим цвета для фона программы. Вначале надо открыть файл 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.
Для того, чтобы убедиться, что нет ошибок в разметке, необходимо запустить приложение в эмуляторе.
Создание полного кода программы
Требуется обработать щелчки трёх кнопок и менять цвет фона приложения, а также текст в TextView. В ЛР№1 уже был рассмотрен удобный способ обработки события onClick. Закрепим этот пройденный материал и повторим тот же код для первой кнопки. Пропишем вручную событие onClick в теге Button:
android:onClick="buttonRed_Click"
Открываем файл класса активности MainActivity.java. Объявим переменные в классе и получим к ним доступ в методе onCreate():
// до метода onCreate()
public TextView tvInfo;
public RelativeLayout relativeLayout;
// в методе onCreate()
relativeLayout = (RelativeLayout)findViewById(R.id.relativelayout);
tvInfo = (TextView)findViewById(R.id.textView1);
Пишем обработчик события сразу после метода onCreate():
public void buttonRed_Click(View v)
{
tvInfo.setText(R.string.red);
relativeLayout.setBackgroundResource(R.color.redColor);
}
Данный код обеспечивает обращение к созданным ресурсам через специальный класс 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.
Button buttonYellow = (Button)findViewById(R.id.buttonYellow);
buttonYellow.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
tvInfo.setText(R.string.yellow);
relativeLayout.setBackgroundResource(R.color.yellowColor);
}
});
Запускаем приложение и щёлкаем по кнопкам - текст в надписи и фон в приложении должны меняться в соответствии с нажатой кнопкой.
Полный текст кода будет выглядеть следующим образом:
package ru.alexanderklimov.trafficlight;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class MainActivity extends Activity {
public TextView tvInfo;
public RelativeLayout relativeLayout;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
relativeLayout = (RelativeLayout)findViewById(R.id.relativelayout);
tvInfo = (TextView)findViewById(R.id.textView1);
Button buttonYellow = (Button)findViewById(R.id.buttonYellow);
buttonYellow.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
tvInfo.setText(R.string.yellow);
relativeLayout.setBackgroundResource(R.color.yellowColor);
}
});
}
public void buttonRed_Click(View v)
{
tvInfo.setText(R.string.red);
relativeLayout.setBackgroundResource(R.color.redColor);
}
public void buttonGreen_Click(View v)
{
tvInfo.setText(R.string.green);
relativeLayout.setBackgroundResource(R.color.greenColor);
}
}
