Создание полного кода программы

Лабораторная работа № 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);

}

}