YouTube

Got a YouTube account?

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

Korean subtitles

← 13-02 Adding a CheckBox - Solution

Get Embed Code
13 Languages

Showing Revision 1 created 10/18/2015 by sp11.

  1. 이 레이아웃을 만들기 위해 우선
    어떤 뷰가 필요한지 생각해 봅시다.
  2. 일단 이 모두가 이미 만들어져
    있다고 가정하고, 여기에 무엇을
  3. 새롭게 붙일 것인가에 대해서만
    이야기할 거예요.
  4. 두 가지 뷰를 덧붙여야 하는데,
    토핑 관련 텍스트뷰랑
  5. 휘핑 크림 아이템에 쓸
    체크박스예요.
  6. 이 뷰가 안드로이드에 존재한다는
    걸 모르셨을 지도 모르지만
  7. 구글 검색을 해보면
    답을 찾으실 수 있을 겁니다.
  8. 2단계로 넘어가죠.
    이제 뷰의 위치를 설정해야 합니다.
  9. 뷰가 이미 제 위치에
    있다고 가정하면,
  10. 토핑과 휘핑크림만 같은 줄에
    세로로 붙이면 되네요.
  11. 루트 뷰가 수직선 레이아웃이므로
  12. 이 두 개의 뷰를 여기 맨 위에
    붙이기만 하면 됩니다.
  13. 3단계로, 이 뷰의
    스타일을 만들어야죠.
  14. '토핑' 헤더의 스타일은
    '수량' 및 '주문 요약'과
  15. 동일합니다. 따라서 이미 존재하는
    헤더를 복사해서
  16. 붙여넣기만 하면 될 겁니다.
  17. 체크박스 뷰는 그와 별개니까
    그에 맞게 스타일링 해야 겠죠.
  18. 박스와 텍스트 사이에
    24 dp의 공간이 있어야 겠죠.
  19. 그리고 '휘핑 크림' 폰트 사이즈를
    16 sp로 바꿉니다.
  20. 우리 앱에서 바꿔 봅시다.
  21. '토핑' 헤더를 '수량' 헤더랑
    똑같이 보이게 하려면, 이 코드를
  22. 바로 복사 후 붙여넣기 합니다.
  23. 이것을 카피해서 여기
    수직 레이아웃 부분에 붙입니다.
  24. 좋아요, 이제 '수량'이 여기에
    두 번 나타나죠.
  25. 이제 텍스트를 바꿔서 '토핑'으로
    표시되게 할 거예요.
  26. 문단 간격 부분 역시 복사해서
  27. 이 헤더랑 아래 내용 사이에
    공간이 생기게 할 거예요.
  28. 아직 앱에 체크박스를 추가하지
    않았군요. 그래서
  29. 추가하는 방법을 구글로
    검색해 보겠습니다.
  30. '체크박스 안드로이드'로
    검색해 보죠.
  31. '안드로이드'라고 덧붙이는 걸
    잊지 마세요. 웹 혹은 다른
  32. 모바일 플랫폼에서 체크박스를
    추가하는 방법일 수도 있으니까요.
  33. 이러면 안드로이드 앱 대상의
    특정 결과를 얻을 수 있겠죠.
  34. 첫 번째 링크를 볼까요.
  35. 체크박스 클래스용
    레퍼런스네요.
  36. 스크롤 해볼까요. 클래스 개요도
    괜찮아 보이고
  37. 바로 XML 속성으로 들어가네요.
  38. 하지만 제가 원하는 정보는
    체크박스 용 XML 코드의 예니까,
  39. 검색 결과로 다시 돌아가겠습니다.
  40. 두 번째 링크를 클릭해 보죠.
  41. 좋아요. 이제 체크박스 그림이
    보이는 군요.
  42. 여기 XML 코드도 있어요.
  43. 이 링크가 괜찮을 것 같네요.
  44. 여기엔 LinearLayout에
    체크박스 2개가 들어 있습니다.
  45. 여기 첫 번째 체크박스를
    복사한 다음,
  46. 우리 앱에 가져다 붙일 거예요.
  47. 앱으로 돌아와서, 이걸 '토핑'과
    '수량' 사이에 붙이고 싶으니
  48. 그럼 바로 여기겠군요.
  49. XML을 수정해야 겠네요.
    우리가 쓰기엔 사이즈가 좀 안 맞아요.
  50. ID랑 여기 텍스트를
    제거하겠습니다.
  51. '고기'는 안 되겠죠. 우리 커피숍에선
    고기를 안 파니까요.
  52. '휘핑크림'이라고 적어넣습니다.
  53. 그건 그렇고, 방금 전에 보신
    "@string/meat"는
  54. strings.xml 파일 안의 리소스
    문자열에 대한 레퍼런스였어요.
  55. 이것도 나중에 다시 보겠지만
    지금은 그냥
  56. 바로 여기에 입력하시면 됩니다.
  57. 보세요. 프리뷰 화면이 업데이트되어
    휘핑크림이라는 체크박스가 생겼죠.
  58. 이 체크박스 뷰가 좋은 건
    텍스트가 이미 들어가 있어서,
  59. 여기에 다른 텍스트뷰를 또
    붙여넣을 필요가 없다는 거예요.
  60. onClick이라고 되어 있는 여기도
    필요 없어요.
  61. 이 코딩 과제에선 여기에
    체크박스를 만들기만 하면 되니까요.
  62. 이 XML은 일반 안드로이드 뷰
    치트시트라는 걸 클릭하셔도
  63. 얻을 수 있습니다.
  64. 이 치트시트에는 여러 가지
    일반적 안드로이드 뷰는 물론
  65. 관련 XML 예도 들어 있습니다.
  66. 여기 체크박스 뷰를 보시면,
    이 코드로 만드는 체크박스의
  67. 모양 예시와 그 XML 코드가
    나와 있습니다.
  68. 여기서 XML을 복사하셔서
    앱에 붙여 넣으면 되는 거죠.
  69. 안드로이드 스튜디오로 앱을
    가동해서 어떻게 되었는 지 봅시다.
  70. 여기 있네요.
  71. 괜찮아 보이는데요.
  72. '토핑' 헤더와 '휘핑크림'
    체크박스가 생겼습니다.
  73. 박스를 체크하면 멋진 애니메이션
    효과도 나타나네요.
  74. 유일한 문제는 공간 띄우기네요.
  75. 여길 보시면, '수량' 헤더와
    체크박스가 너무 붙어 있고
  76. 이 사이에도 여유 공간이
    별로 없어요.
  77. 빨갛게 표시된 부분으로
    돌아가 봅시다.
  78. 여기에 공간을 24 dp 두고, 폰트
    사이즈를 16 sp로 바꿔야 하네요.
  79. 우선 폰트 사이즈를 바꿔 보죠.
  80. "android:textSize"라고 입력한 후,
    16sp라고 적어 넣겠습니다.
  81. 여기에 프리뷰를 열어 보면
    폰트 크기가 늘어난 걸 .
  82. 볼 수 있죠.
  83. 새로 고침 되었는 지 모르겠으면
    이 버튼을 누르시면 됩니다.
  84. 좋아요.
  85. 사실 이 공간 띄우기
    문제를 해결하려고
  86. 몇 번의 실수를 거듭해야만 했어요.
  87. 여백 값을 새로 맞추고
  88. 시작글 여백값을 맞추려고 했는데,
    보니까 좌측 여백값이
  89. 박스랑 텍스트 사이 공간도
    결정하고 있더라고요.
  90. 텍스트 삽입을 붙여 봅시다.
  91. 좋아요. 텍스트가 옮겨갔네요.
  92. 아직 또 하나의 문제가 있는데요.
  93. 이 부분에는 수직 공간이 충분한데,
    여기는 별로 없어요.
  94. 바닥 텍스트 삽입이나 여백값을
    여기 체크박스 뷰에 추가하거나, 또는
  95. 시작 텍스트 삽입이나 여백값을
    여기 수량 헤더에 붙여야 겠어요.
  96. 어느 쪽이든 상관 없을 겁니다.
  97. 저는 위 여백값을
    '수량' 헤더에 추가할께요.
  98. 자, 이제 한결 보기 좋아졌죠!
  99. 줄 간격이 훨씬 균등해졌습니다.
  100. 이제 앱을 기기에서 작동해 보죠.
  101. 이렇게 됩니다.
  102. 훨씬 보기 좋아졌군요.
  103. 잘 했어요.
  104. 앱에 UI 변동사항을 더 첨가하려면
    이렇게 구글 검색을 하셔서 해당
  105. 정보를 인터넷에서 찾은 후
    여러분의 앱에 적용하면 됩니다.