§ 2. Проектирование интерфейса, класс переходов — Intent

Благодарю тех читателей, которые следят за ошибками, в особенности за смысловыми. Я пишу эти параграфы в word'e, где они выглядят более читабельными, надо или их выкладывать? Если да, то в каком формате? Нужно ли выкладывать исходники? Также напоминаю, что все эти параграфы и прочие новости я публикую в блоге gglphone.com

Рассмотрим наиболее важную часть создания приложения – проектирование интерфейса. Как и в любой другой отрасли, так и в мобильных приложениях плохо спроектированный интерфейс порой может значительно сократить число потенциальных пользователей. Грамотный интерфейс – это психология взаимодействия программы и пользователя, тот эффект, который будет получен в результате работы программы.
Начнем с построения простейшего интерфейса – формы Логин + Пин-код и для разнообразия добавим какой-нибудь анимационный эффект.


Имеем простой код:
package com.google.android.hello;

import android.app.Activity;
import android.os.Bundle;
public class HelloAndroid extends Activity {

@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
}
}

Запускаем и видим следующий результат:



Как это произошло? Все очень просто. Команда SetContentView() – загружает Layout для текущего Activity класса. Layout – это описание нашего интерфейса. Для нашего класса Activity мы загружаем Layout.main, описание которого находится в файле main.xml, а данный файл расположен в папке layout, которая в свою очередь расположена в папке res проекта.



Теперь разберемся как устроен файл main.xml



На изображении представлен структура элементов. Главный элемент LinearLayout содержит в себе все остальные элементы(TextView, EditText). Они будут выводится в том порядке, в котором отображены.
У каждого элемента есть набор атрибутов, с помощью которых мы можем управлять элементом. Например если хотим сделать отступ от краев экрана ставим атрибут android:padding = 10 dip. Для большей наглядности приведу файл main.xml в его реальном виде:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#c7c7c7"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Login" />
<EditText
android:maxLines="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
id="@+id/login" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Pin code" />
<EditText
android:maxLines="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:password="true"
id="@+id/pin" />


С атрибутами все понятно. Перейдем к добавлению эффекта shake нашей формы. Суть эффекта – анимация, если пользователь вводит пин код, длиной не четыре символа — окно ввода сотрясается. При правильном вводе пин кода переходим на следующее окно. Для этого нам надо добавить процедуру, которая активируется после того как пользователь ввел данные. Сначала в классе Activity создаем два объекта:
EditText editLogin;
EditText editPassword;

Связываем их с описанием в файле main.xml через id, и добавляем функцию setOnClickListener(), которая ждет ввода.
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
editLogin = ((EditText) this.findViewById(R.id.login));
editPin = ((EditText) this.findViewById(R.id.pin));
editPin.setOnClickListener(this);
}

Далее чтобы долго не мусолить – приведу весь код с комментариями.
package com.google.android.hello;

// Подключение используемых классов
import android.app.Activity;
import android.app.NotificationManager;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.EditText;

public class HelloAndroid extends Activity implements View.OnClickListener{
EditText editLogin;
EditText editPin;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
editLogin = ((EditText) this.findViewById(R.id.login));
editPin = ((EditText) this.findViewById(R.id.pin));
editPin.setOnClickListener(this);
}
public void onClick(View v) {
// Создаем объект анимации, его описание хранится в xml файле shake.xml
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
// Создаем объект всплывающего окна
NotificationManager nm = (NotificationManager)
getSystemService(NOTIFICATION_SERVICE);
// Копируем пин код который ввел пользователь в переменную pass
String pass = editPin.getText().toString();
// Проверяю равна ли длина 4
if( pass.length() == 4)
{
// Выводим всплывающее окно, с текстом - "Welcome + логин пользователя"
nm.notifyWithText(R.id.login,
"Welcome "+editLogin.getText().toString(),
NotificationManager.LENGTH_SHORT, null);
// Создаем класс перехода
Intent intent = new Intent();
intent.setClass(HelloAndroid.this, WelcomeAndroid.class);
startActivity(intent);
//Закрываем текущий Activity объект
finish();
}
else
{
// Если пин код неправильной длины - применияем анимацию
editPin.startAnimation(shake);
// Выводем всплывающее окно "Wrong pin, must be 4 digits"
nm.notifyWithText(R.id.login,
"Wrong pin, must be 4 digits",
NotificationManager.LENGTH_SHORT, null);
// Очищаем форму ввода пин кода
editPin.setText("");
}
}

Остановимся более подробно на некоторых моментах. Класс Intent, с помощью него осуществляются переходы между Activity окнами. Хотим запустить новое окно, делаем для него описание welcome_android.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#c7c7c7"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Welcome Android" />


Соответственно intent.setClass(HelloAndroid.this, WelcomeAndroid.class) устанавливает переход, а функция startActivity(intent) осуществляет его.

При вводе 4-х символьного пин кода и логина переходим на следующее окно:



Добавлю что еще нужно создать xml для анимации. Для этого в папке res создадим папку anim и в ней два файла:

cycle_7.xml
<?xml version="1.0" encoding="utf-8"?>
<CycleInterpolator
xmlns:android=http://schemas.android.com/apk/res/android android:cycles="7" />

shake.xml
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android=http://schemas.android.com/apk/res/android android:fromXDelta="0"
android:toXDelta="10"
android:duration="1000"
android:interpolator="@anim/cycle_7" />

Также не забываем добавить в AndroidMainfest.xml:

<activity class=".WelcomeAndroid" android:label="@string/app_name">
Вот в принципе и все про построение интерфейсов и переходах между окнами.

Следующие параграфы будут более специализированными, в них я буду рассматривать особенности программирования в среде, поэтому внимательно запомнить данные основы, далее я их не буду пояснять и комментировать.