Return to Video

02-20 Padding vs. Margin

  • 0:00 - 0:02
    Молодцы.
  • 0:02 - 0:05
    Вы на пути к созданию
    поистине красивых разметок.
  • 0:05 - 0:09
    Тем не менее я замечаю одну проблему
    в большинстве разметок, созданных нами.
  • 0:09 - 0:13
    Элементы View находятся прямо
    на краю ViewGroup или
  • 0:13 - 0:14
    у края экрана.
  • 0:14 - 0:16
    Всем разметкам, которые
    мы создали на этом уроке,
  • 0:16 - 0:20
    можно добавить лоска, сделать
  • 0:20 - 0:24
    их красивее, добавив
    немного свободного пространства.
  • 0:24 - 0:26
    Мы сделаем это, используя отступ и поля,
  • 0:26 - 0:29
    о которых пойдет речь в этом видео.
  • 0:29 - 0:32
    Например, мы могли бы добавить немного
    свободного пространства здесь, здесь
  • 0:32 - 0:34
    и даже наверху, чтобы
    элементы View не кучковались
  • 0:34 - 0:38
    у края материнского элемента или
    у края дисплея устройства.
  • 0:38 - 0:39
    На самом деле это вопрос дизайна,
  • 0:39 - 0:42
    поскольку иногда как раз нужно
    расположение по краю, например, чтобы
  • 0:42 - 0:45
    добиться эффекта изображения без полей,
    о котором я говорила раньше.
  • 0:45 - 0:49
    В любом случае вы можете использовать
    свободное пространство, чтобы сделать
  • 0:49 - 0:53
    разметку просторнее и немного облегчить
    чтение и просмотр контента.
  • 0:53 - 0:57
    Я покажу вам, что получится, если добавить
    отступ или поле к элементу View.
  • 0:57 - 0:59
    Начнем с компонента TextView,
    который выводит текст Hello.
  • 0:59 - 1:02
    Если добавить 8 dp
    отступа к элементу View,
  • 1:02 - 1:05
    то он увеличится на 8 dp
    в каждом направлении.
  • 1:05 - 1:08
    Если добавить поле размером
    8 dp в элемент TextView,
  • 1:08 - 1:11
    то результат будет выглядеть так.
  • 1:11 - 1:13
    Чтобы добавить поле, нужно
    расположить его внутри ViewGroup,
  • 1:13 - 1:16
    поэтому у меня он находится
    в этой разметке LinearLayout.
  • 1:16 - 1:19
    В разметке LinearLayout исходный TextView
  • 1:19 - 1:21
    сокращается на 8 dp.
  • 1:21 - 1:23
    Слева и сверху.
  • 1:23 - 1:26
    И с боков тоже.
  • 1:26 - 1:28
    Поэтому, хотя вы создаете
  • 1:28 - 1:33
    отступ или поле на дочернем TextView,
    отступ производится самим TextView.
  • 1:33 - 1:36
    Поля же создаются
    материнским элементом ViewGroup.
  • 1:36 - 1:40
    Если вы используйте оба способа,
    и у вас не установлен фон для
  • 1:40 - 1:43
    TextView, то результаты будут
    выглядеть одинаково.
  • 1:43 - 1:46
    Текст будет находиться на расстоянии
    8 dp от левого края и на 8 dp ниже
  • 1:46 - 1:48
    верхнего края устройства.
  • 1:48 - 1:52
    Однако если в элементе TextView
    установлен цветной фон,
  • 1:52 - 1:55
    то пользователь увидит, что
    TextView такого большого размера.
  • 1:55 - 1:59
    На другом же устройстве
    TextView будет только такого размера.
  • 1:59 - 2:01
    Вот код для
    отображения отступа в элементе view.
  • 2:02 - 2:07
    В XML-элементе TextView вы
    задаете новый атрибут:
  • 2:07 - 2:11
    android:padding = "8 dp"
    [отступ равен 8 dp].
  • 2:11 - 2:12
    Вы можете выбрать любой размер
  • 2:12 - 2:15
    отступа, главное,
    чтобы он исчислялся в dp.
  • 2:15 - 2:19
    Когда мы устанавливаем 8 dp отступа,
    то отсчитывается 8 dp
  • 2:19 - 2:21
    от левого, верхнего, нижнего
    и правого краев TextView.
  • 2:22 - 2:25
    Вместо того чтобы использовать
    общий атрибут android:padding,
  • 2:25 - 2:29
    мы можем разделить атрибуты на
    левый, правый, верхний и нижний.
  • 2:29 - 2:33
    Эти четыре строки кода
    действуют так же, как одна эта строка.
  • 2:33 - 2:36
    Однако эти четыре атрибута
    позволяют вам иметь разную величину
  • 2:36 - 2:39
    отступа левого, правого
    верхнего и нижнего краев.
  • 2:39 - 2:43
    Необязательно устанавливать одинаковую
    величину отступа для всех четырех сторон.
  • 2:43 - 2:47
    Величина отступа по умолчанию равна нулю.
    Поэтому, если настроить отступ слева,
  • 2:47 - 2:52
    справа, сверху, но не снизу,
    отступ снизу будет равен 0 dp.
  • 2:52 - 2:56
    Чтобы настроить величину полей, нужно
    снова добавить в TextView атрибут.
  • 2:56 - 3:00
    Название атрибута — android:layout_margin.
  • 3:00 - 3:05
    Мы можем задать значение, например 8 dp.
    Тогда дочерний TextView отодвигается
  • 3:05 - 3:07
    от родительского элемента на 8 dp
    со всех сторон.
  • 3:07 - 3:12
    Если наверху есть другой
    дочерний TextView, то атрибут margin
  • 3:12 - 3:15
    поместит этот TextView на 8 dp
    ниже края первого элемента TextView.
  • 3:16 - 3:19
    Можете представить, что наличие полей —
    это будто маленькое силовое поле
  • 3:19 - 3:20
    вокруг этого элемента view.
  • 3:20 - 3:24
    Другие элементы view не могут войти
    в окружающую его зону размером в 8 dp.
  • 3:24 - 3:28
    Так можно разделить атрибут layout_margin
    на 4 атрибута для каждой стороны:
  • 3:28 - 3:32
    установить поле слева, справа,
    сверху и снизу.
  • 3:32 - 3:36
    Если не задать какое-нибудь значение,
    то по умолчанию оно будет нулевым.
  • 3:36 - 3:39
    Чтобы помнить, что именно ViewGroup
    задает позиции этих дочерних
  • 3:39 - 3:42
    элементов, основываясь на величине полей,
    можете посмотреть на атрибуты.
  • 3:42 - 3:45
    Все они начинаются с layout_margin.
  • 3:45 - 3:48
    Таким образом, вы понимаете, что
    именно ViewGroup определяет позицию
  • 3:48 - 3:50
    этих элементов view.
  • 3:50 - 3:53
    Отступ и поля
    можно применить ко всем view.
  • 3:53 - 3:56
    Давайте применим полученные
    знания об атрибутах на практике.
  • 3:56 - 3:58
    У меня есть три элемента TextView
    в линейной разметке.
  • 3:58 - 4:01
    Все три расположены прямо
    у левого края экрана, поэтому
  • 4:01 - 4:03
    мне нужно добавить немного пространства.
  • 4:03 - 4:05
    Попробуем добавить поля.
  • 4:06 - 4:08
    Отлично, теперь вокруг
    этого элемента TextView больше места.
  • 4:09 - 4:12
    Сделаю то же самое с оставшимися
    двумя элементами TextView.
  • 4:12 - 4:17
    Любопытно. Здесь 16 dp,
    а здесь – 32 dp, потому что
  • 4:17 - 4:20
    производится отступ 8 dp от нижнего
    поля первого элемента TextView
  • 4:20 - 4:23
    и отступ 8 dp от верхнего поля
    второго элемента TextView.
  • 4:23 - 4:25
    Если мы хотим добиться последовательного
    отступа, чтобы
  • 4:25 - 4:30
    между элементами всегда было 16 dp,
    нам нужно изменить вот этот атрибут поля.
  • 4:30 - 4:33
    Я могу разбить его на
    отдельные величины полей.
  • 4:33 - 4:38
    Этот код дает мне левое поле размером
    16 dp и верхнее поле размером 16 dp.
  • 4:38 - 4:41
    Для первого элемента TextView
    нижнего поля нет, поэтому
  • 4:41 - 4:44
    это пространство между элементами
    теперь имеет правильный размер 16 dp.
  • 4:44 - 4:47
    То же самое касается последнего TextView.
  • 4:47 - 4:49
    Здорово, теперь вертикальные
    интервалы равнозначны.
  • 4:50 - 4:53
    Ранее я говорила, что мы добавляем
    свободное пространство
  • 4:53 - 4:56
    к краям этих элементов;
    формально это пространство прозрачное.
  • 4:56 - 4:59
    Можно смотреть сквозь него,
    видеть то, что за ним.
  • 4:59 - 5:02
    В нашем случае у элемента ViewGroup
    серый фон.
  • 5:02 - 5:05
    На устройстве разметка будет одинаковой
    независимо от того, используется
  • 5:05 - 5:09
    поле или отступ, потому что в этом случае
    у элемента TextView нет цветного фона.
  • 5:10 - 5:12
    Давайте добавим его и посмотрим,
    где границы каждого элемента view.
  • 5:13 - 5:16
    Теперь у первого элемента TextView
    есть цветной фон.
  • 5:16 - 5:20
    Мы добавили левые и верхние поля
    и видим, что ViewGroup просто
  • 5:20 - 5:23
    отодвигает TextView вправо на 8 dp
    и вниз на 8 dp.
  • 5:23 - 5:27
    Мы можем заменить поля отступом,
    и теперь мы видим, что TextView стал
  • 5:27 - 5:30
    больше и занимает эти 8 dp
    пространства слева и сверху.
  • 5:31 - 5:33
    Итак, на устройстве все будет
    выглядеть по-разному, в зависимости
  • 5:33 - 5:35
    от того, поля или отступ используются,
  • 5:35 - 5:38
    и имеет ли этот элемент TextView
    цветной фон.
  • 5:38 - 5:41
    Мы можем сделать то же самое
    с остальными элементами view.
  • 5:42 - 5:45
    Отступ и поля можно добавлять
    не только для дочерних элементов view,
  • 5:45 - 5:48
    но и для элемента ViewGroup.
  • 5:48 - 5:51
    Если я добавлю отступ в линейной разметке,
  • 5:51 - 5:56
    то элементы view будут сдвинуты
    на 16 dp со всех сторон.
  • 5:56 - 5:59
    Я упоминала, что вы можете задать
    любую величину отступа или поля.
  • 5:59 - 6:01
    Но как узнать, какую величину выбрать?
  • 6:01 - 6:05
    В руководстве по материальному дизайну
    рекомендуется использование интервалов
  • 6:05 - 6:06
    размером 8 dp.
  • 6:06 - 6:09
    Это немного более продвинутый уровень
    знаний, но в целом это значит, что
  • 6:09 - 6:13
    компоненты должны выстраиваться на экране
    в соответствии с этой квадратной сеткой.
  • 6:13 - 6:16
    Квадраты не видны на дисплее, но
  • 6:16 - 6:18
    если вы захотите поместить текст здесь,
  • 6:18 - 6:21
    то нужно будет переместить его
    на два квадрата влево.
  • 6:21 - 6:25
    Два квадрата на этой сетке
    равнозначны 16 dp.
  • 6:25 - 6:29
    На экране, отображающем почтовый ящик,
    все иконки выстроены в эту линию.
  • 6:29 - 6:33
    Они расположены на 16 dp правее
    левого края экрана,
  • 6:33 - 6:38
    а весь текст вот здесь расположен
    на 72 dp правее левого края дисплея.
  • 6:38 - 6:41
    Таким образом, становится понятно, что
    контент располагается вдоль
  • 6:41 - 6:42
    определенных линий.
  • 6:42 - 6:44
    Вот другой способ показать это.
  • 6:44 - 6:47
    На этом скриншоте из приложения Google I/O
  • 6:47 - 6:54
    контент выстроен вдоль этой
    линии 16 dp, а также этой линии 72 dp.
  • 6:54 - 6:57
    По сути это на 72 dp правее
    левого края дисплея.
  • 6:57 - 6:59
    На этом краю
  • 6:59 - 7:03
    контент расположен за 16 dp до
    правого края дисплея.
  • 7:03 - 7:05
    Планшеты
    имеют дисплеи большего размера, поэтому
  • 7:05 - 7:07
    можно позволить больший отступ.
  • 7:07 - 7:11
    Отступ может быть 24 dp от левого
    края экрана, то же касается
  • 7:11 - 7:12
    и других значений.
  • 7:12 - 7:17
    Мы рекомендуем эти величины потому,
    что это облегчает чтение контента.
  • 7:17 - 7:20
    Например, если бы этот заголовок
    был смещен на пару пикселей влево,
  • 7:20 - 7:24
    а этот подзаголовок смещен
    на пару пикселей вправо,
  • 7:24 - 7:26
    то здесь край был бы зазубренным.
  • 7:26 - 7:30
    Это отвлекало бы пользователей от
    чтения самого контента.
  • 7:30 - 7:34
    Выравнивание всего вдоль одной линии
    упрощает чтение и работу с приложением.
  • 7:34 - 7:38
    Приведу пару примеров практического
    использования отступа и полей.
  • 7:38 - 7:40
    На этом скриншоте Google Calendar
  • 7:40 - 7:43
    мы видим, что текст
    вот здесь немного смещен.
  • 7:43 - 7:46
    Также между событиями календаря
    имеется немного свободного пространства.
  • 7:47 - 7:48
    Если бы мы использовали отступ,
  • 7:48 - 7:52
    то это фоновое изображение
    заняло бы это пустое пространство.
  • 7:52 - 7:56
    При использовании полей вокруг
    элемента view образуется пустое
  • 7:56 - 7:58
    пространство, так что, наверное, это поля.
  • 7:58 - 8:02
    Вот другой скриншот
    страницы с подробностями о событии.
  • 8:02 - 8:06
    Здесь много текста,
    и есть промежутки больше остальных.
  • 8:06 - 8:09
    Мы можем создать подобные более
    крупные промежутки с помощью отступа.
  • 8:09 - 8:13
    Чтобы создать вот этот промежуток, можно
    добавить нижний отступ к этому TextView
  • 8:13 - 8:15
    либо верхний отступ к этому элементу view.
  • 8:16 - 8:18
    Любой из этих способов подойдет.
  • 8:18 - 8:21
    Можно даже использовать
    поле разметки [layout_margin].
  • 8:21 - 8:24
    В этом случае невозможно сказать,
    поля использованы или отступ,
  • 8:24 - 8:28
    поскольку фон текста прозрачный.
  • 8:28 - 8:31
    Теперь ваш черед попрактиковаться
    в назначении разных величин
  • 8:31 - 8:32
    отступа и полей.
  • 8:32 - 8:35
    Мы предоставили исходный код, доступный
    по ссылке ниже, чтобы помочь вам начать.
  • 8:36 - 8:39
    Когда вы освоите назначение величин
    отступа и полей, попробуйте
  • 8:39 - 8:40
    создать такую разметку.
  • 8:41 - 8:46
    Кстати, этот текст расположен
    на расстоянии 16 dp от краев.
  • 8:46 - 8:49
    Однако между двумя элементами TextView
    только 8 dp.
  • 8:49 - 8:51
    Когда закончите, поставьте здесь галочку.
Title:
02-20 Padding vs. Margin
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
08:52
sp15 edited Russian subtitles for 02-20 Padding vs. Margin
Евгений малянов edited Russian subtitles for 02-20 Padding vs. Margin

Russian subtitles

Revisions Compare revisions