YouTube

Got a YouTube account?

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

Russian subtitles

← 07-37 Add the Other Team in XML

Get Embed Code
13 Languages

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

  1. Прежде чем начать с кодами, я отвечу
    на этот вопрос.
  2. Я пока что знаю только о двух группах
    элементов, LinearLayouts и
  3. RelativeLayouts.
  4. Ключевым тут было то, что эти группы
    должны занимать равное пространство.
  5. Это легко сделать,
    использовуя вес панели.
  6. ну что ж, давайте посмотрим на код.
  7. Я больше не буду работать в Java,
    поэтому я перейду
  8. к файлу activity_main.xml.
  9. А вот мой XML файл.
  10. Начну с того, что внесу весь этот
    код в другой LinearLayout.
  11. Это родительский элемент LinearLayout
    для двух моих мини LinearLayouts.
  12. Я передвину эти две строки сюда
    вверх, потому что они
  13. должны быть присоединены к корневому
    элементу, добавим закрывающую скобку.
  14. Android Studio автоматически сделало
    для меня закрывающий тэг вот здесь.
  15. Так что я сейчас
  16. вырежу этот закрывающий тэг,
    прокручу вниз и вставлю его.
  17. Так появилась красная волнистая линия
    и если я посмотрю на ошибку, я увижу,
  18. что мне предлагают определить высоту
    layout_height и ширину layout_width.
  19. Ой! Что ж, давайте так и сделаем.
  20. Это корневой элемент, я пропишу
    соответствие match_parent.
  21. Хорошо. Итак.
  22. У меня есть один LinearLayout, окру-
    жающий дочернюю запись LinearLayout.
  23. И если зайти в предпросмотр,
    выглядит почти так же.
  24. Ладно, я сделаю вот что: я
    скопирую все в
  25. LinearLayout команды А, и сразу же
    под командой А это вставлю.
  26. Это будет LinearLayout для команды Б.
  27. Вот теперь записи выглядят
    немного неорганизованно.
  28. Поэтому я сделаю Cmd+A, или
    выбрать все, а потом
  29. воспользуюсь сочетанием клавиш
    Cmd+Option+L для переформатирования.
  30. В среде Windows, то же действие на
    Ctrl+Alt+L. Так выглядит лучше.
  31. Теперь я хочу убедиться в том, что вы
    понимаете, что тут происходит.
  32. Проматываю вверх, тут у меня
    корневой LinearLayout.
  33. Он начинается тут, и если я промотаю
    вниз, до конца, заканчивается он тут.
  34. Внутри этого корневого LinearLayout,
    я снова промотаю вверх.
  35. Здесь у меня дочерняя раскладка,
    которая начинается тут.
  36. Я медленно пролистаю вниз.
  37. Она заканчивается здесь.
  38. Это для команды A.
  39. И есть еще один дочерний LinearLayout
    который начинается здесь.
  40. Медленно проилистываем вниз,
    заканчивается тут для команды Б.
  41. Хорошо. Там, вверху я заметила что-то
    красное, так что
  42. я снова возвращаюсь вверх и смотрю,
    в чем ошибка. Неправильная
  43. ориентация, ориентация не указана,
    а по умолчанию она горизонтальная.
  44. Однако в этой раскладке
    есть пара дочерних записей,
  45. где, по крайней мере, в одной
    есть ширина match_parent.
  46. Гмм, я и правда хочу, чтобы она была
    горизонтальной, но давайте
  47. все же уточним ориентацию.
  48. Технически это не нужно, потому что
    горизонтально по умолчанию,
  49. но лучше все же уточнить.
  50. Тут еще говорится, что дочерние
    записи накрывают друг друга.
  51. Нажимаю на Предпросмотр.
  52. Гм, вроде бы не сильно изменилось,
    хотя я постаралась
  53. скопировать и вставить все с одного
    в другой LinearLayout.
  54. Наверное это связано с только что
    увиденной ошибкой.
  55. Там было написано, что раскладка
    горизонтальна.
  56. Так что оно пытается уложить эти два
    LinearLayouts рядом друг с другом, но
  57. тот LinearLayout, у которого ширина
    layout_width соответствует
  58. match_parent, заполняет весь экран.
  59. Так что мой первый LinearLayout
    заполняет экран, а
  60. потом второй размещается рядом с ним
    где-то за экраном.
  61. Давайте решим, что мы хотим
    сделать в данный момент.
  62. Мы хотим, чтобы две раскладки
    занимали равное пространство рядом.
  63. И вот тут нам понадобится ввести
    вес layout_weight.
  64. Я беру первый LinearLayout и
  65. присваиваю ему layout_weight,
    равную 1.
  66. И еще я присвою ему ширину 0.
  67. Ну вот, теперь видно, что у нас
    вообще-то два LinearLayout,
  68. они просто не отображались
    как следует.
  69. Вот так уже лучше.
  70. Теперь надо присвоить layout_weight
    второму LinearLayout,
  71. вот тут.
  72. Так что я пролистаю вниз.
  73. А вот и мой второй LinearLayout.
  74. И проделаю ту же самую операцию.
  75. Я ему присвою layout_weight
    тоже равный 1, так что
  76. теперь у них одинаковый
    вес layout_weight.
  77. И еще раз присвою ширину 0.
  78. А причина того, что я присвоила
    им обоим ширину 0 в том,
  79. что если обе этих стороны не занимают
    никакой ширины,
  80. тогда они занимают все
    лишнее пространство,
  81. чем является весь экран, и делят его
    на две части: половина одному
  82. и половина другому, потому что у них
    равный вес раскладки.
  83. Если это немного запутанно, я дала
    ссылки на несколько видео
  84. с обучающими заметками
    по layout_weight.
  85. Итак, выглядит вполне неплохо, кроме
    того, что пишет там и там Команда А.
  86. Я поднимусь вверх и изменю подпись,
    напишу Команда Б.
  87. Вы могли заметить, что тут тоже есть
    ошибка, а
  88. происходит она из-за того,
    что у нас дубликаты ID.
  89. Вы помните, что я просто
    скопировала и вставила код.
  90. Грубо говоря, у нас тут два объекта,
    у которых одинаковый ID
  91. счета команды team_a_score.
  92. Поэтому я поменяю это сейчас на
    team_b_score.
  93. Теперь смотрится хорошо.
  94. Трудновато увидеть.
  95. Я увеличу.
  96. Но тут написано Команда Б.
  97. У меня все правильные кнопки и
    правильные элементы текста.
  98. Так что попробую посмотреть на это
  99. на своем телефоне.
    Выглядит хорошо.
  100. Если нажимать кнопки Команды А,
    счет обновляется. Чудесно.
  101. Если нажимать кнопки Команды Б...
    ну, счет тоже обновляется.
  102. Это нечто.
  103. Но помните, мы просто хотели
    настроить правильно XML.
  104. Нам сейчас неважно, что с Java.
  105. Но раз уж XML работает,
    почему бы не исправить Java?