Return to Video

13-02 Adding a CheckBox - Solution

  • 0:01 - 0:03
    Чтобы сделать такую раскладку,
    подумайте как все должно выглядеть.
  • 0:03 - 0:07
    Я буду считать что все это
    уже сделано и мы лишь
  • 0:07 - 0:11
    обсудим новые элементы
    которые надо добавить в раскладку.
  • 0:11 - 0:15
    Два новых элемента которые надо
    добавить это TextView для Toppings и
  • 0:15 - 0:18
    CheckBox для Whipped cream.
  • 0:18 - 0:21
    Вы наверное не знаете что
    такая панель есть в Android, но
  • 0:21 - 0:24
    надеюсь, что поиск в Google
    поможет вам найти ответ.
  • 0:25 - 0:28
    Во втором шаге нам надо
    расставить панели.
  • 0:28 - 0:31
    Считая что эти панели уже
    верно расположены,
  • 0:31 - 0:35
    нам надо добавить Toppings Whipped
    cream, вертикально в той же строке.
  • 0:35 - 0:37
    Поскольку главная раскладка
  • 0:37 - 0:40
    вертикальная и линейная, мы
    добавим эти панели наверху.
  • 0:41 - 0:44
    В третьем шаге нам надо
    сконструировать панели.
  • 0:44 - 0:46
    Стиль заголовка Toppings
    такой же как у заголовков Quantity и
  • 0:46 - 0:49
    Order Summary - поэтому мы можем
    просто скопировать
  • 0:49 - 0:51
    и вставить существующие заголовки.
  • 0:51 - 0:55
    Панель CheckBox нам придется
    конструировать отдельно.
  • 0:55 - 0:59
    Надо установить 24 dp отступа
    между флажком и текстом,
  • 0:59 - 1:04
    и надо изменить размер шрифта
    Whipped cream на 16 sp.
  • 1:04 - 1:06
    Давайте сделаем это все
    в приложении сейчас.
  • 1:07 - 1:11
    Чтобы добавить заголовок Toppings,
    такой же как Quantity, я могу
  • 1:11 - 1:13
    скопировать этот код.
  • 1:13 - 1:17
    Я копирую и добавляю его вверху
    вот этой раскладки LinearLayout.
  • 1:18 - 1:20
    Итак, теперь Quantity здесь
    указано дважды.
  • 1:20 - 1:23
    Я изменю текст на Toppings.
  • 1:23 - 1:25
    Я также скопирую
    нижний отступ так, чтобы
  • 1:25 - 1:29
    было место между заголовком
    и содержимым ниже.
  • 1:30 - 1:33
    Мы не добавляли CheckBox
    в наше приложение раньше, и
  • 1:33 - 1:34
    я поищу в Google как это делать.
  • 1:34 - 1:38
    В поиске я ввожу "checkbox android".
  • 1:38 - 1:41
    Не забудьте указать android
    потому что тут могут быть флажки для
  • 1:41 - 1:45
    других платформ, например
    интернет или мобильных платформ,
  • 1:45 - 1:48
    это поможет вам найти
    результат именно для Android.
  • 1:48 - 1:50
    Попробуем первую ссылку.
  • 1:50 - 1:53
    Это справочник для класса CheckBox.
  • 1:53 - 1:56
    Я пролистываю, это неплохое
    описание класса и
  • 1:56 - 1:59
    вот оно переходит к аттрибутам XML.
  • 1:59 - 2:03
    Что мне надо - это
    некоторые примеры XML для CheckBox.
  • 2:03 - 2:05
    Вернемся к результатам поиска.
  • 2:05 - 2:07
    Пройдем по второй ссылке.
  • 2:07 - 2:10
    Здорово, здесь есть картинки флажков.
  • 2:10 - 2:12
    А вот и XML.
  • 2:12 - 2:13
    Выглядит очень неплохо.
  • 2:13 - 2:16
    Здесь есть два CheckBoxes
    для LinearLayout.
  • 2:16 - 2:19
    Я просто скопирую превый CheckBox, и
  • 2:19 - 2:20
    вставлю в наше приложение.
  • 2:22 - 2:26
    В приложении я вставлю его сразу
    после текста Toppings, но
  • 2:26 - 2:29
    перед текстом Quantity, вот здесь.
  • 2:29 - 2:33
    Я изменю XML потому что он не очень
    подходит для нашего случая.
  • 2:33 - 2:37
    Я уберу id и текст вот здесь.
  • 2:37 - 2:40
    Вместо мяса, поскольку наша
    кофейня не торгует мясом,
  • 2:40 - 2:42
    я напишу - Whipped cream.
  • 2:43 - 2:46
    Кстати, то что вы видели
    раньше, @string/meat,
  • 2:46 - 2:50
    это было обращение к ресурсной
    строке в файле strings.xml.
  • 2:50 - 2:53
    Мы поговорим об этом позже, а сейчас
  • 2:53 - 2:56
    вы можете прописать строку
    сразу вот здесь.
  • 2:56 - 2:59
    И видите - предпросмотр изменился
    и у нас есть флажок Whipped cream.
  • 2:59 - 3:03
    Что здорово у Checkbox - это то, что
    так вы получаете квадратик,
  • 3:03 - 3:08
    вместе с текстом и вам не надо
    добавлять еще текст здесь.
  • 3:08 - 3:11
    Вам также не нужна вот эта строка,
    которая описывает onClick.
  • 3:12 - 3:16
    О чем надо помнить в этом задании -
    это заставить флажок появиться тут.
  • 3:16 - 3:20
    Мы могли найти этот XML
    заглянув в знакомые
  • 3:20 - 3:21
    таблицы подсказок по Аndroid.
  • 3:23 - 3:25
    В этой памятке перечислено множество
    известных раскладок Аndroid,
  • 3:25 - 3:27
    также с примерами XML.
  • 3:28 - 3:33
    Вот раскладка CheckBox,
    а вот пример как она выглядит и
  • 3:33 - 3:34
    и соответствующий XML.
  • 3:34 - 3:37
    Вы могли бы скопировать XML
    отсюда и вставить в приложение.
  • 3:38 - 3:41
    Запустим приложение в Android
    Studio и посмотрим что получилось.
  • 3:42 - 3:43
    Вот так.
  • 3:43 - 3:44
    Очень неплохо.
  • 3:44 - 3:47
    У нас есть заголовок Toppings
    и флажок Whipped cream.
  • 3:48 - 3:50
    А еще вот такая анимация
    при нажатии на флажок.
  • 3:51 - 3:55
    Единственная проблема, что я вижу -
    это плохой отступ.
  • 3:55 - 3:58
    Например, вот здесь слишком тесно
    между заголовком Quantity и
  • 3:58 - 4:01
    флажком Whipped cream
    и мало места вот здесь.
  • 4:02 - 4:04
    Вернемся к нашим красным линиям,
  • 4:04 - 4:09
    нам надо добавить 24 dp пространства
    здесь и сменить шрифт на 16 sp.
  • 4:11 - 4:13
    Сначала я изменю размер шрифта.
  • 4:13 - 4:18
    Я напишу android:textSize
    и установлю 16sp.
  • 4:18 - 4:22
    В предпросмотре я проверю
    действительно ли увеличился шрифт,
  • 4:22 - 4:24
    да, увеличился.
  • 4:24 - 4:27
    Если вы не уверены, что обновление
    прошло - нажмите эту кнопку.
  • 4:27 - 4:27
    Oк.
  • 4:27 - 4:30
    Чтобы отрегулировать отступы,
  • 4:30 - 4:32
    пришлось много перепробовать.
  • 4:32 - 4:34
    Я пыталась установить
    размеры отступов, а потом
  • 4:34 - 4:38
    выставить заполнения,
    и оказалось, что paddingLeft
  • 4:38 - 4:43
    управляет зазором между квадратиком
    и текстом вот здесь.
  • 4:43 - 4:43
    Добавлю заполнение.
  • 4:45 - 4:47
    Отлично - идем дальше.
  • 4:47 - 4:49
    Я виже еще одну проблему.
  • 4:49 - 4:53
    Здесь достаточно места по
    вертикали, а здесь нет.
  • 4:53 - 4:58
    Мне надо добавить заполнение внизу,
    или нижний отступ к этому CheckBox,
  • 4:58 - 5:02
    или верхнее заполнение или верхний
    отступ к заголовку Quantity.
  • 5:02 - 5:03
    Любое сработает,
  • 5:03 - 5:07
    я добавлю верхний отступ
    к этому заголовку Quantity.
  • 5:07 - 5:09
    Вот, намного лучше!
  • 5:09 - 5:11
    Все элементы расставлены
    более аккуратно.
  • 5:11 - 5:13
    Я запущу приложение
    на своем устройстве.
  • 5:14 - 5:15
    Вот оно.
  • 5:15 - 5:16
    Выглядит очень хорошо.
  • 5:16 - 5:17
    Отличная работа.
  • 5:17 - 5:21
    Когда вам надо изменить UI в вашем
    приложении можно следовать этому
  • 5:21 - 5:25
    шаблону по поиску в Google информации
    и использования ее в приложении.
Title:
13-02 Adding a CheckBox - Solution
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
05:27

Russian subtitles

Revisions Compare revisions