Relative Layout Udacity English Russian

Relative LayoutYouTube↗ IA↗(long shot)
Education 49.2K views 356 likes 11 dislikes 06 Jun 2016

Udacity 651K subscribers United States YouTube↗

Click to Play Video

So far we've learned that a linear layout can have a vertical orientation,

Мы знаем, что в линейной разметке может быть вертикальная

or a horizontal orientation.

или горизонтальная ориентация.

We've also learned that individual views can have weight values

Мы также знаем, что отдельные представления могут иметь значения ширины

to fill up the extra space in the parent.

для заполнения дополнительного пространства родительского элемента.

Now we;re going to spend some time learning about

Сейчас мы собираемся потратить некоторое время на изучение

the relative layout view group.

группы представлений относительной разметки.

This will help you build even more flexible layouts.

Это позволит вам создавать более гибкие разметки.

Do remember Ray the relative layout.

Вспомним относительную разметку Рэя.

He's the dad, and he's represented by this view group here.

Он папа и представлен здесь этой группой представлений.

He helps the children views, be positioned within this container.

Он помогает разместить дочерние представления внутри этого контейнера.

With the relative layout, you can position children relative to

С помощью относительной разметки можно разместить дочерний элемент

the parent, such as the top of the parent or the bottom of the parent.

относительно родительского, например, в верхней или нижней части.

The other option is to position children views relative to other children.

Также можно размещать одни дочерние элементы относительно других.

Например, вот так.

Let's focus first on the case where views can be positioned relative to

Сначала рассмотрим размещение представлений

относительно родительского.

For this example, this parent relative that is set to have with a batch parent,

В этом примере этот элемент соответствует по ширине

and height of match parent, so it's as big as the device.

и высоте родительскому, поэтому имеет размер экрана устройства.

The children inside a relative layout, can be positioned

Дочерние элементы внутри относительной разметки можно расположить

relative to the parent's left, top, right or bottom edges.

по левому, верхнему, правому или нижнему краю родительского элемента.

This is the code for it, on the child view x amount elements.

Вот код для него, XML для дочерних представлений.

For example for the emoji or TextView, you would add these attributes.

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

The attribute name follows this format android:layout_alignParentTop.

Имя атрибута соответствует следующему формату — android:layout_alignParentTop.

This attribute determines whether the Child view

Этот атрибут определяет, будет ли дочернее представление

is align to the parents top edge or not.

выровнено по верхнему краю родительского.

So the possible values are true or false.

Возможные значения для него: true или false.

If it's true, then the view should be aligned to the parent's top edge.

Если значение равно true, представление выравнивается по верху родительского.

If it's false, then it shouldn't be aligned.

Если false, выравнивание не выполняется.

There are attributes for all the other edges as well.

Эти атрибуты предназначены для других границ.

For example alignParentBottom, for aligning to the parent's bottom edge.

Например, alignParentBottom для выравнивания по нижнему краю.

There's align parent left, for aligning to the parent's left edge.

alignParentLeft для выравнивания по левому краю родительского представления.

And then there's align parent right, for aligning to the parent's right edge.

А также alignParentRight для выравнивания по правому краю.

You can mix and match, and use multiple of these attributes at a time.

Можно комбинировать и использовать несколько атрибутов одновременно.

Take this image view as an example.

Например, рассмотрим это представление изображения.

We would set the attribute align parent top to be true,

Установим для атрибута alignParentTop значение true,

because it's aligned to the parent's top edge.

потому что оно выравнивается по верхнему краю родительского элемента.

It's also aligned to the parent's left and right edges.

Оно также выравнивается по левому и правому краям.

So we set left to be true, and right to be true as well.

Установим слева и справа значения true.

It's not aligned to the parent's bottom edge, so we set that to be false.

Оно не выравнивается по нижнему краю, поэтому выбираем значение false.

And so the this text view down here,

Текстовое представление здесь выравнивается по нижнему,

it's aligned to parent's bottom edge, right edge and left edge.

правому и левому краям родительского элемента.

So alignParentBottom would be true, alignParentLeft would be true,

Итак, alignParentBottom должно быть равно true, alignParentLeft — true,

alignParentRight would be true, but alignParentTop would be false.

alignParentRight должно быть true, но значение alignParentTop — false.

In addition to positioning a child at the top portion, or

Помимо размещения дочернего элемента в верхней или нижней части экрана

the bottom portion of the screen, you can also do specific corners.

можно также указать конкретные углы.

If we want to position the birthday text view in the top left corner,

Чтобы разместить текстовое представление birthday в верхнем левом углу,

