В этом уроке, а также еще 2-х последующих, мы возьмемся за интересную задачу - создание всем известной игры Hangman, в которой пользователю нужно по буквам угадывать слова, а в случае если он не отгадал загадку, то персонаж в игре от горя вешается. Приложение будет содержать 2 экрана, включать в себя адаптеры, диалоги и панель action bar и возможность для сохранения игровых данных.

Этот урок можно выполнить без особых сложностей даже начинающему, так что не пугаемся и беремся за дело. Приложения будет иметь простую базовую структуру и если вы чувствуете себя в Android программировании довольно уверенно, то можете даже добавить в проект что то свое (но только после завершения строго по уроку:)).  Итак, начинаем.

Урок будет разбит на 3 разных части:

     - настройка проекта;

     - работа с пользовательским интерфейсом;

     - настройка игрового процесса и взаимодействия с пользователем.

На экране приложения будет находится 2 основных элемента: область для вырисовывания виселицы и область с буквами алфавита. Каждый раз, когда пользователь выбирает определенную букву, программа будет проверять, есть ли эта буква в слове, которое нужно отгадать. Если она там есть, то данная буква будет появляться в нужном месте отгадываемого слова, если же ее нету, то в области виселицы будет отображаться часть тела человечка, готово убиться из за незнания пользователя отгадываемых терминов. В игре будет допускаться включительно до 6 ошибок, а на 7-й ошибке игра проиграна.

Создаем новый проект по имени Hangman (вообщем то, все названия на ваше усмотрение, только сами не путайтесь), все остальное я оставлю по умолчанию, выбираем Blank Activity и жмем Finish.

Приложение будет иметь кнопку для запуска игры и экран собственно с игрой. В экране, создаваемом для игры, будет использоваться несколько изображений: виселица и части тела человечка. Ниже под виселицей будет область с скрытым словом, которое нужно отгадать, а под ним разместится алфавит для выбора букв. Также будет использоваться элемент actiob bar для управления игрой и кнопка подсказки. 

Нам понадобятся изображения для частей виселицы, человечка, кнопки помощи и изображение фона игры. Все необходимые изображения можно скачать. Загрузите эти изображения и добавьте их в папку drawable приложения. 

Также в игре будут использоваться xml файлы, содержащие графические элементы. Это будут изображение фона для букв в слове, которое должен отгадать пользователь, а также фон для букв кнопок (обычных и выделенных). 

Начнем с фона для букв. В папке drawable создаем новый xml файл по имени letter_bg.xml. Добавим в него следующий код:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="line" >
 <stroke
 android:width="2dp"
 android:color="#FF333333" />
 <solid android:color="#00000000" />
 <padding android:bottom="20dp" />
 <size
 android:height="20dp"
 android:width="20dp" />
</shape>

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

Теперь создадим еще один файл, который будет использоваться для кнопок букв в их начальном состоянии. Создаем в папке drawable файл по имени letter_up.xml и добавляем туда следующее:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:padding="5dp"
 android:shape="rectangle" >
 <solid android:color="#FF333333" />
 <corners
 android:bottomLeftRadius="15dp"
 android:bottomRightRadius="15dp"
 android:topLeftRadius="15dp"
 android:topRightRadius="15dp" />
 <stroke
 android:width="2dp"
 android:color="#FFCCCCCC" />
</shape>

Можете не сдерживать себя и модифицировать указанные выше ресурсы на свой вкус, если чувствуете, что это для вас не сложно. 

Создадим еще один файл с именем letter_down.xml и добавим туда код:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:padding="5dp"
 android:shape="rectangle" >
 <solid android:color="#FF000000" />
 <corners
 android:bottomLeftRadius="15dp"
 android:bottomRightRadius="15dp"
 android:topLeftRadius="15dp"
 android:topRightRadius="15dp" />
</shape>

