Return to Video

13-02 Adding a CheckBox - Solution

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

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
05:27

Korean subtitles

Revisions