Go to content
Your browser is out of date. It has known security flaws and may not display all features of this websites. Learn how to update your browser[Закрыть]

Старые поделки


Разработка под Android - Часть 2: Графические элементы


Автор: Серый череп



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

Для этого перейдем к файлу 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!» - этот текст будет на нашей кнопке. Мы создали первую часть макета, которая позволяет вводить текст в текстовое поле.

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

 
import android.widget.Button;
import android.widget.EditText;

После этого нам понадобится добавить еще несколько импортов. Первый нужен для добавления к кнопке события Listen, второй для нашего toast-а, третий - для возможности просмотра контекста приложения и последний - для управления макетом. Эти импорты нужно вставить в код после предыдущих, вот их код:

 
import android.view.View.OnClickListener;
import android.widget.Toast;
import android.content.Context;
import android.view.View;

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

 
public class HelloMain extends Activity {
EditText helloName;

Мы создаем ссылку на наше текстовое поле перед всеми функциями, так чтобы объявить его один раз, но по необходимости вызывать несколько раз.

 
/** Вызывается при первом создании операции. */
@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). После создания этой функции мы сможем считывать текст из текстового поля и отображать его вместе со статическим текстом.

 
// добавляем анонимную имплементацию класса OnClickListener
private OnClickListener mAddListener = new OnClickListener()
{
public void onClick(View v)
{
long id = 0;
// делает что-либо, когда нажимается кнопка
try
{
helloName = (EditText)findViewById(R.id.helloName);

Здесь мы описываем элемент текстового поля (TextBox), который мы объявили ранее, и включаем текстовое поле в макет поиском по идентификатору ID, который ему присвоили раньше.

 
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-ы более эффективны, чем всплывающие текстовые блоки, так как они меньше отвлекают пользования от основного процесса.

 
}
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 еще далеко. В следующем посте мы будем изучать базы данных, некоторые простые запросы, а также построение БД с нуля. Как всегда, если у вас возникнут проблемы с кодом, оставляйте свои комментарии, общими силами мы решим эти проблемы.