we say align parent top to be true, and then align parent left to also be true.

укажем для alignParentTop значение true и для alignParentLeft также значение true.

To position a view in the top right corner,

Чтобы разместить представление в правом верхнем углу,

we want to align it to the parent's top edge and right edges.

мы хотим выровнять его по верхнему и правому краю родительского элемента.

So align parent top equals true, and align parent right equals true.

Итак, значение alignParentTop равно true и alignParentRight равно true.

For the bottom left corner, we're aligned to the parent's left edge and

Для нижнего левого угла мы выравниваем по левому и нижнему краю

родительского элемента.

So we say align parent bottom equals true.

Поэтому указываем для alignParentBottom значение true.

True, and a line parent left equals true.

И для alignParentLeft значение true.

These values are false, and they're false by default, so

Эти значения равны false, это значения по умолчанию,

you don't need to include them in the XML code.

поэтому их не нужно включать в код XML.

And then for the very last corner, it's aligned to the parent's right edge and

И для последнего угла выравниваем по правому и нижнему краям

родительского элемента.

So align parent bottom and align parent right are equal to true.

Поэтому значения alignParentBottom и alignParentRight равны true.

The other two are false.

Остальные два значения false.

So we can leave them out of the code.

Их можно не включать в код.

Believe it or not there's even more attributes that you could set.

Верите вы или нет, есть еще много атрибутов, которые можно установить.

You can also center the view horizontally, so

Также можно отцентрировать представление по горизонтали, указав для атрибута

you said, android layout under score horizontal to be true.

android:layout_CenterHorizonta значение true.

And you can also add it to the existing attributes we learned before.

Также можно добавить его к атрибутам, изученным нами ранее.

So if this is a line to the bottom, and it's centered horizontally,

Итак, если элемент выровнен по нижнему краю

it would look like this.

и отцентрирован по горизонтали, он будет выглядеть так.

The last one I'm going to show you is layout_centerVertical.

Последний атрибут, который я покажу — layout_centerVertical.

If this is set to true, then it centers the view vertically within the parent.

При значении true он центрирует представление по вертикали внутри родительского представления.

The reason why this TextView is aligned to the left edge of the parent, even if

Это текстовое представление выровнено по левому краю,

we didn't set this value, is because all views that are added to the relative

хотя мы не задали это значение. Это потому, что все представления, добавленные в относительную

layout, are positioned by default in the top left corner of the view group.

разметку, по умолчанию располагаются в левом верхнем углу группы представлений.

All of these attributes are called view group layout parameters.

Все эти атрибуты называются параметрами разметки группы представлений.

Even though they're declared on the child XML elements,

Хотя они и объявлены в дочерних элементах XML,

they're used by the parent view group to know how to position the children.

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

Thus, they all start with layout underscore.

Все они начинаются с layout и подчеркивания.

This also follows the pattern of layout underscore width, and

Это также соответствует структуре layout_width и layout_height,

layout underscore height, which you are already familiar with.

с которыми вы уже знакомы.

Those two attributes are also view group layout perimeters, because they are used

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

by the view group parent, in order to position and size the children.

родительской группой представлений для определения

And here's the XML for relative layout and its children.

расположения и размера дочерних элементов. Вот XML для относительной разметки и ее дочерних элементов.

You can follow along in the link below.

Вы можете перейти по ссылке ниже.

We have an opening relative layout tag, and we have a closing tag at the bottom

Есть открывающий тег относительной разметки и закрывающий тег здесь внизу,

here, and all the children are in between.

а также дочерние элементы между ними.

The width and height of the RelativeLayout is set to be match_parent.

Для ширины и высоты RelativeLayout задано значение match_parent.

Since this is the layout for

Так как это разметка для всего приложения,

our whole app, it's going to take up the whole screen.

она займет весь экран.

There are three child texts used inside the RelativeLayout.

Есть три дочерних текста внутри RelativeLayout.

The first one is a TextView that says Happy.

Первый из них — Happy.

The width and height are wrap_content, and we have these additional attributes

Значения ширины и высоты равны wrap_content, и есть дополнительные атрибуты,

to help the relative layout, know where to position this child text view.

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

We tell it to align it to the parent's right edge, and

Мы говорим выровнять по правому и верхнему краю

to align to the parent's top edge.

родительского элемента.

So that puts the happy text view in the top right corner of the screen.

Итак, текст Happy размещается в правом верхнем углу экрана.

For the birthday text view, the width and height are also wrap content.

Для текстового представления birthday ширина и высота также равны wrap_content.

Then we want it to align to the parent's bottom and left edges.

