Russian subtitles

← 05-07 Build Layout - Solution

Get Embed Code
13 Languages

Showing Revision 1 created 10/18/2015 by sp16.

  1. Чтобы создать данный макет,
    открываем файл activity_main.xml.
  2. Я знаю, что нам нужен вертикальный
    линейный дизайн макета, где каждый элемент
  3. будет выстроен в вертикальный столбец.
  4. Для начала необходимо поменять
    относительную структуру на линейную.
  5. Сразу же мы получаем ошибку, сообщающую
    что открывающий тег не соответствует
  6. закрывающему тегу, поэтому я просто
    скопирую это и вставлю сюда.
  7. Теперь теги совпадают.
  8. Далее, я могу добавить элементы.
  9. Во-первых, у нас есть поле количества.
  10. Возьмем этот текстовый элемент и
    изменим надпись на Quantity [Количество].
  11. Далее, у нас есть поле с надписью 0.
  12. Тогда я скопирую первое поле и
    вставлю его ниже.
  13. Я изменю его, чтобы надпись была 0,
    как показано на снимке экрана.
  14. Последний дочерний элемент этого
    линейного макета это кнопка.
  15. Мы еще не добавляли кнопки ранее на наш
    макет, поэтому давайте поищем в Google.
  16. Открыв браузер, вы можете
    начать поиск по словам «кнопка Android».
  17. Первая ссылка выглядит интересно,
    это сайт developer.android.com.
  18. И здесь есть документация по кнопкам, мы
    можем просто пропустить большинство текста
  19. Прокрутим вниз, чтобы перейти к
    обзору класса.
  20. Здесь рассказывает о коде Java, который
    мы еще не изучали, но
  21. здесь также есть XML-код для кнопки.
  22. Мы скопируем это и проверим,
    как это будет работать в нашем коде.
  23. На нашем макете я добавлю
    кнопку ниже этих двух текстовых полей.
  24. Я вставлю код
    из документации сюда.
  25. И теперь вместо строки selfdestruct
    [самоуничтожение] я вставлю что-нибудь
  26. более дружественное,
    вроде «Заказать».
  27. Последние строки мы также можем
    удалить, поскольку они нам не нужны.
  28. Здорово, теперь у нас есть текстовое поле
    количество, поле с нулем и
  29. кнопка выполнения заказа.
  30. Теперь запустим это в приложении,
    чтобы проверить, как это выглядит,
  31. нажав зеленую кнопку запуска.
  32. Мы видим, что приложение
    все еще генерируется.
  33. Ой, это не то, что мы хотели.
  34. Оказалось, что наш линейный макет на самом
    деле горизонтальный, а не вертикальный.
  35. Поэтому необходимо добавить
    атрибут ориентации.
  36. Изменим это на
    android;orientation="vertical".
  37. Это должно помочь решить проблему.
  38. Нажмем запуск еще раз.
  39. Отлично, так то лучше.
  40. Три дочерних элемента показаны
    в вертикальном виде.
  41. Теперь необходимо
    настроить стили этих полей таким образом,
  42. чтобы они выглядели похоже на те
    на снимке экрана, который нам дали.
  43. На изображении мы видим, что поле
    количества написано заглавными буквами.
  44. На первом уроке мы изучили
    атрибут android:textAllCaps,
  45. и он появился здесь
    в автозавершении кода.
  46. Если он появляется таким образом,
    можно просто нажать Enter и
  47. он будет автоматически
    добавлен в ваш код.
  48. Мы устанавливаем это значение в True,
    чтобы текст отображался заглавными буквами
  49. Причина, по которой лучше использовать
    этот атрибут для изменения текста,
  50. в том, что если когда-либо мы захотим
    изменить интерфейс, поменяв буквы на
  51. маленькие, как здесь, все что нам нужно —
    просто удалить этот атрибут
  52. вместе замены всего текста.
  53. Далее, для теста, где написан ноль,
    необходимо установить размер в 16sp.
  54. Добавим это и атрибут появляется в
    списке автозавершения, поэтому
  55. я просто нажму Enter и
    выберу 16sp в качестве значения.
  56. Также необходимо поменять цвет
    текста на черный.
  57. Используем системный цвет
    Android в качестве
  58. черного, что выглядит вот так.
  59. Здорово, это изменит оба текстовых поля —
    количества и нуля.
  60. Кнопка заказа уже в порядке, система
    автоматически изменит формат текста для
  61. вас, а высота и ширина
    изменяться под содержимое.
  62. Нам необходимо разобраться с
    этим вертикальным пространством.
  63. Необходимо установить интервалы или
    отступ в 16dp между надписью «Quantity»
  64. нулем.
  65. Также интервал в 16dp необходим
    между надписью 0 и
  66. кнопкой заказа.
  67. Вы можете добиться этого
    множеством способов,
  68. а я сделаю это путем добавления верхнего
    отступа для этой кнопки.
  69. Также я добавлю нижний отступ
    для текстового поля количества.
  70. Вы можете спокойно сделать это иным
    способом, если результат будет такой же.
  71. Причина, по которой я решила сделать это
    путем нижнего и верхнего отступов, в том,
  72. потому что я знаю, что данная область
    в середине будет изменяться далее.
  73. Мы изменим это, чтобы
    можно было выбирать количество кнопками
  74. плюс и минус, и я также хочу оставить
    отступ в 16dp между надписью
  75. количество и селектором.
  76. То же самое для кнопки.
  77. Хорошо, давайте запустим это
    еще раз на нашем устройстве.
  78. Отлично! Выглядит как мы хотели.
  79. Количество теперь заглавными буквами,
    текстовое поле с нулем написано
  80. черным шрифтом, размера 16sp, и далее
    у нас кнопка заказа.
  81. Также, между элементами
    установлен интервал в 16dp.
  82. Прекрасно!
    Ой, я почти забыла.
  83. В задании спрашивается, что произойдет
    когда вы нажмете на кнопку?
  84. Вообще-то, ничего не произойдет,
    по крайней мере пока.
  85. Смотрите далее, чтобы
    узнать больше.