понедельник, 26 января 2015 г.

Компоновка LinearLayout

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

Ориентация дочерних компонентов


Компоновка LinearLayout выравнивает все дочерние объекты View в одном направлении — вертикально или горизонтально, в зависимости от того, как определен атрибут ориентации android:orientation:
android:orientation="horizontal"
или
android:orientation="vertical"
Все дочерние элементы помещаются в стек один за другим, так что вертикальный список объектов View будет иметь только один дочерний элемент в строке независимо от того, насколько широким он является. Горизонтальное расположение списка обеспечивает размещение элементов в одну строку с высотой, равной высоте самого высокого дочернего элемента списка.
Поменяйте код в файле res/layout/activity_main.xml: создайте корневой элемент LinearLayout c тремя дочерними кнопками:
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="horizontal"> 
 
    <Button 
        android:id="@+id/button1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Button1"/> 
    <Button 
        android:id="@+id/button2" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="Button2"/> 
    <Button 
        android:id="@+id/button3" 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:text="Button3"/> 
 
</LinearLayout>
Обратите внимание, что у первых двух кнопок атрибуту android:layout_width присвоено значение wrap_content, а у третьей кнопки — fill_parent, т. е. последняя кнопка заполнит оставшееся свободное пространство в компоновке.

В результате получится линейное горизонтальное размещение дочерних элементов. Если изменить в корневом элементе значение атрибута android:layout_height:
android:orientation="vertical" элементы в контейнере расположатся вертикально. Внешний вид экрана для компоновки LinearLayout с горизонтальной и вертикальной ориентациями элементов:


Вес элементов


Компоновка LinearLayout также поддерживает атрибут android:layout_weight, который назначает индивидуальный вес для дочернего элемента. Данный атрибут определяет "важность" объекта View и позволяет этому элементу расширяться, чтобы заполнить любое оставшееся пространство в родительском объекте View. Заданный по умолчанию вес является нулевым.
Например, если есть три текстовых поля, и двум из них объявлен вес со значением 1,
в то время как другому не дается никакого веса (0), третье текстовое поле без веса не будет расширяться и займет область, определяемую размером текста, отображаемого этим полем. Другие два расширятся одинаково, чтобы заполнить остаток пространства, не занятого третьим полем. Если третьему полю присвоить вес 2 (вместо 0), это поле будет объявлено как "более важное", чем два других, так что третье поле получит 50% общего пространства, в то время как первые два получат по 25% общего пространства.
Далее в файле res/layout/main.xml создайте корневой элемент LinearLayout c тремя дочерними элементами Button:
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
 
    <Button 
        android:id="@+id/button1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="B1" 
        android:layout_weight="0"/> 
    <Button 
        android:id="@+id/button2" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="B2" 
        android:layout_weight="1"/> 
    <Button 
        android:id="@+id/button3" 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:text="B3" 
        android:layout_weight="2"/> 
</LinearLayout>
Внешний вид экрана и влияние атрибута android:layout_weight будет следующим:

Обратите внимание, как различные XML-атрибуты определяют поведение элемента. Попробуйте поэкспериментировать с разными значениями layout_weight для дочерних элементов, чтобы увидеть, как будет распределяться доступное пространство для элементов.

Вложенные компоновки


Компоновки могут быть и вложенными. При проектировании окон с многочисленными элементами управления для заданного расположения элементов часто задаются вложенные компоновки, которые являются контейнерами для элементов управления. Например, для корневой компоновки LinearLayout с атрибутом orientation="vertical" мы можем задать простой дочерний элемент Button и еще два контейнера LinearLayout
с атрибутом orientation="horizontal", которые, в свою очередь, содержат дочерние элементы управления. В редакторе внешний вид будет таким:

Код файла main.xml в результате должен получиться таким:
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
 
    <Button 
        android:text="Button1" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"/> 
 
    <LinearLayout 
        android:orientation="horizontal" 
        android:layout_height="wrap_content" 
        android:layout_width="match_parent"> 
        <Button 
            android:text="Button2" 
            android:layout_width="wrap_content" 
            android:layout_weight="1" 
            android:layout_height="wrap_content"/> 
        <Button android:text="Button3" 
            android:id="@+id/button3" 
            android:layout_weight="1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"/> 
    </LinearLayout> 
 
    <LinearLayout 
        android:orientation="horizontal" 
        android:layout_height="wrap_content" 
        android:layout_width="match_parent"> 
        <Button 
            android:text="Button4" 
            android:layout_weight="1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"/> 
        <Button 
            android:text="Button5" 
            android:layout_weight="1" 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content"/> 
        <Button 
            android:text="Button6" 
            android:layout_weight="1" 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content"/> 
    </LinearLayout> 
</LinearLayout>
Внешний вид экрана с вложенными компоновками будет следующим:

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


Комментариев нет:

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