Korean subtitles

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

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

Get Embed Code
13 Languages

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

  1. 이 레이아웃을 만들기 위해
    activity_main.xml 파일을 열어요.
  2. 이 뷰들을 수직 열에 각각 놓기 위해
    수직 LinearLayout이
  3. 필요함을 알아요.
  4. 먼저 RelativeLayout을
    LinearLayout으로 바꿀게요.
  5. 즉시, 여는 태그가 닫는 태그와
    일치하지 않는다는
  6. 에러 메시지가 발생했네요.
    이걸 복사해서 여기 아래에 붙여 넣어요.
  7. 이제 태그가 일치합니다.
  8. 다음으로 뷰를 추가합시다.
  9. 먼저, quantity 텍스트 뷰가 있어요.
  10. 이 뷰를 가지고 안의 텍스트를
    quantity로 바꿀게요.
  11. 다음으로 0이라고 말하는
    텍스트 뷰가 있어요.
  12. 첫 번째 텍스트 뷰를 복사해
    여기 아래에 붙여 넣을 수 있어요.
  13. 이것을 바꿔서 여기 화면과 같도록
    텍스트가 0이 되도록 할 겁니다.
  14. 이 LinearLayout의 마지막
    child는 버튼입니다.
  15. 전에 우리 레이아웃에 버튼을 추가한 적이
    없었으니, Google에서 검색해보죠.
  16. 브라우저를 열면 button
    android라고 검색할 수 있어요.
  17. 첫 링크가 좋아 보이네요.
    developer.android.com 사이트예요.
  18. 여기 버튼에 관한 문서가 있어요.
    여기 대부분의 텍스트는 무시하고요.
  19. 클래스 개요를 보기 위해
    아래로 스크롤해 내려갑니다.
  20. 우리가 아직 배운 적 없는
    Java 코드에 대해 얘기하지만,
  21. 여기 아래에 버튼을 위한
    xml도 있네요.
  22. 이걸 복사해서 우리 코드에서
    무슨 일이 일어나는지 봅시다.
  23. 우리 레이아웃에 두 텍스트 뷰
    아래에 버튼을 추가할 겁니다.
  24. 문서에서 온 코드를
    여기 붙여넣을 겁니다.
  25. 이제 자폭하는 문자열 대신
  26. order 같은 더 친근한 것으로 가볼게요.
  27. 마지막 줄은 필요하지 않으므로
    지워도 되죠.
  28. 좋아요, 이제 quantity 텍스트 뷰,
    0이라는 텍스트 뷰,
  29. order 버튼이 있죠.
  30. 어떻게 보이는지 알기 위해
    초록 재생 버튼을 눌러서
  31. 앱을 실행해봅시다.
  32. 이것이 구축되고 있는 걸
    여기서 볼 수 있어요.
  33. 이건 우리가 원하던 게 아니에요.
  34. 우리 LinearLayout이 사실
    수직이 아니라 수평으로 나타나네요.
  35. 방향 속성을 넣어봅시다.
  36. android:orientation="vertical"이라고
    말하도록 바꿔봅시다.
  37. 그럼 문제가 해결될 겁니다.
  38. 다시 실행을 눌러요.
  39. 좋아요, 이제 낫네요.
  40. 세 children은 수직 열에서 보여요.
  41. 우리는 이 필드에 스타일을 줘서
  42. 우리가 받은 화면 그림과
    더 비슷하게 만들어야 합니다.
  43. 화면 그림에서 quantity 텍스트 뷰가
    모두 대문자인 것을 볼 수 있어요.
  44. 레슨 1에서 android:textAllCaps
    라는 속성을 배웠어요.
  45. 이는 자동 완성으로 나타나죠.
  46. 이렇게 나타난다면, 그냥 엔터를 눌러
  47. 당신을 위해 여기 코드에
    자동으로 입력되게 하세요.
  48. 우리는 모두 대문자이길 바라므로
    값을 참으로 둡니다.
  49. 텍스트를 대문자화할 때
    이 속성을 쓰는 게 더 나은 이유는
  50. 당신이 UI를 바꿀 때 quantity가
    이렇게 소문자일 때,
  51. 우리가 할 일은 그저 이 속성을
    없애는 것이기 때문입니다.
  52. 텍스트를 찾아 바꿀 필요 없이요.
  53. 다음으로 여기 텍스트는 0은
    16sp로 바뀌어야 합니다.
  54. 지금 추가하죠. 이것은
    자동완성으로 제안되었으니
  55. 저는 엔터를 누르고
    값으로 16sp를 선택합니다.
  56. 저는 글꼴 색이 검정이길 원해요.
  57. 검은색을 위한
    Android 시스템 컬러를 사용하죠.
  58. 그건 이렇게 참조됩니다.
  59. 좋아요, 그건 quantity와 0
    텍스트 뷰 모두를 다루는군요.
  60. order 버튼은 이대로 괜찮고
    버튼 속의 텍스트를
  61. 자동으로 대문자화할 겁니다.
    높이 너비는 wrap_content네요.
  62. 우리는 이 수직 공간을 해결해야 해요.
  63. quantity와 0 텍스트 뷰 사이에
    16dp의 패딩이나 마진을 원해요.
  64. 또한 텍스트 뷰 0과
    order 버튼 사이에도
  65. 16dp의 패딩을 원해요.
  66. 다양한 많은 방법으로
    이걸 할 수 있어요.
  67. 저는 이 버튼에 layout_marginTop
    을 추가하겠어요.
  68. quantity 텍스트 뷰에는
    marignBottom을 추가하고요.
  69. 같은 모습으로 보인다면
    다른 어떤 방법으로 해도 상관없어요.
  70. 제가 아래 마진과 위의 마진을
    선택한 이유는
  71. 여기 이 중간 부분이
    나중에 바뀔 것을 알기 때문이죠.
  72. 우리는 이것을 + - 버튼이 있는
    quantity picker로 바꿀 것이고
  73. 전 quantity 와 picker 사이에
    여전히 16dp의 공간을 원해요.
  74. 버튼에도 마찬가지고요.
  75. 좋아요, 다시
    기기에서 실행해 봅시다.
  76. 멋져요. 우리가 원하던 것 같네요.
  77. quantity 텍스트 뷰는 대문자고
    0 텍스트 뷰는 검은색 글자색이고
  78. 사이즈는 16sp이고,
    여기 order 버튼이 있죠.
  79. 이 뷰들 사이에 16dp의
    공간도 있죠.
  80. 잘 했어요. 잊을 뻔 했네요
  81. 이 퀴즈는 이 버튼을
    클릭했을 때 발생하는 일도 물어보죠.
  82. 사실 지금으로선
    아무 일도 안 일어나네요.
  83. 다음에 무슨 일이 일어나는지
    찾기 위해 계속 보세요.