YouTube

Got a YouTube account?

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

Korean subtitles

← 07-37 Add the Other Team in XML

Get Embed Code
13 Languages

Showing Revision 2 created 11/11/2015 by Fran Ontanaya.

  1. 코딩을 하기에 앞서,
    본 문제에 대해 답을 할 것입니다.
  2. 저는 단지 두 가지의
    뷰 그룹들만을 알고 있습니다.
  3. [LinearLayouts], [RelativeLayouts]
  4. 이곳에서의 키워드는 이 두 가지들이
    동일한 여백을 갖는다는 것입니다.
  5. [layout weight]의 사용은 이를
    간편하게 할 수 있도록 합니다.
  6. 자 이제 다음으로 넘어가
    코드를 살펴보도록 합시다.
  7. 좋습니다. 저는 더 이상 자바를
    사용하지 않을 것이기 때문에
  8. [activity_main.xml]으로 넘어가겠습니다.
  9. 여기에 XML 파일이 있습니다.
  10. 따라서 이 모든 코드들을 다른
    [LinearLayout]에 넣는 것으로 시작하겠습니다.
  11. 이것은 저의 작은 [LinearLayouts]들에
    대한 [parent] [LinearLayout]입니다.
  12. 그리고 이 두 열 들을 이곳
    위쪽으로 올리겠습니다.
  13. 왜냐하면 이것들을 [root view]에 첨부하고
    [closing brace]에 더하기 위해서 입니다.
  14. 좋습니다. 안드로이드는 자동으로
    이곳에 닫는 태그를 만들었습니다.
  15. 자 이제 다음 단계로 넘어가
  16. 이 닫는 태그를 자르도록 하겠습니다.
    바닥까지 스크롤을 내리고 붙여 넣으십시오.
  17. 자 이제 붉은색의 [squiggly line]이 생겼습니다.
    그리고 오류를 살펴보면,
  18. [layout_height]와 [layout_width]의
    규정이 필요하다는 것을 알 수 있습니다.
  19. 이런!
    좋습니다. 이를 해결하도록 합시다.
  20. 이것은 [root view] 이므로, 다음에
    [match_parent]를 만들겠습니다.
  21. 좋습니다.
  22. 하위 [LinearLayout]의 주변에
    하나의 [LinearLayout]을 만들었습니다.
  23. 프리뷰를 살펴보면,
    잘 만들어 졌습니다.
  24. 자 이제 다음으로 할 일은
    A팀 [LinearLayout]의 모든 내용을
  25. 복사하여 A팀 바로 아래 붙여 넣는
    것입니다.
  26. 그리고 이는 B팀의
    [LinearLayout]이 됩니다.
  27. 아직은 조금 정렬이 되지
    않은 듯 합니다.
  28. 따라서 [Cmd+A]를 할 것입니다.
    또는 모두 선택을 하고
  29. 코드 포맷을 위한 Cmd+Option+L
    단축키를 사용할 것입니다.
  30. 윈도우에서는 Ctrl+Alt+L입니다.
    이제 한 결 나아졌습니다.
  31. 자 이제 지금까지의 과정을 잘
    이해하셨기를 바랍니다.
  32. 위 부분까지 스크롤을 올리면
    [root LinearLayout]을 확인할 수 있습니다.
  33. 이곳에서부터 시작됩니다. 그리고 스크롤을
    바닥까지 내리면 이곳에서 끝이 납니다.
  34. [root LinearLayout] 내부에서, 다시
    한 번 스크롤을 올려보도록 하겠습니다.
  35. 이곳에서 시작하는 하위 [layout]이
    만들어 졌습니다.
  36. 스크롤을 천천히 내리겠습니다.
  37. 이곳에서 끝이 납니다.
  38. 이것이 A팀입니다.
  39. 그리고 이곳에서 시작하는 다른 하위
    [LinearLayout] 얻게 되었습니다.
  40. 스크롤 천천히 내리면 B팀은 이곳에서 끝이 납니다.
  41. 좋습니다.
    이제 윗부분에서 빨간 부분을 발견하였습니다.
  42. 오류 내용을 확인하기 위해 다시 한 번
    스크롤을 올려보도록 하겠습니다.
  43. 잘못된 방향, 방향지정 없음, 기본 값은
    수평방향입니다.
  44. 여전히 이 [layout]은
  45. [width match_parent]를 포함하여
    다양한 하위 분류를 가지고 있습니다.
  46. 저는 수평 방향을 원합니다.
    하지만 일단 다음으로 넘어가
  47. 방향을 규정하도록 합시다.
  48. 기본값은 수평방향이기 때문에
    이것은 기술적으로는 필요가 없습니다.
  49. 하지만 이것은 확실합니다.
  50. 그리고 이는 다른 것들을 포함하는
    하위 분류에 대해 나타냅니다.
  51. 프리뷰를 클릭해 보도록 하겠습니다.
  52. 흠. 모든 문제 사항들에 관한 내용을
    붙여 넣기 하였지만
  53. 별다른 변화가
    보이지는 않습니다.
  54. 이는 제가 오류부분들을
    수정하지 않았던 것처럼 나타납니다.
  55. 이는 수평 [layout]임을
    나타냅니다.
  56. 이 두 [LinearLayout]들을 나란히
    놓고자 하지만,
  57. [LinearLayout]은 [match_parent]의
    [layout_width]을 가지고 있어
  58. 화면에 가득 찹니다.
  59. 이처럼 간단히 저의 첫
    [LinearLayout]은 화면을 채웁니다.
  60. 그리고 다른 [LinearLayout]이 화면의
    다른 곳에 배치됩니다.
  61. 여기서 우리가 바라는 것이
    무엇인지를 확인해 봅시다.
  62. 우리는 서로 같은 여백을 가지고 나란히
    놓이는 두 개의 [layout]들을 원합니다.
  63. 따라서 이것을
    [layout_weight]로
  64. 불러들일 경우, 첫 번째
    [LinearLayout]을 취하고 1에 대한
  65. [layout_weight]를 줍니다.
  66. 또한 이것의 길이를 0으로 설정합니다.
  67. 따라서 이제 우리가 두 개의 [LinearLayouts]을
    완성하였다는 것을 알 수 있습니다.
  68. 이들은 정확히
    표시되지 않습니다.
  69. 하지만 이는 조금 더 낫습니다.
  70. 따라서 저는 [layout_weight]를
    이 곳의 두 번째 [LinearLayout]에
  71. 넣도록 하겠습니다.
  72. 자 이제 스크롤을 내리겠습니다.
  73. 이곳에 두 번째 [LinearLayout]이 있습니다.
  74. 저는 완전히 같은 작업을 할 것입니다.
  75. 여기에도 1에 대한 [layout_weight]가
    있기 때문에 동일한 [layout_weight]를
  76. 가지고 있다고 할 수 있습니다.
  77. 그리고 너비를 0으로
    설정합니다.
  78. 두 개의 너비를 0으로
    설정하는 이유는 실질적으로
  79. 이 두 측면이 너비를 가지지
    않기 때문입니다.
  80. 그리고 이 둘은 같은 [layout weight]을
    가지기 때문에
  81. 이에 따라 화면 전체에 대한
    모든 여백을 가지고
  82. 이를 나눠 절반씩
    가질 것입니다.
  83. 만약 이 내용이 이해되지 않는다면,
    제가 지시 내용 부분에 걸어둔
  84. [layout_weight]에 관한
    링크 내용을 확인하시면 됩니다.
  85. A팀을 나타낸 것을 제외하고는
    훨씬 나아졌습니다.
  86. 이를 B팀으로 변경하기 위해 스크롤을
    내려보도록 하겠습니다.
  87. 이곳에도 오류가 발생하였음을 확인할
    수 있을 것입니다.
  88. 그리고 이 오류는 복제된 ID로
    인한 것입니다.
  89. 제가 코드를 붙여 넣었다는 것을
    명심하시기 바랍니다.
  90. 따라서 기본적으로
    [team_a_score]라는 같은 id에 대해
  91. 두 가지 작업을 한 것입니다.
  92. 따라서 이를 [team_b_score]로
    변경해 주겠습니다.
  93. 자 이제 좋아졌습니다.
  94. 식별이 어렵군요.
  95. 확대해보도록 하겠습니다.
  96. 이곳에서는 B팀을 나타냅니다.
  97. 정확한 버튼과 문자 뷰를
    완성하였습니다.
  98. 자 이제 이것을 제 핸드폰에서
    실행시키도록 하겠습니다.
  99. 좋습니다.
  100. A팀 버튼을 누르면 업데이트 됩니다.
    좋습니다.
  101. B팀 버튼을 눌러도
    같은 내용이 업데이트 됩니다.
  102. 특이하군요.
  103. 하지만 우리는 XML에 관한 내용을
    작업하였다는 것을 기억하십시오.
  104. 우리는 자바에 관한 내용은 고려하지 않았습니다.
  105. 하지만 XML에 정상 작동 된다면
    자바로 변경하지 못할 이유는 없습니다.