В этом обучающем посте мы продолжим работать над программой «hello world» с того места, где мы остановились в прошлый раз. На этот раз нам предстоит разработать графический пользовательский интерфейс (GUI) и toast. GUI будет состоять из кнопки, текстового окна и текстовой метки (указателя). "Toast" будет всплывать на экран при нажатии кнопки.

Многие спросят, что такое toast. Если говорить языком не-программистов, toast - это текстовое оповещение, которое в основном служит для отображения ошибки на экране (Я большой любитель использовать toast-ы вместо звуковых сигналов, так как они не такие назойливые). В этой статье мы будем использовать toast для отображения сообщения «Hello Greg» в нижней части экрана. После изучения этой статьи вы с легкостью сможете использовать toast-ы в различных командах, редактировать внешний вид нашей программы «hello world» и считывать текст из текстового поля для использования в toast-ах.

Начнем с копирования нашей текущей версии проекта Hello World, так чтобы мы могли экспериментировать с оригиналом, но иметь два отдельных проекта, чтобы видеть разницу. Для этого кликнем правой кнопкой мыши на корневой папке нашего проекта HelloWorld в правой панели (Navigation Explorer), выберем функцию копирования (не Copy Qualified Name) и нажмем на нее. Далее нужно правой кнопкой мышки кликнуть на пустом месте Navigation Explorer и нажать «Paste», т.е. вставить. Вас попросят дать новое имя для этого проекта, а также разрешить использовать местоположение по умолчанию. Мы назовем новый проект ImprovedHelloWorld, и оставим галочку напротив графы «use default location» (использовать местоположение по умолчанию). Нажмите OK, и новый проект будет создан из старого.

strings.xml

Первым нашим заданием будет изменение файла strings.xml, а именно добавление элемента под app_name.  Это производится простым копированием строки стринговой константы и ее вставки прямо под последним элементом </string>. Изменим название нашего стрингового элемента на «press» и дадим ему значение Press Me!. Далее мы изменим содержание константы hello, поменяв текст на Enter Your Name Here: (введите ваще имя здесь:) вместо Hello Android, Hello World!. Все нужные изменения внесены, пора переходить к дизайну GUI (графического пользовательского интерфейса).

main.xml

Для этого перейдем к файлу main.xml и внесем необходимые изменения. Самый первым элементом в файле идет LinearLayout, который по сути создает пространство для добавления таких объектов, как текстовые окна, кнопки и т.д., и служит для форматирования вывода программы. Проще говоря, LinearLayout поставит все элементы друг за другом строго в одну колонку или в одну строку. Далее у нас идет метка TextView, пройдемся по всем ее параметрам. Android:layout_width и android:layout_height определяют, как будет вести себя объект, используемый в макете. Эти параметры имеют значения fill_parent или wrap_content. Fill_parent растягивает размер объекта так, чтобы он полностью заполнил экран по горизонтали или по вертикали. Wrap_content выполняет форматирование размера элемента по его содержимому, сжимает или наоборот, растягивает. Обе эти переменные могут использоваться во множестве различных объектов, таких как Layouts, Text Views, Text Boxes, Buttons и др. Android:text используется в определенных объектах (TextViews и TextBoxes) для отображения текста пользователю. На данный момент мы также отображаем пользователю текст, но вызываем его из файла strings.xml вместо того, чтобы вписывать его непосредственно в код программы. Чтобы сослаться на файл strings.xml, нужно только в скобках ввести @string/press, где press - это название переменной, содержащий нужный текст.

С терминами мы уже определились, поэтому перейдем к программированию метки, текстового окна и кнопки. Для этого просто добавим текстовое поле и кнопку по тому же принципу, как это сделали с меткой в string.xml. Чтобы добавить текстовое поле (Textbox), добавим новую строку под концом элемента <TextView />. Для большей точности, я напечатаю сам код в строку и потом объясню, что он означает. Вот сам код: <EditText android:id=”@+id/helloName” android:layout_width=”fill_parent” android:layout_height=”wrap_content” />.  EditText в данном случае и есть наше текстовое поле. Добавление @+id/ перед названием переменной даст возможность потом привязаться к .java файлу. Далее добавим код: <Button android:id=”@+id/go” android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:text=”@string/press” /> прямо под окончанием описания EditText. Обратите внимание, что мы опять ссылаемся на string.xml и вызываем переменную, которая говорит «Press Me!» - этот текст будет на нашей кнопке. Мы создали первую часть макета, которая позволяет вводить текст в текстовое поле.

