Вы находитесь на странице: 1из 7

Интерфейс

пользователя
1
Лэйауты (layout)

Лэйауты напоминают разметку HTML, только возможностей намного


меньше. Интерфейс пользователя состоит из иерархии View, где
View — какой-то элемент интерфейса, например, Button (кнопка) или
контейнер для других View.

Лэйауты можно создавать из кода, но обычно делают это с помощью


xml. Для этого в папочку src/main/res кладут файл <имя лэйаута>.xml,
где и описывают иерархию View примерно так:

2
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_pattern">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:elevation="@dimen/elevation"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingStart="@dimen/margin_large">

<EditText
android:id="@+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:background="@android:color/transparent"
android:hint="@string/enter_name"
android:imeOptions="actionNext"
android:inputType="text"
android:maxLines="1"
android:textColor="@color/colorComment">

<requestFocus />
</EditText>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/rouble"
android:textColor="@color/colorComment" />
</LinearLayout>
</FrameLayout>

3
FrameLayout — простейший контейнер, где все элементы
располагаются просто один на другом.

(Не обращаем внимание на xmlns:android="http://schemas.


android.com/apk/res/android"— это просто должно быть,
XML namespace).

Высоту и ширину можно задавать как в dp — device-indpendent pixels,


так и константами, match_parent — такой же размер, как у родителя,
и wrap_content — размер такой, чтобы помещалось содержимое.
Можно указывать и в пикселях, px, но тогда на всех телефонах всё
будет выглядеть по-разному, т.к. экраны разных размеров и разной
плотности пикселей.

Для решения этой проблемы была придумана единица измерения dp.


Если вы указываете размеры в dp, то на любых экранах View будут
выглядеть одинаково. Для текстов есть единица измерения sp — то
же, что dp, но если размер текста указать в sp, то когда пользователь
поменяет размер шрифта в глобальных настройках системы, размер
текста тоже увеличится или уменьшится. Любые размеры можно
хард-кодить прямо в лейауте, но лучше вынести в dimens.xml,
а в лейауте вставить ссылку вида @dimen/elevation.

4
Параметр background — фон. Можно указать ссылку на картинку или на
цвет. Цвета описываются в colors.xml в стандартном hex-виде.

<color name="colorPrimary">#95c9b8</color>

Картинки должны лежать в каталогах res/drawable-<density>.


Где <density> — hdpi, xhdpi и т.д. - плотности экрана.

Обычно поддерживают mdpi (~160dpi), hdpi (~240dpi), xhdpi (~320dpi),


xxhdpi (~480dpi), xxhdpi (~640dpi), т.е., нужно готовить несколько версий
каждой картинки. Но современные средства для дизайнеров, типа
Zeplin, которым мы пользуемся в курсе, умеют это делать сами. Просто
разархивируйте скачанный архив с картинкой в каталоге res, и нужные
файлы сами лягут, куда надо.

LinearLayout — контейнер, где элементы располагаются линейно,


один за другим. Параметры (как и у любых вьюх, обязательны из них
только layout_width и layout_height):

• elevation — для создания эффекта тени. Этот параметр может быть


у любого View.
• orientation — вертикально или горизонтально будут
располагаться дети.
• gravity — как центрировать элементы.
• center_vertical — центры всех элементов будут
располагаться на одной горизонтальной линии.
• paddingStart — размер отступа слева перед первым элементом.

5
EditText — поле ввода текста.

• id — нужен, чтобы получить доступ к элементу из кода.


• layout_weight — доступен только внутри LinearLayout. Ширина
элемента будет вычислена по формуле <свободное место> * layout_
weight / <сумма весов>.
• layout_width — должен быть 0dp, когда задан вес.
• hint — подсказка, видна, пока пользователь не начал вводить текст.
• imeOptions — чтобы на клавиатуре вместо символа Enter
показывалось Next.
• inputType — значение text говорит, что это просто текст, не пароль
и тд. Нужно для корректной работы maxLines и imeOptions.
• maxLines — максимальное количество строк.

<requestFocus /> — чтобы сразу при попадании на экран была открыта


клавиатура и можно было текст вводить.

TextView — вьюха, отображающая текст. Сам текст лучше не


хардкодить, а положить в strings.xml.

6
Полезные ссылки

• Теория Drawable
• Теория Resources
• Теория Layout
• Supporting Multiple Screens
• Подробнее о единицах измерения