Поиск по сайту:

Макет Android — LinearLayout, RelativeLayout

В этом уроке мы представим обзор макета Android. Мы также рассмотрим некоторые специальные элементы управления макетом, доступные для организации содержимого экрана, а именно — Android LinearLayout и Android RelativeLayout.

Макет Android

Основным строительным блоком для пользовательского интерфейса является объект View, который создается из класса View и занимает прямоугольную область на экране. Представления — это базовый класс для компонентов пользовательского интерфейса, таких как TextView, Button, EditText и т. д. ViewGroup — это подкласс View. Одно или несколько представлений можно сгруппировать в ViewGroup. ViewGroup предоставляет макет Android, в котором мы можем упорядочить внешний вид и последовательность представлений. Примерами ViewGroup являются LinearLayout, FrameLayout, RelativeLayout и т. д.

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

Android предоставляет следующие ViewGroups или макеты:

  1. LinearLayout : ViewGroup, которая выравнивает все дочерние элементы в одном направлении, вертикально или горизонтально
  2. RelativeLayout : это ViewGroup, которая отображает дочерние представления в относительных позициях
  3. AbsoluteLayout: позволяет указать точное расположение дочерних представлений и виджетов
  4. TableLayout – это представление, которое группирует дочерние представления в строки и столбцы.
  5. FrameLayout – это заполнитель на экране, который используется для отображения одного вида.
  6. ScrollView : это особый тип FrameLayout, который позволяет пользователям прокручивать список представлений, занимающих больше места, чем физический дисплей. ScrollView может содержать только одно дочернее представление или ViewGroup, обычно это LinearLayout
  7. ListView – это группа представлений, в которой отображается список прокручиваемых элементов.
  8. GridView : это ViewGroup, которая отображает элементы в двумерной прокручиваемой сетке. Элементы в сетке поступают из ListAdapter, связанного с этим представлением.

В этом уроке мы сосредоточимся на двух наиболее часто используемых макетах Android:

  1. Линейный макет
  2. Относительный макет

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

  1. android:id : это идентификатор, который однозначно идентифицирует представление.
  2. android:layout_width : ширина макета.
  3. android:layout_height : высота макета.
  4. android:layout_margin : это дополнительное пространство за пределами представления. Например, если вы укажете android:marginLeft=20dp, представление будет располагаться через 20 dp слева
  5. android:layout_padding : похоже на android:layout_margin, за исключением того, что указывает дополнительное пространство внутри представления.
  6. android:layout_gravity : указывает, как позиционируются дочерние представления.
  7. android:layout_weight : указывает, сколько дополнительного пространства в макете должно быть выделено для представления.
  8. android:layout_x : указывает координату X макета.
  9. android:layout_y : указывает координату Y макета.

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

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

Синтаксис идентификатора внутри тега XML:

  • Символ at (@) в начале строки указывает, что синтаксический анализатор XML должен проанализировать и расширить остальную часть строки идентификатора и идентифицировать ее как ресурс идентификатора.
  • Символ плюса (+) означает, что это новое имя ресурса, которое необходимо создать и добавить к нашим ресурсам.

Android LinearLayout

Android LinearLayout упорядочивает элементы вдоль одной строки. Мы можем указать, является ли эта линия вертикальной или горизонтальной, используя android:orientation. Ориентация по умолчанию горизонтальная. Вертикальный LinearLayout будет иметь только один дочерний элемент на строку (поэтому это столбец из отдельных элементов), а горизонтальный LinearLayout будет иметь только одну единственную строку элементов на экране. Атрибут android:layout_weight отображает важность элемента. Элемент с большим весом занимает больше места на экране. Вот пример макета XML с использованием LinearLayout: layout_linear.xml

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_margin="@dimen/activity_horizontal_margin">
    <Button
        android:id="@+id/backbutton"
        android:text="Back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 2"
        android:layout_width="wrap_content"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 3"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 4"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 5"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/next_button"
            android:text="next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="Row 6b"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="Row 6c"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="Row 6d"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

В этом макете у нас есть родительский LinearLayout, который имеет вертикальную ориентацию и содержит кнопки, текстовые представления и вложенный линейный макет (с горизонтальной ориентацией) в качестве дочерних представлений. Примечание. Вложенные макеты не обязательно должны быть одного типа. Мы могли бы, например, сделать LinearLayout одним из дочерних элементов RelativeLayout и наоборот.

Относительный макет Android

Android RelativeLayout размещает элементы на основе их отношений друг с другом и с родительским контейнером. Это один из самых сложных макетов, и нам нужно несколько свойств, чтобы действительно получить желаемый макет. То есть, используя RelativeLayout, мы можем расположить представление так, чтобы оно было toLeftOf, toRightOf, ниже или выше его братьев и сестер. Мы также можем расположить представление по отношению к его родителю, например, по центру по горизонтали, вертикали или по обоим направлениям, или выровнять его по любому из краев родительского элемента RelativeLayout. Если ни один из этих атрибутов не указан в дочернем представлении, то представление по умолчанию отображается в верхнем левом положении.

