YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Russian subtitles

← 13-02 Adding a CheckBox - Solution

Get Embed Code
13 Languages

Showing Revision 3 created 12/16/2015 by Fran Ontanaya.

  1. Чтобы сделать такую раскладку,
    подумайте как все должно выглядеть.
  2. Я буду считать что все это
    уже сделано и мы лишь
  3. обсудим новые элементы
    которые надо добавить в раскладку.
  4. Два новых элемента которые надо
    добавить это TextView для Toppings и
  5. CheckBox для Whipped cream.
  6. Вы наверное не знаете что
    такая панель есть в Android, но
  7. надеюсь, что поиск в Google
    поможет вам найти ответ.
  8. Во втором шаге нам надо
    расставить панели.
  9. Считая что эти панели уже
    верно расположены,
  10. нам надо добавить Toppings Whipped
    cream, вертикально в той же строке.
  11. Поскольку главная раскладка
  12. вертикальная и линейная, мы
    добавим эти панели наверху.
  13. В третьем шаге нам надо
    сконструировать панели.
  14. Стиль заголовка Toppings
    такой же как у заголовков Quantity и
  15. Order Summary - поэтому мы можем
    просто скопировать
  16. и вставить существующие заголовки.
  17. Панель CheckBox нам придется
    конструировать отдельно.
  18. Надо установить 24 dp отступа
    между флажком и текстом,
  19. и надо изменить размер шрифта
    Whipped cream на 16 sp.
  20. Давайте сделаем это все
    в приложении сейчас.
  21. Чтобы добавить заголовок Toppings,
    такой же как Quantity, я могу
  22. скопировать этот код.
  23. Я копирую и добавляю его вверху
    вот этой раскладки LinearLayout.
  24. Итак, теперь Quantity здесь
    указано дважды.
  25. Я изменю текст на Toppings.
  26. Я также скопирую
    нижний отступ так, чтобы
  27. было место между заголовком
    и содержимым ниже.
  28. Мы не добавляли CheckBox
    в наше приложение раньше, и
  29. я поищу в Google как это делать.
  30. В поиске я ввожу "checkbox android".
  31. Не забудьте указать android
    потому что тут могут быть флажки для
  32. других платформ, например
    интернет или мобильных платформ,
  33. это поможет вам найти
    результат именно для Android.
  34. Попробуем первую ссылку.
  35. Это справочник для класса CheckBox.
  36. Я пролистываю, это неплохое
    описание класса и
  37. вот оно переходит к аттрибутам XML.
  38. Что мне надо - это
    некоторые примеры XML для CheckBox.
  39. Вернемся к результатам поиска.
  40. Пройдем по второй ссылке.
  41. Здорово, здесь есть картинки флажков.
  42. А вот и XML.
  43. Выглядит очень неплохо.
  44. Здесь есть два CheckBoxes
    для LinearLayout.
  45. Я просто скопирую превый CheckBox, и
  46. вставлю в наше приложение.
  47. В приложении я вставлю его сразу
    после текста Toppings, но
  48. перед текстом Quantity, вот здесь.
  49. Я изменю XML потому что он не очень
    подходит для нашего случая.
  50. Я уберу id и текст вот здесь.
  51. Вместо мяса, поскольку наша
    кофейня не торгует мясом,
  52. я напишу - Whipped cream.
  53. Кстати, то что вы видели
    раньше, @string/meat,
  54. это было обращение к ресурсной
    строке в файле strings.xml.
  55. Мы поговорим об этом позже, а сейчас
  56. вы можете прописать строку
    сразу вот здесь.
  57. И видите - предпросмотр изменился
    и у нас есть флажок Whipped cream.
  58. Что здорово у Checkbox - это то, что
    так вы получаете квадратик,
  59. вместе с текстом и вам не надо
    добавлять еще текст здесь.
  60. Вам также не нужна вот эта строка,
    которая описывает onClick.
  61. О чем надо помнить в этом задании -
    это заставить флажок появиться тут.
  62. Мы могли найти этот XML
    заглянув в знакомые
  63. таблицы подсказок по Аndroid.
  64. В этой памятке перечислено множество
    известных раскладок Аndroid,
  65. также с примерами XML.
  66. Вот раскладка CheckBox,
    а вот пример как она выглядит и
  67. и соответствующий XML.
  68. Вы могли бы скопировать XML
    отсюда и вставить в приложение.
  69. Запустим приложение в Android
    Studio и посмотрим что получилось.
  70. Вот так.
  71. Очень неплохо.
  72. У нас есть заголовок Toppings
    и флажок Whipped cream.
  73. А еще вот такая анимация
    при нажатии на флажок.
  74. Единственная проблема, что я вижу -
    это плохой отступ.
  75. Например, вот здесь слишком тесно
    между заголовком Quantity и
  76. флажком Whipped cream
    и мало места вот здесь.
  77. Вернемся к нашим красным линиям,
  78. нам надо добавить 24 dp пространства
    здесь и сменить шрифт на 16 sp.
  79. Сначала я изменю размер шрифта.
  80. Я напишу android:textSize
    и установлю 16sp.
  81. В предпросмотре я проверю
    действительно ли увеличился шрифт,
  82. да, увеличился.
  83. Если вы не уверены, что обновление
    прошло - нажмите эту кнопку.
  84. Oк.
  85. Чтобы отрегулировать отступы,
  86. пришлось много перепробовать.
  87. Я пыталась установить
    размеры отступов, а потом
  88. выставить заполнения,
    и оказалось, что paddingLeft
  89. управляет зазором между квадратиком
    и текстом вот здесь.
  90. Добавлю заполнение.
  91. Отлично - идем дальше.
  92. Я виже еще одну проблему.
  93. Здесь достаточно места по
    вертикали, а здесь нет.
  94. Мне надо добавить заполнение внизу,
    или нижний отступ к этому CheckBox,
  95. или верхнее заполнение или верхний
    отступ к заголовку Quantity.
  96. Любое сработает,
  97. я добавлю верхний отступ
    к этому заголовку Quantity.
  98. Вот, намного лучше!
  99. Все элементы расставлены
    более аккуратно.
  100. Я запущу приложение
    на своем устройстве.
  101. Вот оно.
  102. Выглядит очень хорошо.
  103. Отличная работа.
  104. Когда вам надо изменить UI в вашем
    приложении можно следовать этому
  105. шаблону по поиску в Google информации
    и использования ее в приложении.