Return to Video

07-42 Add the Reset Button

  • 0:00 - 0:04
    Итак, вот картинка нашего приложения
    Сourt Сounter или,
  • 0:04 - 0:06
    по крайней мере, как мы хотим,
    чтобы оно выглядело.
  • 0:06 - 0:10
    Я последую своему же совету
    и начну с XML.
  • 0:10 - 0:13
    Давайте сейчас обдумаем ситуацию
    с раскладками.
  • 0:13 - 0:18
    Вот они, наши раскладки, и они
  • 0:18 - 0:19
    вертикальные и линейные.
  • 0:19 - 0:23
    Есть линейная раскладка для Команды
    А и линейная раскладка для Команды Б.
  • 0:23 - 0:27
    Но у нас не может быть две корневых
    раскладки, поэтому в дальнейшем
  • 0:27 - 0:31
    мы их упаковываем в горизонтальную
    линейную раскладку,
  • 0:31 - 0:35
    чтобы эти две дочерние раскладки
    могли находиьтся рядом друг с другом.
  • 0:35 - 0:38
    А теперь мы хотим добавить кнопку
    Reset внизу.
  • 0:38 - 0:41
    Чтобы ваши могзи не взорвались
    при мыслях о всех этих
  • 0:41 - 0:45
    разных раскладках, я хочу, чтобы вы
    думали о всем, что внутри
  • 0:45 - 0:48
    этой горизонтальной раскладки,
    как об одной раскладке.
  • 0:48 - 0:53
    Сейчас вы просто пытаетесь разложить
    эту горизонтальную линейную раскладку
  • 0:53 - 0:54
    и эту кнопку Reset.
  • 0:54 - 0:57
    Вы пытаетесь разложить две раскладки.
  • 0:57 - 1:02
    Одна вверху и другая внизу экрана.
  • 1:02 - 1:06
    Вопрос такой: какая из групп
    позволит вам получить
  • 1:06 - 1:09
    раскладку вверху и раскладку
    внизу экрана?
  • 1:09 - 1:13
    Оказывается, что хорошим кандидатом
    является относительная раскладка.
  • 1:13 - 1:17
    Я могу разместить горизонтальную
    раскладку тут, сопоставить с прямым
  • 1:17 - 1:20
    предком ширину и свернуть
    контент по высоте.
  • 1:21 - 1:24
    Кнопку Reset я могу разместить
    прямо тут, внизу, центрировав ее
  • 1:24 - 1:26
    по отношению к этим двум.
  • 1:26 - 1:29
    Итак, у нас есть
    относительная раскладка и
  • 1:29 - 1:33
    у нее есть дочерние записи: кнопка
    и линейная раскладка.
  • 1:33 - 1:36
    Дочерняя Кнопка это наша
    кнопка Reset, а
  • 1:36 - 1:40
    Линейная раскладка - вот эта линейная
    раскладка, горизонтальная.
  • 1:40 - 1:44
    Далее. У этой горионтальной раскладки
    есть две дочерние записи
  • 1:44 - 1:47
    и они тоже являются
    линейными раскладками.
  • 1:47 - 1:50
    Это линейная раскладка для Команды А
    и линейная раскладка
  • 1:50 - 1:52
    для Команды Б, как вы видите.
  • 1:52 - 1:57
    В линейной раскладке Команды А есть
    две текстовые раскладки и три кнопки.
  • 1:57 - 2:00
    То же верно и для линейной
    раскладки для Команды Б.
  • 2:00 - 2:03
    Пять дочек, две текстовых
    раскладки и три кнопки.
  • 2:03 - 2:05
    Вот эту часть раскладки
    вы уже сделали,
  • 2:05 - 2:09
    надо просто добавить эту.
    Итак, поехали.
  • 2:09 - 2:13
    Я в коде XML и первое, что я сделаю -
  • 2:13 - 2:18
    создам корневую относительную
    раскладку что вы видели на диаграмме.
  • 2:18 - 2:24
    Я ввожу RelativeLayout, и просто хочу
    вырезать и вставить
  • 2:24 - 2:28
    эти две строки, потому что им нужно
    находиться в корневой раскладке.
  • 2:28 - 2:34
    Вырезаю и вставляю их сюда,
    в корневую раскладку.
  • 2:34 - 2:37
    Теперь я закрываю RelativeLayout и
  • 2:37 - 2:44
    передвигаю этот закрывающий тэг
    в самый низ.
  • 2:46 - 2:49
    Итак, то, что у меня теперь есть -
    эта часть диаграммы.
  • 2:49 - 2:53
    Похоже, ошибки у меня тоже есть.
  • 2:53 - 2:57
    Ах да, я не задала высоту и ширину,
    давайте это сделаем сейчас.
  • 2:59 - 3:02
    В относительной раскладке кнопка была
    в самом низу и по центру экрана.
  • 3:02 - 3:05
    Чтобы это сделать, она наверное,
    заполнит весь экран.
  • 3:05 - 3:07
    Так что я сопоставлю с предком оба
  • 3:09 - 3:12
    параметра. Теперь добавим кнопку.
  • 3:12 - 3:18
    Спускаюсь вниз, туда, где закрывается
    LinearLayout,
  • 3:18 - 3:23
    но я все еще внутри RelativeLayout,
    и добавляю кнпку.
  • 3:23 - 3:27
    И я сверну контент wrap_content
    для этой кнопки,
  • 3:27 - 3:30
    потому что эта кнопка не должна
    расширяться и заполнить собой
  • 3:30 - 3:33
    низ экрана или заполнить весь экран.
  • 3:34 - 3:37
    Прямой предок этой кнпки -
    RelativeLayout, и
  • 3:37 - 3:40
    мы изменим текст этой
    кнопки на Reset.
  • 3:40 - 3:43
    Теперь посмотрим, как оно выглядит.
  • 3:43 - 3:47
    Так, кнопка Reset вверху,
    а не там, где я хотела,
  • 3:47 - 3:52
    а ее предок - относительная раскладка
    которая заполняет весь экран.
  • 3:52 - 3:54
    Так что я могу привести ее в
    соответствие с предком.
  • 3:54 - 3:57
    Я хочу выровнять ее по низу предка и
  • 3:57 - 4:01
    хочу, чтобы она была в центре предка,
    по крайней мере горизонтально.
  • 4:01 - 4:04
    Круто, моя кнопочка
    в правильном месте.
  • 4:04 - 4:06
    Сейчас я выберу все,
  • 4:06 - 4:10
    применю команду L на Макинтоше.
  • 4:10 - 4:14
    В Windows то же сделает Control-Alt-L
    чтобы переформатировать код
  • 4:14 - 4:16
    и чтобы он выглядел хорошо.
  • 4:16 - 4:19
    Вернемся к Java коду.
  • 4:19 - 4:23
    Кнопка у меня есть, но
    она ничего не делает.
  • 4:23 - 4:26
    Давайте создадим для нее метод.
  • 4:26 - 4:32
    Я это сделаю над методом display.
    Итак public void.
  • 4:32 - 4:35
    Я назову этот метод resetScore,
  • 4:35 - 4:38
    потому что именно это он и делает -
    обнуляет счет.
  • 4:38 - 4:43
    Поднимаюсь вверх, чтобы сопоставить
    его с другими методам
  • 4:43 - 4:47
    с помощью View v,
    затем фигурные скобки.
  • 4:47 - 4:50
    Пока что я не буду заморачиваться,
    чем его наполнить.
  • 4:50 - 4:53
    Я вернусь к XML коду и сделаю
  • 4:53 - 4:57
    вторую часть привязывания кнопки
    к Java коду,
  • 4:57 - 5:02
    добавив атрибут onClick для
    resetScore.
  • 5:02 - 5:06
    Теперь, когда я нажму эту кнопку,
    код заработает, но
  • 5:06 - 5:08
    здесь нет никакого кода.
    Давайте подумаем
  • 5:08 - 5:09
    над тем, что надо добавить.
  • 5:11 - 5:14
    Что ж, вернемся к обсуждению
    псевдокода.
  • 5:14 - 5:17
    Когда я жму кнопку Reset,
    каких действий я жду?
  • 5:17 - 5:21
    Я хочу, чтобы обе эти
    строки показывали 0.
  • 5:21 - 5:24
    Более того, я хочу, чтобы переменные
    для счета Команды А
  • 5:24 - 5:27
    и счета Команды Б вернулись к нулю.
  • 5:27 - 5:30
    Помните, что когда я нажимаю на любую
    из этих кнопок, я добавляю очки
  • 5:30 - 5:32
    и затем высвечиваю переменную.
  • 5:32 - 5:34
    И если я не верну переменную
    назад к нулю,
  • 5:34 - 5:36
    она будет показывать
    некорректную цифру.
  • 5:36 - 5:39
    И тут я подумала о псевдокоде.
  • 5:39 - 5:43
    Первое, что я хочу сделать -
    установить счет для Команды А на 0.
  • 5:43 - 5:46
    То же я хочу сделать и для Команды Б.
  • 5:46 - 5:50
    Теперь оба счета по нулям, но ничего
    не отображалось, и поэтому
  • 5:50 - 5:55
    в Шаге 3 делаю DisplayscoreForTeamA,
    который установлен на нуль.
  • 5:56 - 6:00
    А если уточнить, я отображу счет
    для Команды А вот здесь
  • 6:00 - 6:04
    а потом отображу счет для
    Команды Б вот здесь.
  • 6:04 - 6:08
    Так как в Шаге 1 и 2 я установила
    счета на ноль,
  • 6:08 - 6:10
    они будут отображать ноль тут и тут.
  • 6:10 - 6:14
    Потом, когда я буду нажму на любую из
    этих нокопок, чтобы обновить счет
  • 6:14 - 6:18
    Команды А или для Команды Б, он будет
    обновляться, но начинаться будет с 0.
  • 6:20 - 6:24
    Итак, в сбросе счета я пропишу мой
    псевдокод как код, код.
  • 6:24 - 6:29
    Первое что сделаю - возьму scoreTeamА
    и установлю его значение на
  • 6:29 - 6:34
    ноль с помощью оператора
    присваивания и значения ноль.
  • 6:34 - 6:36
    И, конечно, не забудьте
    точку с запятой.
  • 6:37 - 6:39
    То же самое делаю со счетом Б.
  • 6:42 - 6:49
    Потом я отображу в части Команды А
    scoreForTeamA.
  • 6:49 - 6:53
    А потом я отображу в части Команды Б
    scoreForTeamВ.
  • 6:55 - 6:57
    И еще я добавлю комментарий.
  • 6:59 - 7:00
    Выглядит разумно.
  • 7:00 - 7:04
    И я уже давно не запускала
    приложение на телефоне, так что
  • 7:04 - 7:07
    я нажму кнопку Запустить.
    Вот так, здорово.
  • 7:07 - 7:08
    У меня есть кнопка Reset.
  • 7:08 - 7:09
    Посмотрим на ее работу.
  • 7:13 - 7:15
    Хорошо, она обнуляет счет.
  • 7:15 - 7:16
    Давайте еще понажимаем,
  • 7:16 - 7:19
    просто чтобы убедиться,
    что все пока что работает.
  • 7:24 - 7:28
    Ага, похоже, что работает. Супер!
  • 7:28 - 7:30
    Что ж, это задание было трудноватым.
  • 7:30 - 7:34
    Я покажу вам, что происходит, если бы
    вы поменяли порядок,
  • 7:34 - 7:35
    сделали что-то по-другому.
  • 7:36 - 7:39
    Что если я поменяю их местами?
  • 7:39 - 7:41
    Посмотрим, что произойдет.
  • 7:42 - 7:46
    Вот телефон, смотрим, что происходит.
  • 7:46 - 7:48
    Сначала я добавлю очков.
  • 7:49 - 7:53
    А тепер момент истины. Кнопка Reset.
  • 7:53 - 7:56
    Ха, кажется, ничего она не делает.
  • 7:56 - 7:59
    Давайте еще понажимаем.
    Ха, интересно.
  • 7:59 - 8:01
    Тут трудновато увидеть, но
  • 8:01 - 8:05
    до этого показывало 19 очей, я нажала
    кнопку Reset и ничего не случилось.
  • 8:05 - 8:08
    А потом я нажала Штрафной бросок
    и высветилась единица.
  • 8:10 - 8:12
    Попробуем по-другому, что если
    я нажму плюс два очка.
  • 8:12 - 8:14
    О, показывает два.
  • 8:14 - 8:18
    Давайте снова посмотрим на код,
    узнаем, что дает такой эффект.
  • 8:18 - 8:21
    Я поменяла местами отображение
    и установку счета.
  • 8:21 - 8:25
    Чтобы посмотреть, какое ошибочное
    поведение из этого выйдет.
  • 8:25 - 8:30
    Допустим, Команда А заработала
    30 очков, а Команда Б 40.
  • 8:30 - 8:33
    Когда я ввожу displayForTeamA, мне
    покажет 30, а
  • 8:33 - 8:37
    когда я ввожу displayForTeamB,
    покажет 40.
  • 8:37 - 8:41
    Только после этого код установил
    эти значения на ноль.
  • 8:41 - 8:46
    Но т.к. оно отображается раньше, код
    не покажет нулевого значения.
  • 8:46 - 8:48
    Но значение будет равняться нулю.
  • 8:48 - 8:53
    Если я нажму addThreeForTeamB,
    код возьмет значение 0,
  • 8:53 - 9:00
    которое я тут установила, и
    тройку, то отобразится три.
  • 9:00 - 9:06
    Так у нас получится, что Команда Б
    заработала 30 очков, а потом,
  • 9:06 - 9:12
    после нажатия кнопки Reset появляется
    три, и это странный скачок.
  • 9:12 - 9:15
    Единственно как я могу исправить это,
    кроме как поменять местами как было
  • 9:15 - 9:19
    это поставить отобразить ноль
    вот здесь.
  • 9:19 - 9:22
    Вы сами можете попробовать это,
    но оно должно сработать.
  • 9:22 - 9:24
    Оно просто нелогично.
  • 9:25 - 9:29
    Я люблю показывать подобные примеры,
    они демонстируют красоту и
  • 9:29 - 9:31
    субъективность кода.
  • 9:31 - 9:34
    В этом случае я практичеси убеждена,
    что первый способ,
  • 9:34 - 9:36
    в котором я выполнила код, был лучше.
  • 9:36 - 9:39
    Но мы, может, научитесь видеть
    сценарии, когда может быть два разных
  • 9:39 - 9:43
    способа написать код, и оба будут
    технически корректными.
  • 9:43 - 9:45
    Поскольку не всегда есть один
    верный ответ,
  • 9:45 - 9:49
    не нужно быть стесненным рамками и
    следовать в точности одному способу.
  • 9:49 - 9:53
    Попробуйте написать код для чего-то,
    который работает по-вашему посмотрите
  • 9:53 - 9:58
    на работу других людей и сравните чей
    способ эффективнее, чей код яснее.
  • 9:58 - 10:01
    Такие дискуссии очень полезны для
    приобретения и развития опыта.
  • 10:01 - 10:04
    Ладно, но я теперь верну код в его
    исходное состояние, при котором
  • 10:04 - 10:05
    все работало. Теперь у меня
  • 10:05 - 10:10
    рабочее приложение, но оно неприв-
    лекательно выглядит. Мы это исправим.
Cím:
07-42 Add the Reset Button
Leírás:

more » « less
Video Language:
English
Team:
Udacity
Projekt:
UD837 - Android for Beginners
Duration:
10:11

Russian subtitles

Felülvizsgálatok Compare revisions