Атрибуты Android RelativeLayout

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

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

  • android:layout_alignParentBottom : помещает нижнюю часть элемента в нижнюю часть контейнера.
  • android:layout_alignParentLeft : помещает левую часть элемента в левую часть контейнера.
  • android:layout_alignParentRight : размещает правую часть элемента в правой части контейнера.
  • android:layout_alignParentTop : размещает элемент в верхней части контейнера
  • android:layout_centerHorizontal: центрирует элемент по горизонтали внутри родительского контейнера.
  • android:layout_centerInParent: центрирует элемент как по горизонтали, так и по вертикали внутри его контейнера.
  • android:layout_centerVertical: центрирует элемент по вертикали внутри родительского контейнера.

По отношению к братьям и сестрам

  • android:layout_above : размещает элемент над указанным элементом
  • android:layout_below : размещает элемент под указанным элементом
  • android:layout_toLeftOf : помещает элемент слева от указанного элемента
  • android:layout_toRightOf : размещает элемент справа от указанного элемента

\@id/XXXXX используется для ссылки на элемент по его идентификатору. Следует помнить, что ссылка на элемент до его объявления приведет к ошибке, поэтому в таких случаях следует использовать @+id/.

Выравнивание с другими элементами

  • android:layout_alignBaseline: выравнивает базовую линию нового элемента с базовой линией указанного элемента.
  • android:layout_alignBottom: выравнивает нижний край нового элемента по нижнему краю указанного элемента.
  • android:layout_alignLeft : выравнивает левый край нового элемента с левым краем указанного элемента.
  • android:layout_alignRight: выравнивает правый край нового элемента с правым краем указанного элемента.
  • android:layout_alignTop : размещает верхнюю часть нового элемента на одном уровне с верхней частью указанного элемента.

В следующем XML-макете используется RelativeLayout: layout_relative.xml

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="https://schemas.android.com/apk/res/android">
    <Button
        android:id="@+id/backbutton"
        android:text="Back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/firstName"
        android:text="First Name"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/backbutton" />
    <TextView
        android:id="@+id/editFirstName"
        android:text="JournalDev"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/firstName"
        android:layout_below="@id/backbutton"/>
    <TextView
        android:id="@+id/editLastName"
        android:text="Layout Tutorial Example"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/lastName"
        android:layout_toRightOf="@+id/lastName"
        android:layout_toEndOf="@+id/lastName" />
    <TextView
        android:id="@+id/lastName"
        android:text="Last Name"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:layout_below="@+id/firstName"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="40dp"
        android:layout_marginStart="40dp" />

    <Button
        android:id="@+id/next"
        android:text="Next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editLastName"
        android:layout_alignLeft="@+id/editLastName"
        android:layout_alignStart="@+id/editLastName"
        android:layout_marginTop="37dp" />
</RelativeLayout>

Как видите, мы можем переставлять элементы в зависимости от их относительного положения. Следующий XML-макет представляет собой настраиваемый макет с вложенными линейными и относительными макетами. layout_mixed.xml

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="https://schemas.android.com/apk/res/android">

    <TextView
        android:id="@+id/parent_rl"
        android:text="Parent RelativeLayout"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout"
        android:layout_below="@id/parent_rl"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true">

        <TextView
            android:text="Nested Horizontal"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:text="LL"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />


        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:text="Double Nested"
                android:textSize="18sp"
                android:layout_margin="10dp"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:text="Vertical"
                android:textSize="18sp"
                android:layout_margin="10dp"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:text="LL"
                android:textSize="18sp"
                android:layout_margin="10dp"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </LinearLayout>


    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/linearLayout">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Nested Relative Layout"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

        <Button
            android:id="@+id/back_button_pressed"
            android:text="back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textView"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="66dp" />

    </RelativeLayout>


</RelativeLayout>

Структура проекта макета Android

Код макета Android

Приложение запускается в MainActivity, которая загружает содержимое layout_linear.xml с помощью следующего кода:

package com.journaldev.layouts;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {


    Button back,next;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_linear);
        back=(Button)findViewById(R.id.back_button);
        next=(Button)findViewById(R.id.next_button);

        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(MainActivity.this,SecondActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
            }
        });
        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

    }

}

SecondActivity и ThirdActivity загружают макеты layout_relative.xml и layout_mixed.xml соответственно, как показано ниже:

package com.journaldev.layouts;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class SecondActivity extends Activity {
    Button back,next;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_relative);
        back=(Button)findViewById(R.id.backbutton);
        next=(Button)findViewById(R.id.next);

        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(SecondActivity.this,ThirdActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
            }
        });
        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(SecondActivity.this,MainActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
            }
        });

    }
}

package com.journaldev.layouts;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class ThirdActivity extends Activity {
    Button back;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_mixed);
        back=(Button)findViewById(R.id.back_button_pressed);

        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(ThirdActivity.this,SecondActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
            }
        });

    }
}

Скачать пример проекта Android LinearLayout RelativeLayout

Ссылка: документ API