Return to Video

4 - The Stages SOL

  • 0:01 - 0:04
    Я отвечу на эти вопросы
    перед тем, как открыть XML-файл.
  • 0:05 - 0:07
    Первым делом
    выбираем элементы интерфейса.
  • 0:07 - 0:09
    Я нарисую рамки вокруг тех,
    которые я вижу.
  • 0:10 - 0:12
    Итак, у нас пять разных элементов,
    не считая группы элементов,
  • 0:12 - 0:14
    которая сама формально
    считается элементом.
  • 0:14 - 0:15
    Но это неважно.
  • 0:15 - 0:18
    В числе этих пяти элементов
    два TextView в верхней части,
  • 0:18 - 0:19
    за которыми следуют три кнопки.
  • 0:19 - 0:24
    Здесь нет элементов ImageView,
    то есть их количество равно нулю.
  • 0:25 - 0:28
    Наверно, вам любопытно, почему
    я решила, что это два разных TextView.
  • 0:28 - 0:33
    В финальном варианте
    надпись Team A и счет
  • 0:33 - 0:34
    выглядят совершенно по-разному.
  • 0:34 - 0:37
    Поэтому я решила оставить их
    по отдельности.
  • 0:38 - 0:40
    Переходим ко второму этапу:
    позиционированию элементов.
  • 0:40 - 0:42
    Мне нужно выбрать
    подходящий ViewGroup.
  • 0:43 - 0:47
    Я рассматриваю варианты
    Llinear Layout и Relative Layout.
  • 0:47 - 0:49
    Перед нами вертикальный столбец элементов.
  • 0:49 - 0:53
    Так что у меня нет сомнений,
    что выбрать, - это Linear Layout.
  • 0:54 - 0:57
    И, наконец-то, третий этап:
    стиль элементов интерфейса.
  • 0:57 - 1:00
    Я займусь этим
    в процессе работы с XML.
  • 1:00 - 1:02
    Давайте перейдем к XML.
  • 1:03 - 1:05
    Мне нужна текстовая вкладка.
  • 1:05 - 1:10
    Прежде всего, я удалю части кода,
    которые мне не нужны.
  • 1:10 - 1:12
    Начнем с удаления этого TextView.
  • 1:13 - 1:18
    И все эти paddingLeft, paddingRight,
    paddingTop и paddingBottom
  • 1:18 - 1:19
    нам тоже ни к чему.
  • 1:20 - 1:22
    Делаю это очень осторожно, чтобы
    не удалить случайно что-нибудь лишнее.
  • 1:23 - 1:24
    Так.
  • 1:25 - 1:28
    Мы решили, что не будем использовать
    Relative Layout в качестве ViewGroup.
  • 1:28 - 1:30
    Наш выбор - Linear Layout,
    и сейчас я внесу сюда исправление.
  • 1:31 - 1:35
    И внутри этого Linear Layout
    у меня будут два TextView,
  • 1:35 - 1:36
    и три кнопки.
  • 1:36 - 1:37
    Сейчас я их впишу.
  • 1:38 - 1:40
    Я сейчас не буду уточнять
  • 1:40 - 1:42
    ширину и высоту этого TextView.
  • 1:43 - 1:45
    Пока что я просто укажу
    wrap_content.
  • 1:45 - 1:48
    Так рамка элемента разместится
    непосредственно вокруг текста.
  • 1:49 - 1:52
    Заодно я задам текст
    для этого TextView.
  • 1:52 - 1:55
    В этом первом TextView
    будет написано просто Team A.
  • 1:56 - 1:58
    Давайте перейдем
    к предварительному просмотру.
  • 1:59 - 2:01
    Итак, я вижу здесь маленький TextView,
    в котором написано Team A.
  • 2:02 - 2:03
    Давайте создадим еще парочку.
  • 2:04 - 2:07
    Итак, ниже у нас идет счет,
    и это тоже TextView.
  • 2:07 - 2:10
    Начинаем вводить Text.
  • 2:10 - 2:13
    Я вижу слово TextView
    и нажимаю Enter.
  • 2:13 - 2:15
    И в этом случае я тоже
    выберу wrap_content.
  • 2:16 - 2:17
    Я добавлю сам текст.
  • 2:18 - 2:21
    Счет обычно начинается с нуля,
    поэтому я поставлю здесь ноль.
  • 2:22 - 2:22
    Хорошо.
  • 2:23 - 2:23
    Теперь кнопки.
  • 2:24 - 2:25
    Я начинаю печатать слово Button.
  • 2:26 - 2:27
    Установлю wrap_content
    и для этих элементов.
  • 2:28 - 2:32
    На первой кнопке должно
    быть написано "+3 points".
  • 2:32 - 2:34
    Я скопирую этот код
  • 2:35 - 2:40
    и вставлю два раза.
    У меня теперь есть еще две кнопки.
  • 2:40 - 2:42
    На одной будет написано
    "+2 points",
  • 2:43 - 2:45
    а на другой - "Free Throw".
  • 2:45 - 2:47
    Давайте перейдем в
    предварительный просмотр.
  • 2:48 - 2:51
    Так, у меня есть три кнопки.
  • 2:51 - 2:54
    Я вижу надпись Team A и ноль.
  • 2:54 - 2:56
    Есть все необходимые элементы.
  • 2:56 - 2:59
    Но все это выглядит
    не так, как предполагалось.
  • 2:59 - 3:01
    Элементы должны
    располагаться вертикально.
  • 3:01 - 3:03
    Думаю, мне нужно изменить
    ориентацию макета.
  • 3:03 - 3:05
    Сейчас я это сделаю.
  • 3:05 - 3:09
    Я начинаю набирать orientation
    и выбираю vertical.
  • 3:10 - 3:11
    Хорошо, так смотрится чуть лучше.
  • 3:12 - 3:17
    Эти кнопки были увеличены,
    чтобы заполнить пространство окна.
  • 3:17 - 3:20
    Так что, пожалуй, я не хочу использовать
    свойство wrap_content для кнопок.
  • 3:21 - 3:23
    Вместо этого я выберу match_parent.
  • 3:23 - 3:24
    Я изменю это прямо сейчас.
  • 3:26 - 3:29
    Так, ширина всех кнопок теперь
    установлена на match_parent.
  • 3:29 - 3:30
    Предварительный просмотр.
  • 3:31 - 3:33
    С расширенными кнопками
    смотрится лучше.
  • 3:33 - 3:39
    Хорошо. Но текст все еще зажат в углу.
  • 3:39 - 3:44
    Чтобы исправить это, я воспользуюсь
    атрибутом gravity.
  • 3:44 - 3:46
    Я нахожусь в программе Google Drawings.
  • 3:46 - 3:49
    Давайте сделаем здесь
    текстовое окно.
  • 3:50 - 3:52
    Выглядит почти как границы элемента.
  • 3:53 - 3:55
    Я могу напечатать Team A,
  • 3:55 - 3:57
    и по умолчанию этот текст
    окажется в левом верхнем углу.
  • 3:58 - 4:01
    То же самое происходит с TextView:
    при вводе текста
  • 4:01 - 4:03
    он по умолчанию появится
    в верхнем левом углу.
  • 4:03 - 4:06
    В Google Drawings
    я могу выделить этот текст
  • 4:07 - 4:11
    и применить к нему своего рода атрибут
    под названием align [выравнивание],
  • 4:12 - 4:13
    чтобы выровнять текст по центру
  • 4:14 - 4:18
    текстовой рамки по горизонтали
    и по вертикали.
  • 4:19 - 4:19
    Очень удобно.
  • 4:20 - 4:25
    Перемещение содержимого
    в границах элемента
  • 4:25 - 4:27
    и есть назначение
    атрибута gravity.
  • 4:27 - 4:30
    Если вам кажется, что это похоже
    на некоторые способы выравнивания,
  • 4:30 - 4:33
    в относительной разметке,
    так и есть.
  • 4:33 - 4:36
    Но атрибут gravity можно использовать
    при линейной разметке.
  • 4:36 - 4:37
    Поэтому он такой полезный.
  • 4:38 - 4:39
    Посмотрим на него в коде.
  • 4:40 - 4:44
    Я перейду к первому элементу TextView
    и начну набирать gravity.
  • 4:45 - 4:48
    У меня есть два варианта:
    layout_gravity и gravity.
  • 4:49 - 4:51
    Мы сейчас разобрали
    атрибут gravity,
  • 4:51 - 4:52
    поэтому его мы и используем.
  • 4:53 - 4:55
    Хорошо. У меня здесь
    есть несколько опций,
  • 4:56 - 4:59
    Я хочу отцентровать текст по горизонтали,
    поэтому я выберу center_horizontal.
  • 5:00 - 5:03
    Проверим, что из этого вышло,
    в окне предпросмотра.
  • 5:04 - 5:08
    Кажется, что почти ничего не изменилось.
    Но на это есть причина.
  • 5:09 - 5:10
    Если я нажму здесь...
  • 5:11 - 5:13
    Я увеличу масштаб,
    чтобы вы смогли рассмотреть.
  • 5:15 - 5:20
    Итак, вот надпись Team A, вокруг которой
    можно различить границы элемента.
  • 5:21 - 5:24
    Если я скажу, что этот текст
    выровнен по центру элемента,
  • 5:25 - 5:26
    вам будет сложно оспорить мои слова.
  • 5:27 - 5:29
    Похоже, что текст в самом деле
    находится в центре.
  • 5:29 - 5:31
    Просто элемент очень маленький.
  • 5:32 - 5:33
    Если вернуться в Google Drawings,
  • 5:33 - 5:38
    это все равно, что уменьшить
    размер рамки до размера текста.
  • 5:39 - 5:40
    Текст в центре,
  • 5:40 - 5:44
    но выглядит он также, как если бы
    был выровнен по левой стороне.
  • 5:45 - 5:47
    И если я хочу выровнять
    текст по центру в телефоне,
  • 5:47 - 5:50
    мне нужно растянуть элемент
    во всю ширину экрана.
  • 5:50 - 5:52
    То есть нужно изменить
    ширину рамки.
  • 5:54 - 5:56
    Я закрою окно
    предпросмотра.
  • 5:57 - 5:59
    Я перейду вот сюда
    к свойству width [ширина].
  • 6:00 - 6:04
    Вместо wrap_content
    я выберу match_parent.
  • 6:05 - 6:08
    Вернемся в предпросмотр.
    Уменьшим масштаб.
  • 6:09 - 6:12
    Так все выглядит намного лучше.
    Похоже, все выровнено по центру.
  • 6:12 - 6:14
    Давайте проделаем то же самое со счетом.
  • 6:16 - 6:18
    Я добавлю и сюда
    атрибут gravity.
  • 6:19 - 6:20
    gravity, а не layout_gravity.
  • 6:22 - 6:23
    center_horizontal
  • 6:24 - 6:26
    Значение ширины match_parent.
  • 6:27 - 6:29
    Давайте посмотрим еще раз.
  • 6:29 - 6:32
    Отлично! Все выровнено по центру.
    Выглядит очень хорошо.
  • 6:32 - 6:34
    За исключением того,
    что все как-то сжато вместе.
  • 6:34 - 6:37
    Между этими элементами
    почти нет свободного места.
  • 6:37 - 6:40
    Я задам значение 4
    для атрибута padding каждого TextView.
  • 6:42 - 6:46
    Начинаю печатать padding,
    Задам значение 4dp.
  • 6:47 - 6:48
    Помните, что такое dp?
  • 6:48 - 6:52
    Причем я использую только padding,
    не padding_bottom или что-то подобное.
  • 6:52 - 6:55
    Таким образом отступ в 4dp
    будет сделан вокруг всего TextView.
  • 6:56 - 6:57
    Давайте перейдем
    к предпросмотру.
  • 6:58 - 7:00
    Хорошо. Так появилось
    больше пространства.
  • 7:01 - 7:04
    Я проделаю то же самое
    с TextView, показывающим счет.
  • 7:08 - 7:11
    А теперь я попробую проделать
    то же самое с кнопкой.
  • 7:16 - 7:19
    Хм, что-то почти ничего не изменилось.
  • 7:19 - 7:22
    Может сделать отступ побольше?
    Пускай будет 8.
  • 7:24 - 7:25
    А если 20?
  • 7:26 - 7:30
    Интересно. Похоже,
    увеличивается сама кнопка.
  • 7:30 - 7:32
    Но я не этого хочу.
  • 7:32 - 7:34
    Я хочу, чтобы поля
    вокруг кнопки увеличились.
  • 7:34 - 7:37
    На самом деле, для этого
    лучше подходит layout_margin.
  • 7:38 - 7:41
    Запомните, что с помощью padding
    мы создаем отступ внутри элемента,
  • 7:41 - 7:43
    тогда как margin задает
    поля вокруг элемента.
  • 7:44 - 7:45
    Изменим это
    на layout_margin.
  • 7:46 - 7:47
    Я напечатаю 8dp.
  • 7:48 - 7:49
    Вот так-то лучше.
  • 7:50 - 7:53
    Теперь есть отступ вокруг элемента
    и между этими двумя элементами.
  • 7:53 - 7:55
    Проделаем это
    и с остальными кнопками.
  • 7:56 - 7:58
    margin, не padding.
    layout_margin.
  • 8:00 - 8:01
    Так, выглядит отлично.
  • 8:01 - 8:04
    Если вы выбрали другие атрибуты,
  • 8:04 - 8:08
    например задали значение 5, а не 4
    для padding, - ничего страшного.
  • 8:08 - 8:11
    На этом этапе я всего лишь
    пытаюсь сделать элементы читаемыми.
  • 8:12 - 8:15
    Мы займемся размером и
    цветом шрифта позднее.
  • 8:17 - 8:19
    Хорошо. Прекрасная работа!
  • 8:19 - 8:20
    Этот этап вы освоили.
タイトル:
4 - The Stages SOL
概説:

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
UD837 - Android for Beginners
Duration:
08:22

Russian subtitles

改訂