Светофор

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

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

Первые шаги вполне очевидны. Создаем новый проект на основе "Hello, World" и перетаскиваем с панели инструментов две (пока) кнопки. Далее растягиваем их по ширине экрана. Для этого в окне свойств присваиваем свойству Layout width значение fill_parent.

Обратите внимание, что нужно использовать свойство Layout width, а не Width, как это сделал я в первый раз по привычке, увидев вроде подходящее свойство в списке. Нужное свойство находится в самой нижней части списка свойств в категории Misc.

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

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


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

    <Button
        android:id="@+id/butRed"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="butRed_Click"
        android:text="Button" >
    </Button>

    <Button
        android:id="@+id/butYellow"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button" >
    </Button>
</LinearLayout>

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


    <Button
        android:id="@+id/butGreen"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="butGreen_Click"
        android:text="Button" >
    </Button>

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

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

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

Процесс создания строковых ресурсов очень прост. Переключитесь обратно в режим Graphical Layout и выберите кнопку butRed. В окне свойств выделите свойство Text. Во второй колонке отобразиться кнопка с троеточием. Щелкните на кнопке. У вас откроется диалоговое окно Resource Chooser. Нажмите на кнопку New String... для создания нового строкового ресурса. В новом окне Create New Android String введите текст для кнопки (напр. Красный) в первом текстовом поле String, а во втором поле New R.string введите название ресурса, например, red. Аналогичным образом поступите с другими двумя кнопками (Желтый и Зеленый)

Create New Android String

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

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


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, TrafficLights!</string>
    <string name="app_name">Traffic Lights</string>
    <string name="red">Красный</string>
    <string name="green">Зеленый</string>
    <string name="yellow">Желтый</string>
</resources>

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

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


<TextView
    android:id="@+id/tvInfo"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/redcolor"
    android:text="@string/red" />

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

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

К сожалению, в Eclipse я не нашел редактора цветов, чтобы можно было визуально выбрать нужный цвет и скопировать его код. Поэтому пришлось воспользоваться Яндексом. Вводим запрос color yellow и получаем готовый код, который выводится поверх всех ссылок.

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

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

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

Код для программы

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


android:onClick="butRed_Click"

Пишем обработчик события. Открываем файл TrafficLights.java и пишем сразу после метода onCreate


public void butRed_Click(View v)
{
	tvInfo.setText(R.string.red);
	linearLayout.setBackgroundResource(R.color.redColor);
}

Сами переменные объявим в классе и получим к ним доступ в методе onCreate:


public TextView tvInfo;
public LinearLayout linearLayout;

// в методе onCreate
linearLayout = (LinearLayout)findViewById(R.id.linlayout);
tvInfo = (TextView)findViewById(R.id.tvInfo);

Вроде ничего сложного. Мы обращаемся к созданным ресурсам через специальный класс R и через точку указываем тип ресурсов, а затем имя ресурса.

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

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


butYellow.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
		tvInfo.setText(R.string.yellow);
		
		linearLayout.setBackgroundResource(R.color.yellowColor);
	}
});

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

Приложение Светофор

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


package ru.alexanderklimov.trafficlights;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Button;;

public class TrafficLights extends Activity {
	
	/** Called when the activity is first created. */
	
	public TextView tvInfo;
	public LinearLayout linearLayout;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        linearLayout = (LinearLayout)findViewById(R.id.linlayout);
        tvInfo = (TextView)findViewById(R.id.tvInfo);
        Button butYellow = (Button)findViewById(R.id.butYellow);
        Button butGreen = (Button)findViewById(R.id.butGreen);
 
        butYellow.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				tvInfo.setText(R.string.yellow);
				
				linearLayout.setBackgroundResource(R.color.yellowColor);
			}
		});
    }
    
    public void butRed_Click(View v)
    {
    	tvInfo.setText(R.string.red);
    	linearLayout.setBackgroundResource(R.color.redColor);
    }
    
    public void butGreen_Click(View v)
    {
    	tvInfo.setText(R.string.green);
    	linearLayout.setBackgroundResource(R.color.greenColor);
    }
}