Андройд UI-design мобильного интерфейса

Создание нового окна

RelativeLayout

RelativeLayout

Атрибуты

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

Атрибуты
Чтобы компоненты "не прилипали" друг к другу, используются атрибуты, добавляющие пространство между ними.

Вертикальная ориентация

Добавление фона

Добавление фона
Сделаем так, чтобы фон пропорционально растягивался на весь экран

LinearLayout
Добавим на экран

Вертикальная ориентация

У разметки LinearLayout есть интересный атрибут android:layout_weight, который назначает индивидуальный вес для дочернего элемента. Этот атрибут определяет "важность" представления и позволяет этому элементу расширяться, чтобы заполнить любое оставшееся пространство в родительском представлении. Заданный по умолчанию вес является нулевым.
Например, если есть три текстовых поля, и двум из них объявлен вес со значением 1, в то время как другому не даётся никакого веса (0), третье текстовое поле без веса не будет расширяться и займёт область, определяемую размером текста, отображаемого этим полем. Другие два расширятся одинаково, чтобы заполнить остаток пространства, не занятого третьим полем. Если третьему полю присвоить вес 2 (вместо 0), это поле будет объявлено как "более важное", чем два других, так что третье поле получит 50% общего пространства, в то время как первые два получат по 25% общего пространства.
Также можно указать атрибут android:weightSum. Если атрибуту присвоить значение 100, то можно указывать вес дочерних элементов в удобном виде, как в процентах. Такой способ широко используется веб-мастерами при вёрстке.
LinearLayout

LinearLayout (container1)
Атрибут gravity задает позиционирование содержимого внутри визуального элемента.
center – элементы размещаются по центру

wrap_content – установка размера представления в wrap_content заставит его расширяться только настолько, чтобы содержать значения (или дочерние элементы управления), которые он содержит. Для элементов управления - таких как текстовые поля (TextView) или изображения (ImageView) – это обернет отображаемый текст или изображение. Для элементов макета он изменит размер макета в соответствии с элементами управления / макетами, добавленными в качестве его дочерних элементов.
LinearLayout (вложенный container2)

Для установки внутренних отступов применяется атрибут android:padding.
Он устанавливает отступы контента от всех четырех сторон контейнера.
Можно устанавливать отступы только от одной стороны контейнера, применяя следующие атрибуты:
android:paddingLeft
android:paddingRight
android:paddingTop
android:paddingBottom.
padding

LinearLayout (вложенный container3)

Добавим возможность прокрутки ScrollView
ScrollView

При большом количестве информации, которую нужно поместить на экране приходится использовать полосы прокрутки. В Android существуют специальные компоненты ScrollView и HorizontalScrollView, которые являются контейнерными элементами и наследуются от ViewGroup. Обратите внимание, что класс TextView использует свою собственную прокрутку и не нуждается в добавлении отдельных полос прокрутки. Но использование отдельных полос даже с TextView может улучшить вид вашего приложения и повышает удобство работы для пользователя.
На панели инструментов компоненты можно найти в разделе Containers.
В контейнеры ScrollView и HorizontalScrollView можно размещать только один дочерний элемент (обычно LinearLayout), который в свою очередь может быть контейнером для других элементов. Виджет ScrollView, несмотря на свое название, поддерживает только вертикальную прокрутку, поэтому для создания вертикальной и горизонтальной прокрутки необходимо использовать ScrollView в сочетании с HorizontalScrollView. Обычно ScrollView используют в качестве корневого элемента, а HorizontalScrollView в качестве дочернего.
ScrollView

Расположение container (1,2,3)

Button
Добавим кнопку
Изменим ID
Удалим вес

Добавим текст для кнопки «Назад»
strings.xml

Стиль для кнопки «Назад»
Применим НАШ стиль для кнопки «Назад»
Укажем размер текста

Кнопка «Назад»
Укажем отступы
Укажем цвет текста

Кнопка «Назад»
Уберем ВЕРХНИЙ регистр
Кнопка ГОТОВА!!!

Разделим по 5 уровней в одной линии, для этого нам потребуется новый контейнер
Уровни

Расположение контейнеров

Кнопкой может быть и текст и картинка
Уровни

Стиль для Уровней (не нажата)

Стиль для Уровней (нажата)
Скопируем стиль для НЕНАЖАТОГО уровня и вставим в папку Drawable

Единый стиль для уровней

Уровни

Уровни (line1)

Отступ от кнопки «Назад»

Скопируем контейнер line1
Вставим в container4
Изменим поля id и text вручную
Уровни (line2)

Добавим отступ
Повторим еще 4 раза (должно быть 6 line и 30 уровней)
Уровни (line2)

Уровни

Скопируйте MainActivity.java
Вставьте в ту же папку
Назовите GameLevels
GameLevels.java

Откройте AndroidManifest.xml
Скопируем описание первого Activity и вставим ниже
удаляем, так как этот атрибут только для файла, который открывается первым
AndroidManifest.xml

Откройте MainActivity.java
Запишем код, который дает перейти на другой уровней при нажатии кнопки с обработчиком ошибок.
Переход из главного меню в Уровням
Button buttonStart = (Button) findViewById(R.id.buttonStart);
buttonStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
try {
Intent intent = new Intent(MainActivity.this, GameActivity.class);
startActivity(intent);finish();
}catch (Exception e) {
}
}
});

Откройте GameActivity.java
Запишем код, который дает перейти на другой уровней при нажатии кнопки с обработчиком ошибок.
Переход из главного меню к Уровням
Button buttonBack = (Button) findViewById(R.id.button_back);
buttonBack.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
try {
Intent intent = new Intent(GameActivity.this, MainActivity.class);
startActivity(intent);finish();
}catch (Exception e) {
}
}
});

Откройте GameActivity.java
Запишем код в самый конец перед закрывающейся фигурной скобкой }.
Системная кнопка Назад
@Override
public void onBackPressed() {
try {
Intent intent = new Intent(GameActivity.this, MainActivity.class);
startActivity(intent);finish();
}catch (Exception e) {
}
}