RelativeLayout в Android

RelativeLayout (относительный макет) это макет, который упорядочивает View, виджеты, группы View в соответствии с положением других представлений, виджетов, групп представлений, т. е. новые View размещаются относительно уже существующих View.

Например, в классе, если учащийся А сидит на стуле, а учитель класса просит учащегося Б сесть справа от учащегося А. Учащийся Б будет знать, где он должен сесть.

Точно так же положение каждого View может быть указано относительно его родственных элементов (например, слева или ниже другого View) или с точки зрения положения относительно родителя.

RelativeLayout — наиболее часто используемый макет при разработке графического интерфейса. Чтобы узнать, как работает RelativeLayout, давайте рассмотрим наиболее распространенные атрибуты RelativeLayout.

Центр относительно родительского вида View

Если вы хотите разместить свои View в центре относительно родителя, вы можете использовать следующие 3 атрибута:

Прежде чем мы узнаем о различных атрибутах, мы укажем, что родительский элемент в нашем примере также является относительным макетом с высотой и шириной, заданными как match_parent, поэтому он будет охватывать весь экран мобильного телефона. Таким образом, полный экран — это наш родительский вид.

1. Android: layout_centerHorizontal = “true” – это размещает View горизонтально в центре родителя. Поскольку наше родительское View покрывает весь экран мобильного устройства, поэтому View размещается в середине экрана мобильного устройства по горизонтали. (См. желтый вид на рисунке выше)
2. андроид: layout_centerVertical = “true“ – это размещает View вертикально в центре родителя. Поскольку родительское View покрывает весь экран мобильного устройства, поэтому View размещается в середине экрана мобильного устройства по вертикали. (См. синий вид на рисунке выше)
3. андроид: layout_centerInParent = “true“ – этот атрибут поместит View в центр родителя. Поскольку родительский элемент в нашем примере покрывает весь экран мобильного устройства, View размещается в середине экрана мобильного устройства как по горизонтали, так и по вертикали. (См. изображение кремового цвета на рисунке выше).

Выровнять по родительскому виду View

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

Опять же, для примера, мы рассматриваем наше родительское View как RelativeLayout с высотой и шириной, установленными как match_parent, поэтому он будет охватывать весь экран мобильного телефона. Таким образом, полный экран — это наш родительский вид.

1. Android: layout_alignParentTop = “true” Если вы напишете этот атрибут, то View будет привязано к верхней части своего родителя. Поскольку родитель покрывает весь экран мобильного устройства, View будет отображаться в левом верхнем углу экрана мобильного устройства.
2. Android: layout_alignParentBottom = “true“ Если вы напишете этот атрибут для View, то это представление будет привязано к нижней части своего родителя. Поскольку наш родитель покрывает весь экран мобильного устройства, View будет отображаться в нижней части экрана мобильного устройства.
3. Android: layout_alignParentLeft = “true“ Если вы напишете этот атрибут для View, то это View будет привязано слева от своего родителя. Поскольку родитель в нашем примере покрывает весь экран мобильного устройства, View будет отображаться слева от экрана мобильного устройства.
4. Android: layout_alignParentRight = “true“ Если вы напишете этот атрибут для View, то это представление будет располагаться справа от своего родителя.

Примечание: Вы всегда можете использовать более одного из этих атрибутов. Предположим, вы используете android:layout_alignParentLeft="true" и android:layout_alignParentBottom="true" то View будет привязано к нижнему левому углу экрана, как показано розовым цветом на рисунке выше.

Расположить один вид View относительно другого вида

В RelativeLayout вы можете позиционировать новые View относительно других существующих View. Для этого можно использовать следующие атрибуты.

Предположим, что есть один View в центре с идентификатором main android:id="@+id/main. Следовательно, другие новые View могут быть размещены относительно этого View следующим образом:

1. android:layout_toLeftOf=”@id/main” Это сообщает новому View, что оно будет находиться в левой части View main.
2. android:layout_toRightOf=”@id/main” Это сообщает новому View, что оно будет с правой стороны от View main.
3. android:layout_above=”@id/main” Это сообщает новому View, что оно будет выше View main.
4. android:layout_below=”@id/main” Это говорит новому View, что оно будет ниже View main.

Примечание: Когда вы назначаете id, вы пишете android:id=”@+id/main” то есть вы пишете + после @, указывающий, что вы назначаете id к этому виду. Но когда вы используете это id, как указано выше, мы не должны писать знак +. Мы должны записать android:layout_below=”@id/main” то есть без знак +.

Выровнять один вид View относительно другого вида

Если вы хотите выровнять одно View относительно любого другого View, вы можете использовать следующие атрибуты.

1. Android:layout_alignTop=”@id/a” Это выравнивает верхнее поле нового View с верхним полем View, имеющего id a.
2. android:layout_alignBottom=”@id/a” Это выравнивает нижнее поле нового View с нижним полем View, имеющего id a.
3. android:layout_alignLeft=”@id/a” Это выравнивает левое поле нового View с левым полем View, имеющего id a.
4. android:layout_alignRight=”@id/a” Это выравнивает правое поле нового View с правым полем View, имеющего id a.
5. android:layout_alignBaseLine=”@id/a” Это выравнивает текст1 нового View с текстом2 View, имеющего id a.

RelativeLayout в макете XML

Теперь давайте разберем следующий код:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#FFEB3B"
    tools:context="com.example.android.jandroid.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textStyle="bold"
        android:textAllCaps="true"
        android:textSize="17sp"
        android:text="Two Button will use me as a reference" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Aligned to the\nsecond button"
        android:layout_below="@+id/textView"
        android:layout_alignLeft="@+id/textView"
        android:layout_margin="5dp"
        android:layout_alignStart="@+id/textView" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Aligned to the\nfirst button"
        android:layout_toRightOf="@id/button"
        android:layout_alignTop="@id/button"
        android:layout_below="@+id/textView"
        android:layout_marginRight="21dp"
        android:layout_marginEnd="21dp" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button"
        android:layout_below="@+id/button"
        android:layout_marginTop="70dp"
        android:textStyle="bold|italic"
        android:textSize="20sp"
        android:textColor="#25c"
        android:text="I want to align by base\nline with you" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView5"
        android:layout_alignTop="@+id/textView5"
        android:layout_margin="10dp"
        android:textSize="20sp"
        android:textStyle="bold|italic"
        android:textColor="#25c"
        android:layout_marginTop="70dp"
        android:layout_alignBaseline="@id/textView5"
        android:text="Okay,let me use the attribute" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentLeft="true"
        android:textAllCaps="true"
        android:textStyle="bold"
        android:textSize="20sp"
        android:textColor="#D50000"
        android:text="I have used 3 chewing gum like attributes and now I am stuck at the bottom"/>
</RelativeLayout>

В приведенном выше коде:

1. Мы разместили один View с id textView вверху экрана с помощью android:layout_alignParentTop="true".
2. 2 кнопки расположены под TextView с id textView. Это делается с помощью android:layout_below="@+id/textView" в обоих тегах Button.
3. Мы выровняли обе кнопки по верхнему полю (друг друга), используя android:layout_alignTop="@id/button".
4. Мы также попытались выровнять два TextView на основе их текста, т.е. выровнять тексты обоих представлений.
5. И последнее, но не менее важное: мы использовали липкие атрибуты, android:layout_alignParentBottom="true" android:layout_alignParentRight="true"
android:layout_alignParentLeft="true" приклеить textView4 внизу экрана. Точно так же, как жевательная резинка растягивается, TextView в этом примере также растягивается, так что его границы растягиваются и прилипают к левому, правому и нижнему краю экрана.