Return to Video

07-42 Add the Reset Button

  • 0:00 - 0:04
    좋습니다. 이곳에 우리의 [court
    counter] 앱에 대한 그림 혹은 이것이
  • 0:04 - 0:06
    보여주고자 하는 내용이 있습니다.
  • 0:06 - 0:10
    저만의 방식을 따라 XML로 우선
    시작해 보도록 하겠습니다.
  • 0:10 - 0:13
    지금의 뷰 상황에 관해 생각해 보도록
    합시다.
  • 0:13 - 0:18
    자 이제 저희는 모든 뷰를 가지고 있고
    이들 뷰들은 수평 그리고 [linear
  • 0:18 - 0:19
    layout]입니다.
  • 0:19 - 0:23
    B팀에 대한 [linear layout]과 A팀에
    대한 [linear layout]이 있습니다.
  • 0:23 - 0:27
    그리고 두 개의 [root view]를
    가질 수 없으며 더구나, 이것들은
  • 0:27 - 0:31
    수평 방향의 [linear layout]에 포함되어
    있습니다. 따라서 이 두
  • 0:31 - 0:35
    [child linear layout]들은
    서로 연결되어 있습니다.
  • 0:35 - 0:38
    자 이제 아래 부분에 리셋 버튼을
    추가하고자 합니다.
  • 0:38 - 0:41
    이 각기 다른 모든 [layout]들에 대해
    혼동하지 않도록 하기 위해,
  • 0:41 - 0:45
    모든 것이 이 하나의 뷰처럼
    수평 [linear layout]에
  • 0:45 - 0:48
    포함되어 있다고
    생각하도록 하십시오.
  • 0:48 - 0:53
    그리고 이제 수평 [linear layout]과
    리셋 버튼을 이곳에 배치하도록
  • 0:53 - 0:54
    하십시오.
  • 0:54 - 0:57
    두 개의 뷰를 배치하려고 합니다.
  • 0:57 - 1:02
    하나는 화면의 위쪽에 다른 하나는
    아래쪽에 배치하고자 합니다.
  • 1:02 - 1:06
    자 이제 문제는 어떠한 뷰 그룹이
    위쪽에 배치되고 어떠한
  • 1:06 - 1:09
    것이 아래쪽에 배치되는지에
    관한 것입니다.
  • 1:09 - 1:13
    그리고 관련 [layout]들이 이에
    적합하다는 것을 판단하게 됩니다.
  • 1:13 - 1:17
    [parent]를 너비에 일치시키고
    높이의 내용들을 포함하는
  • 1:17 - 1:20
    수평 [linear layout]이
    이곳에 있습니다.
  • 1:21 - 1:24
    그리고 이곳에
    중심과 하부에 균형이 맞게
  • 1:24 - 1:26
    리셋 버튼을 배치할 수 있습니다.
  • 1:26 - 1:29
    이제 [Relative Layout]을 만들었습니다.
  • 1:29 - 1:33
    그리고 이 [Relative Layout]은 [Button child]와
    [Linear Layout child]를 가지고 있습니다.
  • 1:33 - 1:36
    [Button child]는
    이 리셋 버튼이고
  • 1:36 - 1:40
    [linear layout]은 이곳의 수평 [linear
    layout]입니다.
  • 1:40 - 1:44
    더구나, 이 수평 [linear, layout]은 두
    개의 하부 내용을 가지고 있고 이들
  • 1:44 - 1:47
    역시 [linear layout]입니다.
  • 1:47 - 1:50
    이들은 당신이 이곳에서 볼 수 있는
    A팀의 [linear layout]과
  • 1:50 - 1:52
    B팀의 [linear layout] 입니다.
  • 1:52 - 1:57
    A팀의 [linear layout]은 두 개의 문자
    뷰와 세 개의 버튼들을 가지고 있습니다.
  • 1:57 - 2:00
    이것은 B팀의 [linear layout]도
    마찬가지 입니다.
  • 2:00 - 2:03
    5 개의 하부 내용, 두 개의 문자 뷰,
    세 개의 버튼
  • 2:03 - 2:05
    [layout]의 이 부분은 이미
    완성되었습니다.
  • 2:05 - 2:09
    단지 이곳에 추가하기만 하면 됩니다.
    자 시작해 봅시다.
  • 2:09 - 2:13
    자 이제 나는 XML 코드를 가지고 있고
    우선 내가 할 일은 당신이 도표에서
  • 2:13 - 2:18
    확인한 [Root Relative Layout]를
    만드는 것입니다.
  • 2:18 - 2:24
    따라서 이곳에서 [RelativeLayout]을
    입력하고 이 두 열이 [root layout]에
  • 2:24 - 2:28
    필요하기 때문에 이들을 붙여 넣고자
    합니다.
  • 2:28 - 2:34
    따라서 이들을 잘라내어 나의 [root
    layout]인 이곳에 붙여 넣습니다.
  • 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
    자 이제 나의 [relative layout]은 화면
    중앙 아래에 버튼을 갖게 되었습니다.
  • 3:02 - 3:05
    이를 위해 화면을 가득 채울 필요가
    있습니다.
  • 3:05 - 3:07
    따라서 이 둘의 [parent]를 일치시킬
    것입니다.
  • 3:09 - 3:12
    자 이제 버튼을 추가하겠습니다.
  • 3:12 - 3:18
    이곳에서부터 [linear layout]이 닫아지는
    곳까지 스크롤을 내리도록 하겠습니다.
  • 3:18 - 3:23
    하지만, 아직 [relative layout] 내부입니다.
    그리고 저는 버튼을 추가하려고 합니다.
  • 3:23 - 3:27
    자 이제 해당 버튼에 대한 [wrap
    content]를 하려고 합니다.
  • 3:27 - 3:30
    왜냐하면 이 버튼은
    화면의 하부 혹은
  • 3:30 - 3:33
    전체를 덮지 못하기
    때문입니다.
  • 3:34 - 3:37
    그리고 이제 이 버튼의 [parent]는
    [RelativeLayout] 이고
  • 3:37 - 3:40
    이 버튼의 문자를 리셋으로
    설정할 것입니다.
  • 3:40 - 3:43
    이를 살펴보도록 합시다.
  • 3:43 - 3:47
    자 이제 나의 리셋 버튼이 나왔습니다.
    제가 원하던 모습은 아니지만
  • 3:47 - 3:52
    이것의 [parent]는 전체 화면을 덮기에
    충분합니다.
  • 3:52 - 3:54
    따라서 [parent]와 함께 배열할 수 있습니다.
  • 3:54 - 3:57
    저는 이것을 [parents bottom]에
    배열하고 싶습니다.
  • 3:57 - 4:01
    이것이 [parent]의 중앙에
    수평방향으로 배열되었으면 합니다.
  • 4:01 - 4:04
    이제 제 버튼이 제자리를 찾은 거
    같습니다.
  • 4:04 - 4:06
    이곳에서 모든 것을 선택할 것입니다.
  • 4:06 - 4:10
    그리고 윈도우의 코드 포맷을 위한
    [Control-Alt-L]과 같은
  • 4:10 - 4:14
    [Mac]의 명령어 L을
    사용할 것입니다.
  • 4:14 - 4:16
    이제 더 좋아졌습니다.
  • 4:16 - 4:19
    자 이제 자바를 살펴보도록 합시다.
  • 4:19 - 4:23
    자 이제 버튼이 생겼지만 기능을
    수행하지는 못합니다.
  • 4:23 - 4:26
    여기에 방법을 연결시키도록 합시다.
  • 4:26 - 4:32
    표시 방법 바로 위인 이곳 [public void]
    에서부터 시작하도록 하겠습니다.
  • 4:32 - 4:35
    저는 이것을 [method resetScore]로
    부르도록 하겠습니다.
  • 4:35 - 4:38
    왜냐하면 이것이 제가 원하는 것이기
    때문입니다.
  • 4:38 - 4:43
    스크롤을 올려, 다른 방법들인 뷰 v
    그리고 [curly brace]들과도
  • 4:43 - 4:47
    연결시키도록 하겠습니다.
  • 4:47 - 4:50
    자 이제 무엇을 할지 걱정할 필요는
    없습니다.
  • 4:50 - 4:53
    다시 XML 코드로 돌아가서
  • 4:53 - 4:57
    이곳의 [resetScore]에 [onClick] 속성을
    추가하여 자바 코드에 버튼을
  • 4:57 - 5:02
    연결하는 두 번째 부분을 진행하도록
    하겠습니다.
  • 5:02 - 5:06
    자 이제 이 버튼을 클릭하면 코드가
    실행됩니다. 하지만 이곳에는 어떠한
  • 5:06 - 5:08
    코드도 없습니다.
  • 5:08 - 5:09
    제가 추가할 사항을 확인해 봅시다.
  • 5:11 - 5:14
    이를 확인하기 위해 [pseudoCode]에
    관한 내용으로 돌아가 봅시다.
  • 5:14 - 5:17
    리셋 버튼을 눌렀을 때 어떠한 것이
    실행되기를 바랍니까?
  • 5:17 - 5:21
    두 점수들이 0이 되기를
    바랍니다.
  • 5:21 - 5:24
    또한 A팀과 B팀의 변수들도
    0으로
  • 5:24 - 5:27
    돌아갔으면 합니다.
  • 5:27 - 5:30
    내가 어떠한 버튼이든 클릭을 하면, 2
    가지 값을 더하게 되고 변수들이
  • 5:30 - 5:32
    표시됨을 기억하십시오.
  • 5:32 - 5:34
    만약 변수가 0으로 돌아가는 것을
    입력하지 않는다면, 이는 잘못된
  • 5:34 - 5:36
    숫자를 보여줄 것입니다.
  • 5:36 - 5:39
    여기서 [pseudoCode-wise]를 통해
    제가 해야 할 내용을 보여드리겠습니다.
  • 5:39 - 5:43
    우선 A팀의 점수를 0으로
    설정합니다.
  • 5:43 - 5:46
    이 후 B팀에도 같은 작업을
    수행합니다.
  • 5:46 - 5:50
    자 이제 두 점수들은 0이 되었습니다.
    하지만 아직 표시되는 내용은 없습니다.
  • 5:50 - 5:55
    세 번째 단계에서는 0으로 설정된
    A팀의 점수를 보여줄 것입니다.
  • 5:56 - 6:00
    이를 더욱 자세히 설명하기 위해,
    A팀의 점수를 이곳에
  • 6:00 - 6:04
    보여드리겠습니다. 그리고 B팀의
    점수도 이곳에서 보여드리겠습니다.
  • 6:04 - 6:08
    왜냐하면 1, 2단계에서 점수가 0이
    되었다는 것을 확신하기 때문입니다.
  • 6:08 - 6:10
    이곳에서 0을 나타낼 것입니다.
  • 6:10 - 6:14
    [ScoreForTeamA] 혹은
    [ScoreForTeamB]를 업데이트 하기
  • 6:14 - 6:18
    위해 버튼을 누르게 되면, 업데이트가
    되지만 시작은 0부터 하게 됩니다.
  • 6:20 - 6:24
    자 이제 리셋 점수에서 [pseudo
    code]에 코드 코드를 입력할 것입니다.
  • 6:24 - 6:29
    자 이제 첫 번째로 할 일은 A팀의
    점수를 이곳의 지정 연산자 및 0의
  • 6:29 - 6:34
    값을 사용하여 0으로 설정하는
    것입니다.
  • 6:34 - 6:36
    아 그리고 세미 콜론을 빠뜨리면
    안됩니다.
  • 6:37 - 6:39
    B팀에도 같은 내용을 적용합니다.
  • 6:42 - 6:49
    그리고 나서 A팀의 점수를 표시할
    것입니다.
  • 6:49 - 6:53
    그리고 B팀의 점수도 표시할
    것입니다.
  • 6:55 - 6:57
    그리고 이에 관한 설명을 추가할
    것입니다.
  • 6:59 - 7:00
    잘 처리되었습니다.
  • 7:00 - 7:04
    핸드폰으로는 아직 실행을 하지
    않았기 때문에 [Run button]을
  • 7:04 - 7:07
    눌러보도록 하겠습니다.
    좋습니다.
  • 7:07 - 7:08
    리셋 버튼이 있습니다.
  • 7:08 - 7:09
    이를 확인하여 봅시다.
  • 7:13 - 7:15
    좋습니다. 0으로 설정되었습니다.
  • 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
    마지막으로.
    리셋 버튼.
  • 7:53 - 7:56
    변화가 없는 거 같습니다.
  • 7:56 - 7:59
    클릭해보도록 합시다. 신기합니다.
  • 7:59 - 8:01
    이해하기가 힘들군요.
  • 8:01 - 8:05
    하지만 마지막 점수는 19 였습니다.
    리셋 버튼을 눌렀지만 변화가 없습니다.
  • 8:05 - 8:08
    하지만 자유투 버튼을 누르자 변화가
    생겼습니다.
  • 8:10 - 8:12
    다른 것들도 확인해 봅시다.
    2점 버튼을 누르면
  • 8:12 - 8:14
    오 2점이 나타나는군요.
  • 8:14 - 8:18
    왜 이러한 상황이 발생되었는지
    코드를 다시 한 번 살펴봅시다.
  • 8:18 - 8:21
    표시 내용을 변경하고 점수를
    설정합니다.
  • 8:21 - 8:25
    여기서 어떠한 오류가 발생되는지를
    살펴봅시다.
  • 8:25 - 8:30
    A팀을 30점으로 설정합니다.
    그리고 B팀을 40점으로 설정합니다.
  • 8:30 - 8:33
    [displayForTeamA]를 입력하면 30점이
    나타납니다.
  • 8:33 - 8:37
    그리고 [displayForTeamB]를 입력하면
    40점이 나타납니다.
  • 8:37 - 8:41
    이 다음에만 이 값들이
    0이 됩니다.
  • 8:41 - 8:46
    하지만 이는 처음이기 때문에 0의 값을
    나타내지는 않을 것입니다.
  • 8:46 - 8:48
    하지만 변수는 0이 될 것입니다.
  • 8:48 - 8:53
    하지만 제가 [addThreeForTeamB]와
    같은 것을 누르면 제가 이곳에 설정한
  • 8:53 - 9:00
    0의 값을 가지게 될 것입니다. 그리고
    이에 3을 더하여 3을 표시할 것입니다.
  • 9:00 - 9:06
    B팀에서도 마찬가지로
    30점에서 리셋 버튼을 누르고
  • 9:06 - 9:12
    3을 누르면
    값이 변경됩니다.
  • 9:12 - 9:15
    자 이제 어떻게 작동하는지를 알게
    되었습니다.
  • 9:15 - 9:19
    이곳에 0을 표시할 수 있습니까?
  • 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

Korean subtitles

Felülvizsgálatok Compare revisions