Return to Video

07-23 The Stages - Solution

  • 0:00 - 0:04
    XML로 넘어가기 전에
    이 질문에 대해 답해 보도록 하죠
  • 0:04 - 0:07
    가장 먼저 해야할 것은
    뷰를 선택하는 것입니다
  • 0:07 - 0:09
    이 주변에 상자를 그려 놓도록 하죠
  • 0:09 - 0:11
    좋습니다
    여기 뷰 그룹을 포함하지 않지만
  • 0:11 - 0:14
    여전히 뷰로 여겨지는
    5개의 서로 다른 뷰가 있습니다
  • 0:14 - 0:15
    어쨌든,
  • 0:15 - 0:19
    5개의 뷰는 여기 두개의 텍스트 뷰와
    그 다음 세 개의 버튼을 말합니다
  • 0:19 - 0:22
    그리고 여기 이 부분에 이미지 뷰 가 없고
    다른 어디에도 없기 때문에
  • 0:22 - 0:24
    이미지 뷰는 아예 없다고 하고
    넘어가겠습니다
  • 0:24 - 0:27
    아마 지금 여러분들은
    왜 저게 2개의 다른 텍스트 뷰인지
  • 0:27 - 0:28
    의문을 가질 수도 있을겁니다
  • 0:28 - 0:29
    음 그러니까
  • 0:29 - 0:34
    최종 모델에서
    Team A와 점수의 스타일은 굉장히 다릅니다
  • 0:34 - 0:37
    그래서 저는 이 둘을
    두 텍스트 뷰로 나눠 놓기로 결정한겁니다
  • 0:37 - 0:40
    두번째 단계로 넘어가서
    뷰를 위치 시켜 보겠습니다
  • 0:40 - 0:42
    이곳에 사용하고 싶은
    뷰 그룹을 선택해보겠습니다
  • 0:42 - 0:44
    제가 생각하고 있는 두 개의 뷰 그룹은
  • 0:44 - 0:46
    linear layout과
    relative layout입니다
  • 0:46 - 0:49
    여기 이 부분은 수직적 뷰 열입니다
  • 0:49 - 0:51
    그래서 이 부분에서
    제가 원하는 뷰 그룹은 명확합니다
  • 0:51 - 0:53
    바로 linear layout 이죠
  • 0:53 - 0:55
    좋습니다
  • 0:55 - 0:57
    드디어 세번째 단계인
    뷰 스타일 입니다
  • 0:57 - 1:00
    XML을 통해 살펴 보도록 하겠습니다
  • 1:00 - 1:02
    좋습니다
    XML로 넘어 가도록 하죠
  • 1:02 - 1:05
    Text tab을 보도록 할까요
  • 1:05 - 1:07
    자 이 곳에서 제가 가장 먼저 수행할 것은
  • 1:07 - 1:10
    불필요한 부분을 삭제하는 것입니다
  • 1:10 - 1:13
    이 텍스트 뷰를
    지우는 것에서 부터 시작 하겠습니다
  • 1:13 - 1:16
    그리고
    paddingLeft, paddingRight,
  • 1:16 - 1:18
    paddingTop,
    paddingBottom
  • 1:18 - 1:19
    모두를 지우겠습니다
  • 1:19 - 1:23
    이때 의도하지 않은 것을 지우지 않도록
    주의 하셔야 합니다
  • 1:23 - 1:24
    됐습니다
  • 1:24 - 1:27
    자 이제
    우리가 사용 하고자 한 뷰 그룹은 이미
  • 1:27 - 1:29
    relative layout가 아닌
    linear layout으로 정했으므로
  • 1:29 - 1:31
    이 부분을 수정하겠습니다
  • 1:31 - 1:33
    그리고 이 linear layout에
  • 1:33 - 1:36
    두 개의 텍스트 뷰와
    세 개의 버튼이 있기 때문에
  • 1:36 - 1:37
    모두 만들어 보도록 하겠습니다
  • 1:37 - 1:38
    지금 이 단계에선
  • 1:38 - 1:42
    이 텍스트 뷰의 너비와 높이를
    결정하진 않겠습니다
  • 1:42 - 1:45
    지금은 이 것을
    wrap_content로 놔두겠습니다
  • 1:45 - 1:47
    wrap_content는
    텍스트 뷰의 상자를
  • 1:47 - 1:49
    텍스트 바로 가장자리에
    위치시킬 겁니다
  • 1:49 - 1:50
    다음으로 넘어가서
  • 1:50 - 1:52
    이 텍스트 뷰의 텍스트를
    정해보도록 하겠습니다
  • 1:52 - 1:55
    이 첫번째 텍스트 뷰는
    그대로 Team A가 되겠습니다
  • 1:55 - 1:56
    좋습니다
  • 1:56 - 1:58
    어떻게 보일지
    미리보기를 통해 보도록 하죠
  • 1:58 - 2:01
    여기에 Team A란
    텍스트 뷰를 볼 수 있습니다
  • 2:01 - 2:03
    이제 몇 개를
    더 만들어 보도록 하죠
  • 2:03 - 2:06
    자 다음 아래에 있는 것은
    점수 입니다
  • 2:06 - 2:08
    그리고 이것 역시 텍스트 뷰입니다
  • 2:08 - 2:10
    그렇기 때문에 Text를 넣도록 하겠습니다
  • 2:10 - 2:11
    좋습니다
  • 2:11 - 2:13
    TextView를 입력하겠습니다
    그리고 엔터를 칩니다
  • 2:13 - 2:15
    그리고 이것 역시
    wrap_content를 넣겠습니다
  • 2:15 - 2:17
    그리고 텍스트를 추가하겠습니다
  • 2:17 - 2:21
    음 점수는 보통 0부터 시작하므로
    이것 역시 0부터 시작하도록 하겠습니다
  • 2:21 - 2:23
    됐습니다
    이제 버튼 차례입니다
  • 2:23 - 2:25
    Button을 입력하는 것부터
    시작하겠습니다
  • 2:25 - 2:28
    이것 역시
    wrap_content를 넣겠습니다
  • 2:28 - 2:29
    됐습니다
  • 2:29 - 2:32
    이제 첫번째 버튼은
    '3포인트 추가' 메시지를 표시 할 겁니다
  • 2:32 - 2:34
    이제 이 부분을 복사해서
  • 2:34 - 2:38
    붙여 넣기를 한 번, 두 번 하여
  • 2:38 - 2:39
    두 개의 버튼을 더 생성합니다
  • 2:39 - 2:42
    그리고 그 중 하나의 버튼은
    '2포인트 추가',
  • 2:42 - 2:45
    다른 하나는 'Free Throw'
    메시지를 표시 하겠습니다
  • 2:45 - 2:46
    됐습니다
    미리보기를 통해
  • 2:46 - 2:48
    어떻게 표시되는지
    확인해 보도록 하죠
  • 2:48 - 2:51
    자 3개의 버튼이 보입니다
  • 2:51 - 2:54
    Team A와 0 도 볼 수 있네요
  • 2:54 - 2:56
    이제 제가 원한 뷰가
    모두 생겼습니다
  • 2:56 - 2:59
    하지만 지금은 최종 목표와
    다른 모양새를 갖추고 있습니다
  • 2:59 - 3:01
    수직으로 배치된 걸
    기억하실겁니다
  • 3:01 - 3:03
    이 레이아웃의 배치를
    바꿔야 할 것 같습니다
  • 3:03 - 3:05
    그러니 해 보도록 하죠
  • 3:05 - 3:09
    orientation을 입력하고
    수직을 선택합니다
  • 3:09 - 3:11
    됐습니다
    이제 좀 나아 보이네요
  • 3:11 - 3:13
    이제 이 버튼들은
  • 3:13 - 3:17
    화면의 너비를 꽉 채울 정도로
    연장되어 있었기 때문에
  • 3:17 - 3:21
    아마도 버튼에 wrap_content는
    적절한 선택이 아닐 겁니다
  • 3:21 - 3:23
    대신, match_parent를
    사용하도록 하겠습니다
  • 3:23 - 3:25
    지금 바로 바꿔보도록 하죠
  • 3:25 - 3:26
    좋습니다
  • 3:26 - 3:29
    그래서 이제 모든 버튼의 너비는
    match_parent가 됐습니다
  • 3:29 - 3:30
    미리보기를 보도록 하죠
  • 3:30 - 3:32
    됐습니다
    이제 나아보이네요
  • 3:32 - 3:34
    확장 됐습니다
    좋습니다
  • 3:34 - 3:40
    음 제 텍스트들이 여전히
    코너에 몰려 있군요
  • 3:40 - 3:43
    수정을 위해서
    gravity라는 것을 사용할 겁니다
  • 3:43 - 3:44
    좋습니다
  • 3:44 - 3:46
    이 구글 그리기 도구를
    사용하겠습니다
  • 3:46 - 3:49
    이제 하나의 텍스트 상자를
    구글 그리기에 그려 보겠습니다
  • 3:49 - 3:50
    됐습니다
  • 3:50 - 3:53
    이 상자가 뷰의 테두리처럼 보이네요
  • 3:53 - 3:55
    Team A를 입력합니다
  • 3:55 - 3:58
    입력된 텍스트는 초기 설정에 의해
    왼쪽 상단에 위치합니다
  • 3:58 - 3:59
    이는 텍스트 뷰도 마찬가지 입니다
  • 3:59 - 4:01
    텍스트 뷰에 텍스트를 입력할 때
  • 4:01 - 4:03
    입력된 텍스트는 초기 설정에 의해
    왼쪽 상단에 위치합니다
  • 4:03 - 4:07
    이제 구글 그리기 도구를 이용해
    이 텍스트를 선택하고
  • 4:07 - 4:12
    attribute과 같은 역할을 하는
    line을 이용해
  • 4:12 - 4:16
    텍스트 상자 안에서
    수평 중앙을 맞추고
  • 4:16 - 4:19
    수직 중앙을 맞출 수 있습니다
  • 4:19 - 4:20
    좋은 기능이군요
  • 4:20 - 4:25
    뷰의 내용을 선택해
    뷰 범위 내에서 이동시키는 것이
  • 4:25 - 4:27
    바로 layout gravity의
    역할입니다
  • 4:27 - 4:30
    그리고 혹시 여러분께서 이 기능이
    relative layout과 함께 사용되는
  • 4:30 - 4:33
    alignment method의 일부 기능과
    비슷하다고 생각하신다면 맞습니다
  • 4:33 - 4:36
    하지만 linear layout에선
    gravity attribute를 사용하시면 됩니다
  • 4:36 - 4:37
    이 기능은 작업을
    효과적으로 만들어 줍니다
  • 4:37 - 4:39
    코드를 살펴 보도록 하죠
  • 4:39 - 4:44
    첫번째 텍스트 뷰를 선택하고
    gravity를 입력하겠습니다
  • 4:44 - 4:45
    됐습니다
  • 4:45 - 4:47
    gravity에는 두 가지
    선택 사항이 있습니다
  • 4:47 - 4:49
    layout gravity와
    gravity입니다
  • 4:49 - 4:51
    방금 전에 gravity attribute에 대해말씀 드렸었죠
  • 4:51 - 4:52
    그걸 지금 이용하겠습니다
  • 4:52 - 4:53
    됐습니다
  • 4:53 - 4:55
    그럼 여기 여러 개의
    선택 사항이 있습니다
  • 4:55 - 4:58
    수평 중앙을 맞추고 싶군요
  • 4:58 - 5:00
    그러므로 이걸 사용하겠습니다
  • 5:00 - 5:03
    그리고 미리보기를 통해서
    점검 해 보겠습니다
  • 5:03 - 5:06
    변화가 있어 보이진 않지만
  • 5:06 - 5:09
    사실 여기엔 이유가 있습니다
  • 5:09 - 5:14
    그냥 보기에는 어려울 수도 있으므로
    여기를 눌러 당겨 보면
  • 5:14 - 5:15
    됐습니다
  • 5:15 - 5:17
    여기 Team A가 있습니다
  • 5:17 - 5:20
    그리고 그 주변에
    뷰 테두리가 보일겁니다
  • 5:20 - 5:22
    음 만약 제가 여러분께
  • 5:22 - 5:25
    이것이 뷰 안에서 중앙에
    맞춰진 것이라고 말한다면
  • 5:25 - 5:27
    별 이견은 없으실 겁니다
  • 5:27 - 5:29
    실제로 이는 뷰 안에서
    중앙에 맞춰진 것이고
  • 5:29 - 5:31
    단지 뷰가 아주 작을 뿐입니다
  • 5:31 - 5:33
    구글 그리기 도구로
    돌아가 보도록 하죠
  • 5:33 - 5:38
    만약 이 상자의 크기를
    텍스트 크기에 딱 맞게 줄인다면
  • 5:38 - 5:40
    중앙에 맞춰 지게 됩니다
    하지만
  • 5:40 - 5:44
    만약 이게 왼쪽 정렬이 된 것이라고 해도
    보기에 차이점이 없습니다
  • 5:44 - 5:45
    그렇죠 그래서
  • 5:45 - 5:47
    만약 휴대폰 화면의 중앙에
    정렬시키길 원한다면
  • 5:47 - 5:50
    뷰를 휴대폰 화면의 길이에 맞춰
    늘릴 필요가 있습니다
  • 5:50 - 5:53
    그렇다면 우리는 뷰의 너비를 바꿔야 되겠죠
  • 5:53 - 5:54
    좋습니다 그래서
  • 5:54 - 5:56
    여기 미리보기를 끄겠습니다
  • 5:56 - 5:59
    그리고 여기 너비를 보죠
  • 5:59 - 6:02
    wrap_content 대신에
  • 6:02 - 6:04
    match_parent를 입력하겠습니다
  • 6:04 - 6:07
    됐습니다
    다시 미리보기를 보겠습니다
  • 6:07 - 6:09
    배율을 조정하고
  • 6:09 - 6:11
    됐습니다
    이제 훨씬 나아 보이네요
  • 6:11 - 6:12
    중앙에 맞춰졌습니다
  • 6:12 - 6:15
    그럼 여기 점수에 대해서도
    같은 방법을 쓰도록 하죠
  • 6:15 - 6:18
    여기에도 gravity를
    추가 하겠습니다
  • 6:18 - 6:21
    layout gravity의 gravity를 선택합니다
  • 6:21 - 6:23
    center_horizontal을 선택하고
  • 6:23 - 6:27
    이 너비를 match_parent로 바꾸겠습니다
  • 6:27 - 6:29
    됐습니다
    다시 미리보기로 보면
  • 6:29 - 6:31
    멋지네요
    이제 모두 다 정렬이 되었습니다
  • 6:31 - 6:32
    꽤 괜찮아 보입니다
  • 6:32 - 6:34
    서로 너무 븉어 있는 것 만
    제외 한다면요
  • 6:34 - 6:37
    이 버튼들 사이에
    숨 쉴 공간이 거의 없네요
  • 6:37 - 6:41
    각 텍스트 뷰에
    4의 padding을 할당하겠습니다
  • 6:41 - 6:47
    padding을 입력하고
    4dp를 입력하겠습니다
  • 6:47 - 6:48
    dp 기억하시나요?
  • 6:48 - 6:50
    그리고 지금 padding bottom이나
    다른 어떤게 아닌
  • 6:50 - 6:52
    단순히 padding을 사용하고 있습니다
  • 6:52 - 6:55
    그리고 이는 전체 텍스트 뷰 주변에
    4dp를 제공 할 겁니다
  • 6:55 - 6:58
    미리보기를 통해 확인해 봅시다
  • 6:58 - 7:00
    좋습니다
    공간이 조금 더 주어졌군요
  • 7:00 - 7:05
    점수 텍스트 뷰에도
    같은 방법을 적용하도록 하겠습니다
  • 7:07 - 7:08
    됐습니다
  • 7:08 - 7:14
    이번엔 버튼에도
    같은 방법을 적용해 보겠습니다
  • 7:15 - 7:19
    음 많이 변한거 같진 않군요
  • 7:19 - 7:23
    좀 더 크게 조정하면 어떻게 될까요?
    예를 들면 8 정도?
  • 7:23 - 7:25
    20?
  • 7:25 - 7:27
    음 재밌네요
  • 7:27 - 7:30
    그러니까 이건 버튼 그 자체를
    크게 만드는 것 같네요
  • 7:30 - 7:32
    버튼을 크게 만드는 게 아니라
  • 7:32 - 7:34
    버튼 주변의 공간을
    크게 만들고 싶은데요
  • 7:34 - 7:37
    사실 layout_margin이
    이 작업에 더 적합합니다
  • 7:37 - 7:38
    기억해 두세요
  • 7:38 - 7:41
    padding은 실제로
    뷰 내부의 padding을 추가 하게 됩니다
  • 7:41 - 7:43
    반면에 margin은
    뷰 주변에 공간을 추가 시키죠
  • 7:43 - 7:46
    그러므로 이 부분을
    layout_margin으로 바꾸겠습니다
  • 7:46 - 7:48
    8dp를 넣겠습니다
  • 7:48 - 7:50
    음 더 나아 보이네요
  • 7:50 - 7:53
    이제 이 두 뷰 사이의
    공간이 생겼습니다
  • 7:53 - 7:56
    그러므로 다른 버튼에 대해서도
    같은 작업을 하겠습니다
  • 7:56 - 7:58
    padding이 아니라
    margin 입니다
  • 7:58 - 7:59
    정확하게는
    layout_margin이죠
  • 7:59 - 8:01
    됐습니다
    이제 훨씬 나아 보이네요
  • 8:01 - 8:04
    만약 여러분이 padding 4가 아닌
    padding 5를 사용했다든지
  • 8:04 - 8:07
    제가 한 것과 다른
    attribute을 사용했더라도
  • 8:07 - 8:08
    문제 없습니다
  • 8:08 - 8:11
    지금 이 단계에선 일단 보기 쉽게 만드는 게
    포인트란 걸 기억해 주세요
  • 8:11 - 8:16
    폰트 크기라던가 화려한 색 등은
    이 후 단계에서 고려하겠습니다
  • 8:16 - 8:18
    됐습니다
  • 8:18 - 8:20
    멋지게 완성 되었습니다
    이 단계는 마무리 하겠습니다
タイトル:
07-23 The Stages - Solution
概説:

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
UD837 - Android for Beginners
Duration:
08:22

Korean subtitles

改訂