Android — UI Layouts (макеты пользовательского интерфейса)


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

В ViewGroup является подклассом View и предоставляет невидимый контейнер, который содержит другие представления или другие группы просмотра и определяет их свойства макета.

На третьем уровне у нас есть разные макеты, которые являются подклассами класса ViewGroup, и типичный макет определяет визуальную структуру для пользовательского интерфейса Android и может быть создан либо во время выполнения, используя View/ ViewGroup объекты или вы можете объявить свой макет с помощью простого XML-файла main_layout.xml который находится в папке res / layout вашего проекта.

Макет

Параметры макета

Это руководство больше о создании графического интерфейса пользователя на основе макетов, определенных в файле XML. Макет может содержать виджеты любого типа, такие как кнопки, метки, текстовые поля и так далее. Ниже приведен простой пример XML-файла с LinearLayout:

<?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:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a TextView" />
      
   <Button android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a Button" />
      
   <!-- More GUI components go here  -->
   
</LinearLayout>

После создания макета вы можете загрузить ресурс макета из кода приложения в свой Activity.onCreate () реализация обратного вызова, как показано ниже —

public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
}

Типы макетов Android

Существует ряд макетов, предоставляемых Android, которые вы будете использовать почти во всех приложениях Android, чтобы обеспечить внешний вид и удобство использования.

Макет и описание
1LinearLayout — это группа представлений, которая выравнивает всех дочерних элементов в одном направлении, вертикально или горизонтально.

Android LinearLayout 1Android LinearLayout 2

2RelativeLayout — это группа представлений, которая отображает дочерние представления в относительных положениях.

Relative

3TableLayout — это представление, которое группирует представления в строки и столбцы.

Table Layout

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

Absolute Layout

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

Frame Layout

6ListView — это группа представлений, которая отображает список прокручиваемых элементов.

List View

7GridView — это ViewGroup, которая отображает элементы в двумерной прокручиваемой сетке.

Grid View

Атрибуты макета

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

Атрибут и описание
1android: id
Идентификатор, который однозначно определяет представление.
2android: layout_width
Ширина макета.
3android: layout_height
Высота макета
4android: layout_marginTop
Дополнительное пространство в верхней части макета.
5android: layout_marginBottom
Дополнительное пространство в нижней части макета.
6android: layout_marginLeft
Дополнительное пространство в левой части макета.
7android: layout_marginRight
Дополнительное пространство в правой части макета.
8android: layout_gravity
Определяет, как располагаются дочерние представления.
9android: layout_weight
Указывает, какая часть дополнительного пространства в макете должна быть выделена для представления.
10android: layout_x
Определяет x-координату макета.
11android: layout_y
Указывает координату Y макета.
12android: layout_width
Ширина макета.
13android: paddingLeft
Левая прокладка, заполненная для макета.
14android: paddingRight
Правильный отступ для макета.
15android: paddingTop
Верхнее заполнение макета.
16android: paddingBottom
Нижний отступ, заполненный для макета.

Здесь ширина и высота — это размер макета / представления, который можно указать в терминах dp (пиксели, не зависящие от плотности), sp (пиксели, не зависящие от масштаба), pt (точки, составляющие 1/72 дюйма), px ( Пиксели), мм (миллиметры) и, наконец, дюймы (дюймы).

Вы можете указать ширину и высоту с точными размерами, но чаще вы будете использовать одну из этих констант для установки ширины или высоты —

  • android: layout_width = wrap_content сообщает вашему представлению, что его размер должен соответствовать размерам, требуемым для его содержимого.
  • android: layout_width = fill_parent говорит, что ваше представление станет таким же большим, как и его родительское представление.

Атрибут Gravity играет важную роль в позиционировании объекта просмотра и может принимать одно или несколько (разделенных знаком |) из следующих постоянных значений.

ПостоянныйЗначениеОписание
top0x30Расположить объект в верхнюю часть контейнера, не меняя его размера.
bottom0x50Расположить объект вниз контейнера, не меняя его размера.
left0x03Слева контейнера, не меняя его размера.
right0x05Справа контейнера, не меняя его размера.
center_vertical0x10Поместить объект в центр контейнера по вертикали, не меняя его размера.
fill_vertical0x70Увеличить вертикальный размер объекта, чтобы он полностью заполнил свой контейнер.
center_horizontal0x01Поместите объект в центр контейнера по горизонтали, не меняя его размера.
fill_horizontal0x07Увеличить горизонтальный размер объекта, чтобы он полностью заполнил свой контейнер.
center0x11Поместить объект в центр контейнера как по вертикальной, так и по горизонтальной оси, не меняя его размера.
fill0x77Увеличить горизонтальный и вертикальный размер объекта, чтобы он полностью заполнил свой контейнер.
clip_vertical0x80Растягивается пока левый и правый край не коснуться контейнера, а нижний и верхний край подрезаются.
clip_horizontal0x08Растягивается пока верхний и нижний край не коснуться контейнера, а левый и правый край подрезаются.
start0x00800003Переместить объект в начало контейнера, не меняя его размера.
end0x00800005Протолкните объект до конца контейнера, не меняя его размера.

Просмотр идентификации

Объекту представления может быть назначен уникальный идентификатор, который будет однозначно идентифицировать представление в дереве. Синтаксис идентификатора внутри тега XML —

android:id="@+id/my_button"

Ниже приводится краткое описание знаков @ и +.

  • Символ (@) в начале строки указывает, что синтаксический анализатор XML должен проанализировать и развернуть оставшуюся часть строки идентификатора и идентифицировать ее как ресурс идентификатора.
  • Знак плюс (+) означает, что это новое имя ресурса, которое необходимо создать и добавить к нашим ресурсам. Чтобы создать экземпляр объекта просмотра и захватить его из макета, используйте следующее:
Button myButton = (Button) findViewById(R.id.my_button);
Поделись с друзьями:

Оставьте комментарий