Следующий раздел будет изобиловать кодом, я приведу как можно больше скриншотов, чтобы помочь вам его понять. Нужно уловить главный принцип: когда нам нужно ссылаться на объект макета, его необходимо импортировать. Нам нужно добавить импорты для кнопки и текстового поля. Мы можем реализовать это простым добавлением этих строк в верхушку кода:

view plaincopy to clipboardprint?
   
import android.widget.Button; 
import android.widget.EditText; 
После этого нам понадобится добавить еще несколько импортов. Первый нужен для добавления к кнопке события Listen, второй для нашего toast-а, третий - для возможности просмотра контекста приложения и последний - для управления макетом. Эти импорты нужно вставить в код после предыдущих, вот их код:

view plaincopy to clipboardprint?
   
import android.view.View.OnClickListener; 
import android.widget.Toast; 
import android.content.Context; 
import android.view.View; 
Далее приступаем к программированию функций обработчика событий для нашей кнопки и onCreate, которые вызываются при запуске программы. Для простоты и лучшего понимания я приведу остаток кода и поясню его предназначение.

view plaincopy to clipboardprint?
   
public class HelloMain extends Activity { 
EditText helloName; 
Мы создаем ссылку на наше текстовое поле перед всеми функциями, так чтобы объявить его один раз, но по необходимости вызывать несколько раз.

view plaincopy to clipboardprint?
   
/** Вызывается при первом создании операции. */ 
@Override 
public void onCreate(Bundle savedInstanceState) 
{ 
super.onCreate(savedInstanceState); 
setContentView(R.layout.main); 
// Фиксирует кнопку из макета 
Button button = (Button)findViewById(R.id.go); 
// Регистрирует onClick (считыватель нажатий) 
button.setOnClickListener(mAddListener); 
} 
Этот код фиксирует кнопку с макета, используя переменную. Мы также назначим ей обработчик событий onClick, который объявлен в десятой строке кода вверху. Ниже приведен код самого обработчика событий (Event Handler). После создания этой функции мы сможем считывать текст из текстового поля и отображать его вместе со статическим текстом.

view plaincopy to clipboardprint?
   
// добавляем анонимную имплементацию класса OnClickListener 
private OnClickListener mAddListener = new OnClickListener() 
{ 
public void onClick(View v) 
{ 
long id = 0; 
// делает что-либо, когда нажимается кнопка 
try 
{ 
helloName = (EditText)findViewById(R.id.helloName); 
Здесь мы описываем элемент текстового поля (TextBox), который мы объявили ранее, и включаем текстовое поле в макет поиском по идентификатору ID, который ему присвоили раньше.

view plaincopy to clipboardprint?
   
Context context = getApplicationContext(); 
CharSequence text = "Hello " + helloName.getText() + "!"; 
int duration = Toast.LENGTH_LONG; 
Toast toast = Toast.makeText(context, text, duration); 
toast.show(); 
Вышеуказанный фрагмент кода берет содержание контекста (Context) и добавляет его к нашему Toast-у вместе с динамическим текстом CharSequence и длиной, в которой он появится на экране. В нашем случае длина должна быть побольше. В целом Toast-ы более эффективны, чем всплывающие текстовые блоки, так как они меньше отвлекают пользования от основного процесса.

view plaincopy to clipboardprint?
   
} 
catch (Exception ex) 
{ 
Context context = getApplicationContext(); 
CharSequence text = ex.toString() + "ID = " + id; 
int duration = Toast.LENGTH_LONG; 
Toast toast = Toast.makeText(context, text, duration); 
toast.show(); 
} 
} 
}; 
} 
Последнее, что мы делаем для этой функции - проверка на ошибки. Программа проверит наш код, и если в нем обнаружится ошибка, она будет показана вместе с описанием. В таких функциях, как эти, очень важно проверить все, чтобы не исправить ошибки до запуска программы. Обработчик ошибок словит все ошибки в коде и в удобной для пользователя форме их обозначит.

Верхняя половина кода:
Код раз
Нижняя половина кода, продолжение предыдущего фрагмента:
Код два

После того, как мы прописали код для нашего файла .java, можем запустить программу и посмотреть на наш улучшенный вариант программы «Hello World». Обратите внимание, когда в текстовом поле нет текста, и вы нажимаете кнопку, программа все равно работает корректно. Пользователя не засыпает текстовыми сообщениями об ошибках. Конечный продукт наших трудов выглядит примерно так:

Результат

На этом программирование нашего примера Hello World заканчивается, но до конца изучения темы разработок под Android еще далеко. В следующем посте мы будем изучать базы данных, некоторые простые запросы, а также построение БД с нуля. Как всегда, если у вас возникнут проблемы с кодом, оставляйте свои комментарии, общими силами мы решим эти проблемы.