Далее мы хотим выровнять его по нижнему и левому краям родительского элемента.

So the bottom and left edges leads to this corner down here.

Нижний и левый края формируют вот этот угол.

This last text view that says, To You, doesn't have any specific

Это последнее представление с текстом To You не имеет конкретных

attributes specifying where it is relative to the parent.

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

All we know is that the width and height should be wrap content.

Нам известно только, что ширина и высота равны wrap_content.

As I mentioned earlier, if you don't specify where a child view should go,

Как я говорила ранее, если вы не указываете размещение дочернего элемента,

by default, the relative will add it to the top left corner of the screen.

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

Similar videos:

Relative to Other Views
Udacity
180K views 93 likes 0 dislikes 26 May 201538% match

Width and Height
Udacity
120.6K views 97 likes 1 dislikes 27 May 201536% match

Positioning - Solution
Udacity
2.9K views 24 likes 4 dislikes 08 Jun 201535% match

Layout Weight
Udacity
133.7K views 128 likes 5 dislikes 28 May 201535% match

Revisão de Views e ViewGroups
Udacity
3K views 22 likes 1 dislikes 23 Feb 201534% match

LinearLayout
Udacity
206K views 104 likes 0 dislikes 26 May 201534% match

Build_Layout
Udacity
3.3K views 15 likes 0 dislikes 22 May 201532% match

Layout Weight
Udacity
3.8K views 26 likes 1 dislikes 22 May 201531% match

XML Syntax
Udacity
337.3K views 279 likes 14 dislikes 26 May 201531% match

Build Quantity Picker Layout - Solution
Udacity
1.6K views 16 likes 0 dislikes 27 May 201530% match

How to Style the Image - Solution
Udacity
2.7K views 26 likes 0 dislikes 25 May 201530% match

Simple ImageView
Udacity
150K views 82 likes 1 dislikes 26 May 201530% match

Padding vs. Margin
Udacity
114.7K views 75 likes 3 dislikes 21 Jul 201530% match

Find View by Id - Solution
Udacity
1.4K views 17 likes 0 dislikes 07 Jul 201529% match

How to make a floor on a loggia from OSB
Practice makes perfect
177.5K views 1.7K likes 274 dislikes 25 Apr 201929% match

Equivalent fractions and different wholes | Fractions | 4th grade | Khan Academy
Khan Academy
214K views 111 likes 34 dislikes 11 Sep 201528% match

CSS Effect | 02 Pseudo
Programming Tutorials
14.2K views 135 likes 5 dislikes 14 Oct 201428% match

TODO Android App Engineer @ Google 2
Udacity
17.8K views 171 likes 6 dislikes 06 Jun 201628% match

Chame Métodos no Objeto
Udacity
4.8K views 27 likes 2 dislikes 07 Jul 201528% match

Scrolling Along - Solution
Udacity
1.8K views 15 likes 0 dislikes 14 Jul 201528% match

TODO Android App Engineer @ Google 1
Udacity
32.7K views 315 likes 7 dislikes 06 Jun 201628% match

SUB)팬트리, 보조주방 정리방법ㅣ정리 용기와 선반 정보 ㅣ선반 사용 팁ㅣ다용도실정리4
Somehow Housewife - Good Wife
32K views 401 likes 10 dislikes 04 Mar 202127% match

Vivo Y11 2019 - Unboxing, First Impressions, Quick Overview
Tech Prolonged
26.4K views 209 likes 21 dislikes 20 Oct 201927% match

Vector intro for linear algebra | Vectors and spaces | Linear Algebra | Khan Academy
Khan Academy
1M views 1.3K likes 26 dislikes 17 Jun 201527% match

Calculus III: Two Dimensional Vectors (Level 1 of 13) | Basics
Math Fortress
11.8K views 68 likes 1 dislikes 03 Jul 201427% match

Best Equipment for ATTILA+TAKEDA? Let's Test | Rise of Kingdoms
Wick Gaming
11.2K views 517 likes 6 dislikes 20 Mar 202127% match

21a_s_Update Order Summary
Udacity
1.9K views 12 likes 3 dislikes 01 Jul 201527% match

REPARE TELEVISORES CON SU PC
ELECTRONICA HOY TV
6.7K views 656 likes 3 dislikes 31 Oct 202027% match

Define a Method
Udacity
65.1K views 24 likes 0 dislikes 16 Jul 201527% match

CSS Effect | 12 inner shadow
Programming Tutorials
2.6K views 25 likes 0 dislikes 04 Nov 201427% match

Settings Privacy About Contact Donate