Сайт разработчика Александр Климова

/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000

Красивое оформление для игры

Метки: RelativeLayout, Toast, ImageButton, TextView, Style

При создании игры нужно заинтересовать пользователя. Простые стандартные кнопки и прочие элементы здесь не подойдут. Рассмотрим пример создания привлекательного дизайна для приложения в стиле викторины. Пользователю выдаётся вопрос с возможными ответами. Программы сообщает пользователю, правильным ли был ответ и задаёт новый вопрос. Здесь рассматривается только дизайн игры, а не программная логика.

Создадим новый проект с стандартной разметкой RelativeLayout.

Фоновое изображение

Сперва позаботимся о фоновом изображении. Так как игра может запускаться на устройствах с разными размерами экранов, то необходимо подготовить несколько образцов для каждого типа экрана. Заготовки следует скопировать в папки drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xhdpi.

Пропишите изображение как фон в RelativeLayout:


<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="@drawable/background" >
</RelativeLayout>

Если запустить проект, то увидим следующую картинку:

Далее подготовим изображения для ImageButton. Их тоже придётся разработать под каждый вид экрана и скопировать в те же папки, куда мы копировали фоновое изображение.

Код для отдельного элемента ImageButton:


<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:src="@drawable/button2003" />

На экране это будет выглядеть следующим образом:

Разместите ещё три дополнительные кнопки и наш экран для игры будет готов.



Вероятно, вы обратили внимание на предупреждающие сообщения Missing contentDescription attribute on image при размещении ImageButton. Это не является ошибкой, но желательно установить данный атрибут, чтобы люди с ограниченными возможностями могли работать с приложением через специальные настройки на устройстве.

Подготовьте строковые ресурсы:


<string name="button2003">Answer 2003</string>
<string name="button2004">Answer 2004</string>
<string name="button2005">Answer 2005</string>
<string name="button2006">Answer 2006</string>

После этого добавьте к каждому ImageView атрибут по следующему образцу:


android:contentDescription="@string/button2003"

Создаём стильный текст

Добавим новый строковый ресурс для номера версии приложения:


<string name="Version">Version 1.0</string>

Добавим в конце разметки новый элемент TextView, в которой будет выводиться версия программы:


<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="26dp"
    android:paddingBottom="5dp"
    android:text="@string/Version"
    android:textColor="#f7f9f6"
    android:textSize="13dp"
    android:textStyle="italic" />

Внешний вид текста для номера версии выглядит слишком стандартно. Применим к нем стиль. Откроем файл res/values/styles.xml file и добавим новый стиль VersionFont:


<style name="VersionFont">
    <item name="android:textColor">#f7f9f6</item>
    <item name="android:textSize">13dp</item>
    <item name="android:textStyle">italic</item>
</style>

Применим стиль к TextView:


<TextView
    android:id="@+id/textView1"
    style="@style/VersionFont"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="26dp"
    android:paddingBottom="5dp"
    android:text="@string/Version" />

На этом разработка дизайна для программы закончена. Теперь переходим к коду. Но напоследок добавьте к каждому компоненту ImageButton атрибут для обработки щелчка android:onClick


android:onClick = "onClick2003"

Откройте редактор кода для класса активности и создайте метод для обработки первой кнопки:


public void onClick2003 (View view)
{
    Toast.makeText(this, "Wrong! Try again", Toast.LENGTH_SHORT).show();
}

Добавьте аналогичный код для других кнопок. Игра готова!

На странице источника статьи можно скачать файлы для графики.

Идея для статьи: Android UI Workshop: Build an Interactive Quiz App

How to Create a Pub Chalk Board UI in Adobe Illustrator | Vectortuts+

Реклама