Linear Layout в Android

LinearLayout (линейная компановка) это ViewGroup, который отвечает за хранение View (представлений) в нем. Это макет, который упорядочивает своих дочерних элементов, т. е. различные виды и макеты линейно (один за другим) в одном столбце (по вертикали) или в одной строке (по горизонтали).

Будут ли все дочерние элементы расположены горизонтально или вертикально, зависит от значения атрибута android:orientation. По умолчанию ориентация горизонтальный.

Вертикальный LinearLayout

В вертикальном LinearLayout, как следует из названия, View определенные внутри Linear Layout, расположены вертикально друг за другом, как в столбце. И для этого нужно упомянуть android:orientation атрибут со значением vertical (вертикальный) внутри тега LinearLayout.

Чтобы лучше понять, давайте проверим следующий код и его вывод.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.android.jandroid.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="Welcome"
        android:background="@color/colorAccent"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="to"
        android:background="#E65100"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#25f"
        android:text="Jandroid"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="android"
        android:background="#76FF03"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="is"
        android:background="#FDD835"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="fun"
        android:background="#E040FB"
        android:textAllCaps="true"/>

</LinearLayout;>
Вертикальная линейная компоновка в Android

Как мы видим, внутри LinearLayout есть 6 дочерних элементов, все они TextView (текстовые представления). Кроме того, поскольку для атрибута ориентации задано значение «Vertical», все 6 дочерних элементов будут отображаться один за другим по вертикали.

Горизонтальный LinearLayout

В горизонтальном LinearLayout, как следует из названия, View определенные внутри LinearLayout, будут располагаться горизонтально друг за другом, как в ряду. По умолчанию ориентация установлена ​​горизонтальной. Но хорошей практикой является явное указание ориентации линейного макета путем установки атрибута android:orientation со значением horizontal горизонтальный.

Чтобы понять это более четко, давайте проверим следующий код и его вывод.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context="com.example.android.jandroid.MainActivity">

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="30sp"
    android:text="Welcome"
    android:background="@color/colorAccent"
    android:textAllCaps="true"/>

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="30sp"
    android:text="to"
    android:background="#E65100"
    android:textAllCaps="true"/>

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="30sp"
    android:background="#25f"
    android:text="Jandroid"
    android:textAllCaps="true"/>
    
</LinearLayout>
Горизонтальная линейная компоновка в Android

Как мы видим, внутри LinearLayout есть 3 дочерних элемента. Кроме того, поскольку для атрибута orientation задано значение «horizontal», все 3 дочерних элемента, т. е. элементы TextView, отображаются один за другим по горизонтали.

LinearLayout внутри LinearLayout

LinearLayout, который является ViewGroup, также может содержать другие макеты Layout. Давайте попробуем следующий код, в котором мы добавили один LinearLayout внутри другого LinearLayout, а также несколько View.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFEB3B"
    tools:context="com.example.android.jandroid.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="Welcome"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="to"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="Jandroid"
        android:textAllCaps="true"/>

    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:background="#FF6E40">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="android"
            android:textAllCaps="true"/>
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="is"
            android:textAllCaps="true"/>
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="fun"
            android:textAllCaps="true"/>
    </LinearLayout>

</LinearLayout>
Linear Layout внутри другого Linear Layout в Android

Первый LinearLayout (желтого цвета) имеет 3 TextView и 1 LinearLayout в качестве дочерних элементов. Поскольку он установлен на вертикальной ориентации, все его дочерние элементы будут отображаться вертикально.

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

Поделись с друзьями:
Если вам понравилась статья, подписывайтесь на наши социальные сети.

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

7 − три =