Полезные примеры Android

Полезные примеры Android
Android — Дизайн пользовательского интерфейса

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

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

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

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

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

Руководство по пользовательскому интерфейсу Anroid

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

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

Просмотр и просмотр групп

Деятельность состоит из просмотров. Представление — это просто виджет, который появляется на экране. Это может быть кнопка и т. Д. Одно или несколько представлений могут быть сгруппированы в один 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>

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

Sr.No Просмотр и описание
1

layout_width

Определяет ширину представления или ViewGroup

2

layout_height

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

3

layout_marginTop

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

4

layout_marginBottom

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

5

layout_marginLeft

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

6

layout_marginRight

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

7

layout_gravity

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

8

layout_weight

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

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

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

Sr.No Единица и описание
1

dp

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

2

sp

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

3

pt

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

4

px

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

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

Sr.No Плотность и DPI
1

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

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

2

Средняя плотность (mdpi)

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

3

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

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

4

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

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

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

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

  • Избегайте ненужного вложения
  • Избегайте использования слишком большого количества просмотров
  • Избегайте глубокого вложения
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare