Showing Revision 2 created 10/08/2015 by Jeong-Lan Kinser.

1. Title:
   05-07 레이아웃 만들기 - 해답
2. Description:

   05-07 레이아웃 만들기 - 해답

3. 180 0:00 - 0:05
   이 레이아웃을 만들기 위해
   activity_main.xml 파일을 열어요.
4. 4710 0:05 - 0:08
   이 뷰들을 수직 열에 각각 놓기 위해
   수직 LinearLayout이
5. 7670 0:08 - 0:09
   필요함을 알아요.
6. 9340 0:09 - 0:13
   먼저 RelativeLayout을
   LinearLayout으로 바꿀게요.
7. 12870 0:13 - 0:17
   즉시, 여는 태그가 닫는 태그와
   일치하지 않는다는
8. 17110 0:17 - 0:21
   에러 메시지가 발생했네요.
   이걸 복사해서 여기 아래에 붙여 넣어요.
9. 20840 0:21 - 0:22
   이제 태그가 일치합니다.
10. 22100 0:22 - 0:24
    다음으로 뷰를 추가합시다.
11. 23930 0:24 - 0:26
    먼저, quantity 텍스트 뷰가 있어요.
12. 25720 0:26 - 0:30
    이 뷰를 가지고 안의 텍스트를
    quantity로 바꿀게요.
13. 29880 0:30 - 0:32
    다음으로 0이라고 말하는
    텍스트 뷰가 있어요.
14. 31960 0:32 - 0:34
    첫 번째 텍스트 뷰를 복사해
    여기 아래에 붙여 넣을 수 있어요.
15. 34460 0:34 - 0:38
    이것을 바꿔서 여기 화면과 같도록
    텍스트가 0이 되도록 할 겁니다.
16. 38430 0:38 - 0:42
    이 LinearLayout의 마지막
    child는 버튼입니다.
17. 41500 0:42 - 0:45
    전에 우리 레이아웃에 버튼을 추가한 적이
    없었으니, Google에서 검색해보죠.
18. 45020 0:45 - 0:48
    브라우저를 열면 button
    android라고 검색할 수 있어요.
19. 48160 0:48 - 0:52
    첫 링크가 좋아 보이네요.
    developer.android.com 사이트예요.
20. 52570 0:53 - 0:57
    여기 버튼에 관한 문서가 있어요.
    여기 대부분의 텍스트는 무시하고요.
21. 56700 0:57 - 0:59
    클래스 개요를 보기 위해
    아래로 스크롤해 내려갑니다.
22. 59250 0:59 - 1:03
    우리가 아직 배운 적 없는
    Java 코드에 대해 얘기하지만,
23. 63000 1:03 - 1:06
    여기 아래에 버튼을 위한
    xml도 있네요.
24. 66300 1:06 - 1:09
    이걸 복사해서 우리 코드에서
    무슨 일이 일어나는지 봅시다.
25. 69280 1:09 - 1:12
    우리 레이아웃에 두 텍스트 뷰
    아래에 버튼을 추가할 겁니다.
26. 72420 1:12 - 1:16
    문서에서 온 코드를
    여기 붙여넣을 겁니다.
27. 76030 1:16 - 1:19
    이제 자폭하는 문자열 대신
28. 78900 1:19 - 1:22
    order 같은 더 친근한 것으로 가볼게요.
29. 82280 1:22 - 1:25
    마지막 줄은 필요하지 않으므로
    지워도 되죠.
30. 84900 1:25 - 1:29
    좋아요, 이제 quantity 텍스트 뷰,
    0이라는 텍스트 뷰,
31. 88580 1:29 - 1:30
    order 버튼이 있죠.
32. 90320 1:30 - 1:32
    어떻게 보이는지 알기 위해
    초록 재생 버튼을 눌러서
33. 92220 1:32 - 1:34
    앱을 실행해봅시다.
34. 93540 1:34 - 1:36
    이것이 구축되고 있는 걸
    여기서 볼 수 있어요.
35. 97290 1:37 - 1:39
    이건 우리가 원하던 게 아니에요.
36. 98660 1:39 - 1:43
    우리 LinearLayout이 사실
    수직이 아니라 수평으로 나타나네요.
37. 103470 1:43 - 1:48
    방향 속성을 넣어봅시다.
38. 107586 1:48 - 1:52
    android:orientation="vertical"이라고
    말하도록 바꿔봅시다.
39. 112020 1:52 - 1:54
    그럼 문제가 해결될 겁니다.
40. 113570 1:54 - 1:55
    다시 실행을 눌러요.
41. 115520 1:56 - 1:57
    좋아요, 이제 낫네요.
42. 117010 1:57 - 2:00
    세 children은 수직 열에서 보여요.
43. 120270 2:00 - 2:02
    우리는 이 필드에 스타일을 줘서
44. 121810 2:02 - 2:05
    우리가 받은 화면 그림과
    더 비슷하게 만들어야 합니다.
45. 125280 2:05 - 2:08
    화면 그림에서 quantity 텍스트 뷰가
    모두 대문자인 것을 볼 수 있어요.
46. 129600 2:10 - 2:14
    레슨 1에서 android:textAllCaps
    라는 속성을 배웠어요.
47. 133950 2:14 - 2:16
    이는 자동 완성으로 나타나죠.
48. 136230 2:16 - 2:18
    이렇게 나타난다면, 그냥 엔터를 눌러
49. 138310 2:18 - 2:21
    당신을 위해 여기 코드에
    자동으로 입력되게 하세요.
50. 141400 2:21 - 2:25
    우리는 모두 대문자이길 바라므로
    값을 참으로 둡니다.
51. 144970 2:25 - 2:29
    텍스트를 대문자화할 때
    이 속성을 쓰는 게 더 나은 이유는
52. 148580 2:29 - 2:33
    당신이 UI를 바꿀 때 quantity가
    이렇게 소문자일 때,
53. 152620 2:33 - 2:36
    우리가 할 일은 그저 이 속성을
    없애는 것이기 때문입니다.
54. 155650 2:36 - 2:38
    텍스트를 찾아 바꿀 필요 없이요.
55. 158020 2:38 - 2:43
    다음으로 여기 텍스트는 0은
    16sp로 바뀌어야 합니다.
56. 162590 2:43 - 2:46
    지금 추가하죠. 이것은
    자동완성으로 제안되었으니
57. 165970 2:46 - 2:50
    저는 엔터를 누르고
    값으로 16sp를 선택합니다.
58. 170000 2:50 - 2:53
    저는 글꼴 색이 검정이길 원해요.
59. 172690 2:53 - 2:55
    검은색을 위한
    Android 시스템 컬러를 사용하죠.
60. 175010 2:55 - 2:57
    그건 이렇게 참조됩니다.
61. 177380 2:57 - 3:01
    좋아요, 그건 quantity와 0
    텍스트 뷰 모두를 다루는군요.
62. 180558 3:01 - 3:05
    order 버튼은 이대로 괜찮고
    버튼 속의 텍스트를
63. 185011 3:05 - 3:09
    자동으로 대문자화할 겁니다.
    높이 너비는 wrap_content네요.
64. 188820 3:09 - 3:12
    우리는 이 수직 공간을 해결해야 해요.
65. 191898 3:12 - 3:17
    quantity와 0 텍스트 뷰 사이에
    16dp의 패딩이나 마진을 원해요.
66. 197190 3:17 - 3:20
    또한 텍스트 뷰 0과
    order 버튼 사이에도
67. 200027 3:20 - 3:21
    16dp의 패딩을 원해요.
68. 201430 3:21 - 3:24
    다양한 많은 방법으로
    이걸 할 수 있어요.
69. 203960 3:24 - 3:29
    저는 이 버튼에 layout_marginTop
    을 추가하겠어요.
70. 211410 3:31 - 3:35
    quantity 텍스트 뷰에는
    marignBottom을 추가하고요.
71. 217810 3:38 - 3:41
    같은 모습으로 보인다면
    다른 어떤 방법으로 해도 상관없어요.
72. 220810 3:41 - 3:44
    제가 아래 마진과 위의 마진을
    선택한 이유는
73. 224000 3:44 - 3:47
    여기 이 중간 부분이
    나중에 바뀔 것을 알기 때문이죠.
74. 227040 3:47 - 3:50
    우리는 이것을 + - 버튼이 있는
    quantity picker로 바꿀 것이고
75. 230460 3:50 - 3:57
    전 quantity 와 picker 사이에
    여전히 16dp의 공간을 원해요.
76. 236930 3:57 - 3:58
    버튼에도 마찬가지고요.
77. 238610 3:59 - 4:01
    좋아요, 다시
    기기에서 실행해 봅시다.
78. 241280 4:01 - 4:03
    멋져요. 우리가 원하던 것 같네요.
79. 243350 4:03 - 4:08
    quantity 텍스트 뷰는 대문자고
    0 텍스트 뷰는 검은색 글자색이고
80. 248020 4:08 - 4:12
    사이즈는 16sp이고,
    여기 order 버튼이 있죠.
81. 251710 4:12 - 4:15
    이 뷰들 사이에 16dp의
    공간도 있죠.
82. 255760 4:16 - 4:18
    잘 했어요. 잊을 뻔 했네요
83. 258240 4:18 - 4:22
    이 퀴즈는 이 버튼을
    클릭했을 때 발생하는 일도 물어보죠.
84. 261560 4:22 - 4:26
    사실 지금으로선
    아무 일도 안 일어나네요.
85. 265901 4:26 - 4:28
    다음에 무슨 일이 일어나는지
    찾기 위해 계속 보세요.