За раз пользователь может выбрать только одну букву. Это значит, что в момент выбора пользователем буквы, все остальные кнопки будут не активными. Это будет отображаться обновлением фона кнопок с буквами. 

Смену фона каждой кнопки мы будет делать, используя приемы java, он будет меняться в зависимости от состояния кнопок, активны они или нет. 

Теперь давайте создадим основной layout файл для начального экрана приложения. Создавать его не нужно, он уже есть - activity_main.xml, просто отредактируем его. Открываем activity_main.xml и добавляем следующий код:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#FF000000"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context=".MainActivity" >
 <ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:src="@drawable/android_hangman_bg" />
 <Button
 android:id="@+id/playBtn"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:text="Play"
 android:textColor="#FFFF0000" />
</RelativeLayout>

Здесь мы установили фон для начального экрана приложения:

Если вы будете использовать какое то свое изображение, то вам нужно ссылаться, соответственно, не на android_hangman_bg, а на свой файл. 

Следующим шагом давайте создадим несколько других файлов, которые будут использоваться в дальнейшем. Создадим новый java класс по имени GameActivity. Для этого выделяем наше приложение, жмем правую кнопку мыши: New --- Java Class, вводим имя GameActivity и жмем ОК. Проследите, чтобы этот новый класс находился в одной папке с основным классом MainActivity.java. Работать в этом Activity мы будем позже. Давайте создадим файл разметки layout для нового класса. В папке layout нашего приложения создаем новый файл xml файл по имени activity_game.xml. Добавим в него следующий код:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="fill_parent"
 android:background="#FF000000"
 android:orientation="vertical"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin" >
 </LinearLayout>

Мы добавим необходимые элементы в этот layout файл в следующем уроке. 

Нам нужно добавить созданный класс GameActivity в файл манифеста приложения. В файле AndroidManifest.xml в теге <application> добавляем следующий код:

<activity
 android:name=".GameActivity"
 android:parentActivityName=".MainActivity"
 android:screenOrientation="portrait">

Строка android:name=".GameActivity" будет подсвечиваться красной линией, намекая на ошибку. Чтобы ее исправить зайдите в файл GameActivity.java и немножко его переделайте:

public class GameActivity extends Activity{
}

Вот теперь все должно быть нормально.

Мы настроили для GameActivity портретную ориентацию, если вы хотите, чтобы будущая игра могла переключатся и в альбомную ориентацию, уберите строку:

android:screenOrientation="portrait"

Также мы определили MainActivity.java, как родительскую activity для GameActivity, это нужно для того, чтобы панель action bar могла использоваться для управления игрой. 

Этот урок мы закончим тем, что настроим для нашей игры функцию запуска второй активности при нажатии на кнопку Play. Открываем файл MainActivity.java и импортируем туда следующее:

import android.content.Intent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

После строки setContentView(R.layout.activity_main); в методе onCreate определим нашу кнопку и подключим ей обработчик нажатий:

Button playBtn = (Button)findViewById(R.id.playBtn);
playBtn.setOnClickListener(this);

Для того, чтобы обработчик работал, нужно добавить нашей Activity осуществление интерфейса OnClickListener и метод обработки нажатия onClick (напомню, существует урок по созданию перехода между двумя Activity). В методе обработки нажатия кнопки мы зададим переход на GameActivity.java при нажатии на нашу кнопочку Play. Полный код MainActivity.java на данном этапе выглядит так:

import android.app.Activity;
import android.os.Bundle;
import android.content.Intent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener{

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 Button playBtn = (Button)findViewById(R.id.playBtn);
 playBtn.setOnClickListener(this);
 }

 @Override
 public void onClick(View v) {
 if (v.getId() == R.id.playBtn) {
 Intent playIntent = new Intent(this, GameActivity.class);
 this.startActivity(playIntent);
 }
 }
}

На этом первая часть по созданию игры Hangman закончена, в следующем уроке мы будем работать над созданием пользовательского интерфейса для игры. 

Оригинал урока.