Щелчок кнопки/Счетчик ворон
На прошлом занятии я уже упомянул о возможности визуального построения интерфейса программы. Сегодня мы попробуем поместить на форму кнопку визуальным способом, а также написать код, который будет выполняться при щелчке на кнопке.
Можете открыть старый проект или создать новый проект с стандартными настройками.
Откройте файл main.xml. Обратите внимание, что в нижней части окна среды разработки имеются две вкладки: Graphical Layout и main.xml. Откройте вкладку Graphical Layout и внимательно изучите окно. Слева у вас будет панель Palette, содержащая большой список элементов Views и Layouts. Сейчас нас интересуют только элементы Views, которые являются элементами управления - кнопки, флажки, переключатели, индикаторы прогресса и т.д.
Подведите курсор к элементу Button и перетащите его на форму. В результате ваших действий на форме появится стандартная кнопка с настройками по умолчанию. В правой части экрана у вас имеется окно Properties, в котором вы можете настроить необходимые свойства для кнопки. Например, отыщите свойство Text и присвойте ему свой текст - Поздороваться. По своей старой привычке я также присвоил свойству id новое значение @+id/butHello вместо стандартного @+id/button1.
Заодно добавим на форму текстовое поле, куда будем выводить приветствие после щелчка кнопки. Выбираем на панели инструментов элемент EditText и перетаскиваем его на форму. В окне свойств удаляем текст из свойства Text, чтобы в текстовом поле ничего не было.
Кстати, если вам не нравится взаимное расположение помещенных элементов, то можете на форме перетаскивать кнопку и текстовое поле, меняя их местами. Обратите внимание, что элементы при этом располагаются строго друг над другом. У вас не получится расположить их рядом на одной линии. Забегая вперед, скажу, что такое поведение связано с контейнером LinearLayout, внутри которого расположены наши элементы. LinearLayout предназначен специально для тех случаев, когда необходимо упорядочить элементы строго в столбик. При этом разработчику не приходится заниматься вычислениями координат для каждого элемента - система самостоятельно расчитает расположение элементов.
Будем считать, что интерфейс программы готов - у нас есть кнопка для нажатия и текстовое поле для вывода сообщений.
Теперь нужно научиться писать код для щелчка кнопки. Переключитесь с вкладки Graphical Layout на вкладку main.xml и найдите тег <Button>. Добавьте к нему еще одну строчку:
<Button android:layout_height="wrap_content"
android:id="@+id/butHello"
android:layout_width="wrap_content"
android:text="Поздороваться"
android:onClick="butHello_Click"></Button>
Таким образом мы определили событие onClick для кнопки (щелчок) и теперь нам осталось написать обработчик события. Открываем файл HelloWorld.java и пишем сразу после метода onCreate
public void butHello_Click(View v){
edtext.setText("Здравствуй, друг");
}
Обратите внимание, что имя метода butHello_Click должно совпадать со строкой, которую мы задали в атрибуте android:onClick для кнопки, а также добавляем скобки с текстом View v. В фигурных скобках пишем код, который должен выполниться при щелчке кнопки. Так как нам надо вывести текст в текстовом поле, то просто присваиваем нужный текст через метод setText.
Полный текст кода для HelloWorld.java будет выглядеть следующим образом.
package ru.alexanderklimov.helloworld;
import android.app.Activity;
import android.os.Bundle;
import android.widget.EditText;
import android.view.View;
public class HelloWorld extends Activity {
private EditText edtext;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
edtext = (EditText)findViewById(R.id.editText1);
}
public void butHello_Click(View v){
edtext.setText("Здравствуй, друг");
}
}
Здесь стоит обратить внимание на строчку edtext = (EditText)findViewById(R.id.editText1);. Метод findViewById используется для получения ссылки на элемент, у которого мы определили ID. В дальнейшем вы постоянно будете использовать данный код в своих программах.
Новички на первых порах часто делают элементарную ошибку - помещают строчку инициализации объекта до метода setContentView(). Запомните, сначала нужно вывести шаблон (R.layout.main), а только потом кнопки, текстовые поля, переключатели и т.д.
Другой способ обработки щелчка кнопки
На самом деле, способ обработчки щелчка кнопки, который я вам показал, является относительно новым для разработчиков. Google рекомендует использовать данный способ как удобный, требующий меньше кода и понятный для чтения. Но тем не менее вам придется сталкиваться со старым способом, который берет свои корни от Java. Поэтому необходимо изучить и второй способ, чтобы понимать другие примеры.
Добавьте в проект новую кнопку. Если первую кнопку мы добавляли перетаскиванием элемента Button с панели инструментов, то на этот раз мы попробуем создать кнопку вручную. Откройте файл main.xml в режиме редактора кода и скопируйте код для первой кнопки. Потом с новой строки вставьте скопированный текст и подправьте несколько атрибутов, например, так.
<Button android:text="Считаем ворон"
android:id="@+id/SecondButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></Button>
Я поменял для кнопки текст и идентификатор, а также растянул кнопку на весь экран (выделено жирным). Переключитесь в графический режим и посмотрите, как выглядит кнопка.
Открываем файл HelloWorld.java и пишем следующий код:
Button butSecond;
Когда вы напишете код, то слева появится предупреждающий значок. Если подвести курсор к значку, то появится всплывающая подсказка: Button cannot be resolved to a type. Теперь подведите курсор к слову Button. Снова появится всплывающее окно, в котором среда разработки предложит вам несколько вариантов исправления ошибки. В нашем случае необходимо выбрать первый вариант: Import 'Button' (android.widget). Тогда у вас в секции Imports в верхней части кода появится строчка import android.widget.Button; и предупреждающий значок исчезнет.
После строчки setContentView(R.layout.main); пишем:
butSecond = (Button)findViewById(R.id.SecondButton);
Рекомендую не копировать текст со страницы, а вводить текст вручную. Так вы быстрее освоете программирование, кроме того научитесь пользоваться системой подсказок Eclipse. Например, попробуйт после ввода первых трех символов fin нажать комбинацию клавиш Ctrl+Space. Вы увидите, как среда разработки сама вставит нужное слово findViewById(), а курсор будет находиться уже между скобками. Продолжайте набирать символ R, а затем символ точки, и увидите новую подсказку. Если подсказка совпадает с вашими намерениями, то нажмите клавишу Enter. Освоившись с системой подсказок, вы повысите скорость набора кода, а также уменьшите количество опечаток.
Ну а мы переходим к самому важному - обработчику щелчка кнопки. Нам понадобится дополнительная переменная-счетчик count, которая будет содержать число подсчитанных ворон (её необходимо разместить выше метода onCreate).
int count = 0;
Теперь пишем обработчик, активно используя всплывающие подсказки для быстрого набора.
butSecond.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
edtext.setText("Я насчитал " + ++count + " ворон");
}
});
При этом не забудьте импортировать интерфейс import android.view.View.OnClickListener;
Запускаем приложение и начинаем щелкать по кнопке. При каждом щелчке счетчик count будет увеличиваться на единицу и эта информация будет отображаться на экране.
Итак, мы познакомились с новым способом обработки щелчка кнопки. Какой способ вы предпочтете - зависит от привычек и вкуса.
Теперь у вас есть чрезвычайно полезное приложение Счетчик ворон. Если преподаватель вас неожиданно спросит на занятии, почему вы смотрите в окно с рассеяным видом, вы можете смело достать свой телефон и сказать, что заняты очень важным делом - считаете ворон.
Впрочем, программа получилась у нас универсальной, можно считать не только ворон за окном.
