Android — дизайн пользовательского интерфейса

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

Компоненты экрана пользовательского интерфейса

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

• Основная панель действий
• Просмотр управления
• Область содержимого
• Панель действий Split

Эти компоненты также были показаны на рисунке ниже —

Понимание компонентов экрана

Основной единицей приложения для Android является активность. Пользовательский интерфейс определен в XML-файле. Во время компиляции каждый элемент в XML компилируется в эквивалентный класс Android GUI с атрибутами, представленными методами.

Просмотр и ViewGroups

Деятельность состоит из представлений. Представление — это просто виджет, который появляется на экране. Это может быть кнопка и т. Д. Одно или несколько представлений могут быть сгруппированы в один GroupView. Пример ViewGroup включает макеты.

Типы макетов

Есть много типов макетов. Некоторые из которых перечислены ниже —

• Линейный макет
• Абсолютная планировка
• Макет таблицы
• Структура кадра
• Относительная компоновка

Линейный макет

Линейный макет далее делится на горизонтальный и вертикальный макет. Это означает, что он может расположить представления в одном столбце или в одной строке. Вот код линейного макета (вертикальный), который включает в себя текстовое представление.

<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   android:orientation=”vertical” >
   
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

AbsoluteLayout

AbsoluteLayout позволяет вам указать точное местоположение его дочерних элементов. Это можно объявить так.

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

TableLayout

TableLayout группирует представления в строки и столбцы. Это можно объявить так.

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
         android:text=”User Name:”
         android:width =”120dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”200dp” />
   </TableRow>
   
</TableLayout>

RelativeLayout

RelativeLayout позволяет вам указать, как дочерние представления располагаются относительно друг друга. Он может быть объявлен следующим образом.

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

FrameLayout

FrameLayout — это заполнитель на экране, который можно использовать для отображения одного представления. Это можно объявить так.

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

Помимо этих атрибутов, существуют другие атрибуты, которые являются общими для всех представлений и ViewGroups. Они перечислены ниже —

layout_width

Определяет ширину View или ViewGroup

layout_height

Определяет высоту View или ViewGroup

layout_marginTop

Определяет дополнительное пространство в верхней части View или ViewGroup

layout_marginBottom

Определяет дополнительное пространство в нижней части View или ViewGroup

layout_marginLeft

Определяет дополнительное пространство слева от View или ViewGroup

layout_marginRight

Определяет дополнительное пространство справа от View или ViewGroup

layout_gravity

Определяет, как позиционируются дочерние представления

layout_weight

Определяет, сколько дополнительного пространства в макете должно быть выделено для представления

Меры измерения

Когда вы указываете размер элемента в пользовательском интерфейсе Android, вы должны помнить следующие единицы измерения.

дп

Плотно-независимый пиксель. 1 dp эквивалентен одному пикселю на экране с разрешением 160 dpi.

зр

Независимый от масштаба пиксель. Это похоже на dp и рекомендуется для указания размеров шрифта

пт

Точка. Точка определяется как 1/72 дюйма в зависимости от размера физического экрана.

ПВ

Pixel. Соответствует фактическим пикселям на экране

Плотность экрана

Низкая плотность (ldpi)

120 точек на дюйм

Средняя плотность (МДПИ)

160 точек на дюйм

Высокая плотность (hdpi)

240 точек на дюйм

Сверхвысокая плотность (xhdpi)

320 точек на дюйм

Оптимизация макетов

Вот несколько рекомендаций по созданию эффективных макетов.