게임명_GuessNumber_02_레이아웃 디자인A

디자인

레이아웃

 

본격적으로 게임 GuessNumber (숫자 맞추기)를 만들어 보자.

 

레이아웃 디자인의 기본적인 방법은 '첫 프로젝트 만들기'에서 다루었다.

그래서 여기서는 되도록 핵심적인 부분만 언급한다.

'첫 프로젝트 만들기'를 먼저 학습한 후 이 글을 읽기 바란다.

 

안드로이드 스튜디오가 3.6.2로 업그레이드 되었다.

3.5 버전과 디자인에서 일부 바뀐 모습이 보이는데 만들면서 확인한다.

 

새 프로젝트 만들기

 

안드로이드 스튜디오를 실행한다.

 

 

새 프로젝트를 만들기 위해 Start a New Android Studio porject를 클릭한다.

 

 

Empty Activity (빈 액티비티)를 선택하고 Next(다음) 버튼을 클릭한다.

 

 

Name(이름)에는 GuessNum을 입력하고 Language(언어)는 Kotlin을 선택한다.

Num은 Number(숫자)의 줄임말이다.

Minimum SDK는 API19 이상으로 설정하여 98% 정도의 휴대폰에서 게임을 할 수 있도록 한다.

다 됐으면 Finish(종료)를 클릭한다.

 

준비가 완료되면 위와 같은 첫화면이 나타난다.

 

레이아웃 디자인 _ View 등록하기

 

먼저 디자인을 하기 위해 activity_main.xml 탭을 클릭한다.

 

 

깨끗한 상태에서 만들기 위해 기존에 만들어져 있는 TextView를 삭제한다.

TextView위에서 마우스 오른쪽 클릭 후 Delete(삭제)를 클릭한다.

 

게임 화면을 보고 필요한 View를 왼쪽의 Palatte 에서 드래그로 가져와 대충 위치를 잡자.

 

필요한 View는 다음과 같다.

 

• TextView는 4개
• 문자를 입력할 수 있는 editText인 Plain Text는 1개
• Button 2개

 

 

TextView를 오른쪽 디자인 창으로 끌어서 놓는다.

이런 식으로 대충 적당한 위치에 아래와 같이 View들을 등록한다.

 

여기서 중요한 점을 지적한다.

Component Tree에 등록된 View(뷰) 7개의 형태를 보자.

제일 왼쪽에는 Ab, 밑줄있는 Ab, 회색 사각형이 있다.

이것은 View의 종류 ( 문자, 문자입력, 버튼 )을 나타내는 아이콘이다.

 

그 다음에 있는 textView , editText , button은 View의 Type(타입, 유형)을 나타낸다.

코틀린에서 변수에 지정하는 바로 그 타입(Type)이다. 

나중에 코드 작성하면서 변수를 만들 때 이 Type을 사용하게 된다.

 

그 다음에 있는 " " 큰따옴표는 String(문자열)을 나타낸다.

 

View id 수정하기

 

먼저 각 View(뷰)의 id 부터 수정하자.

View id는 뷰의 이름에 해당한다.

코딩할 때 직접 참조하는 것이 View의 이름인 id이다.

그러므로 id를 보면 어떤 종류의 View인지 그리고 어떤 용도로 사용하는 지 바로 알 수 있도록 이름을 짓는 것이 좋다.

나는 View의 종류와 이름을 붙여서 만든다.

예를 들어 첫번째 View는 제목(Title)을 입력할 텍스트뷰(textView)이므로 textViewTitle 처럼 지으면 된다.

 

 

왼쪽 Component Tree에서 첫번째 textView를 선택하고 오른쪽 Attribute(속성)창 id에 textViewTitle이라고 입력한다.

 

 

같은 방법으로 모든 View의 id를 위와 같이 수정하자.

 

String Manager(문자열 매니저)

 

그 다음은 View에 처음 표시되는 문자열을 입력해야 한다.

textViewTitle(텍스트뷰 타이틀)의 문자열인 Guess the Number!를 오른쪽의 text 속성에 직접 입력해도 되지만 나중에 한글로 번역하거나 문자열 관리를 위해 string문자열로 입력한다.

 

안드로이드 스튜디오가 업그레이드 되어 resource(리소스)를 입력하는 방법이 조금 바뀌었다.

오른쪽 속성창에 있던 리소스 등록 단추는 그대로 있고 화면 제일 왼쪽에 있는 세로 탭에 Resource Manager 탭의 기능도 조금 바뀌었다. 

 

 

이 리소스 탭을 이용하면 View의 리소스를 한꺼번에 편리하게 입력할 수 있다.

Resource Manager 탭을 클릭하자.

 

리소스 매니저 창이 나타난다.

노란색 단추를 누르면 창을 닫을 수 있다.

지금은 View에 들어갈 text(텍스트)를 입력해야 하므로 String(문자열)을 클릭한다.

 

'첫 프로젝트 만들기'에서 배웠듯이 안드로이드 스튜디오에서 text(텍스트)는 모두 String에서 관리한다.

String에서 등록하는 텍스트는 strings.xml 파일에 저장된다.

능숙해지면 strings.xml 파일을 열어서 직접 등록하거나 수정할 수 있다.

여기서는 위의 리소스 매니저 창에서 등록하기로 한다.

 

 

현재 String 탭에는 등록된 문자열이 app_name(앱 이름)인 GuessNum 하나만 있다.

이것은 처음에 프로젝트 이름을 입력할 때 적었던 문자열이다.

이렇듯 시작부터 모든 문자열은 String에서 관리한다는 것을 기억하자.

 

새 문자열을 추가하려면 왼쪽에 있는 + 를 누르고 String Value를 클릭한다.

 

 

제일 먼저 textViewTitle의 문자열을 등록하자.

아래 그림처럼 Resource name(리소스 이름)에는 title ,

Resource value(리소스 값)에는 Guess the Number!를 입력하고 OK클릭한다.

리소스 이름은 소문자로 시작하고 두번째 단어가 있으면 변수명과 구분하기 위해 언더바( _ )로 연결한다.

이름을 만들 때 이런 식으로 자신만의 규칙을 정해서 작성하는 것이 좋다.

 

 

같은 방법으로 아래 문자열을 하나씩 등록하자.

게임에 사용할 모든 문자열을 등록하는 작업이다.

 

리소스명

리소스값

 

guess_number

Guess what! : %1$s

 

input_number

%1$s

 

text_view_hint

Hint : %1$s

 

try_count

Tried: %1$d

 

enter

ENTER

 

reset

RESET

 

edit_text_hint

Enter a number(0~100)

 

hint_correct

Hint: Correct!

 

hint_smaller

Hint: A smaller number!

 

hint_larger

Hint: A larger number!

 

hint_first

Hint: Put in the blank a number

 

 

마지막 리소스까지 등록한 후 strings.xml파일을 열어보면 아래와 같다.

 

 

 

이제 오른쪽 위의 닫기 버튼을 눌러서 창을 숨기고 방금 등록한 리소스를 View의 text 속성에서 연결하자.

 

 

Component Tree에서 textViewTitle을 선택한 후 오른쪽 text 속성 끝에 있는 Pick a Resource 버튼을 클릭한다.

 

View의 id 끝부분이 스트링 리소스 이름과 같게 지었으므로 그것을 찾아 선택하면 된다.

리소스 매니저 창에서 title을 선택한 후 OK클릭한다.

그러면 디자인 창에 등록되어 있던 문자열이 자동으로 나타난다.

 

같은 방법으로 나머지 View들도 text 속성에서 리소스를 선택해 준다.

완성하면 아래와 같이 등록했던 문자열들이 들어가 있는 모양이 될 것이다.

글자 크기나 위치 등은 나중에 조정할 것이므로 지금은 신경 쓸 필요없다.

 

그리고 희안하게 생긴 문자열이 보인다.

%1$d

%1$s

 

이것은 placeholder(플레이스 홀더)라고 한다.

place는 장소, 자리라는 뜻이고, holder는 소유자, 보유자라는 뜻이므로 place holder는 '자리 소유자'라는 말이다.

이것은 코딩에서 무엇을 넣어야 할 곳에 넣는 것을 대신하는 표시자 역할을 한다. 

 

%는 문자, 1$는 첫째 인자를 나타낸다.

끝에 붙은 d는 decimal(십진법)의 첫자를 사용해서 숫자를 나타내고

s는 string(문자열)의 첫자를 사용해서 글자를 나타낸다.

그러므로 %1$d는 이곳에 문자와 첫째 인자로 '숫자'를 넣는다는 걸 나타내고

%1$s는 문자와 첫째 인자로 '문자열'을 넣는다는 표시를 나타낸다.

 

 

잠시 쉬었다 하자!

 

 

Constraint (제약) 만들기

 

이제 디자인 창을 보면 Component Tree 의 View옆에 경고 표시들이 나타나 있다.

마우스 포인터를 대면 다음과 같은 메시지가 나타난다.

 

 

그 내용은 다음과 같다.

'이 뷰는 아직 제약되어 있지 않다. 디자인할 때 위치만 있기 때문에 제약을 추가하지 않으면 실행했을 때 0,0 위치로 이동할 것이다.'

 

지금 상태에서 게임을 실행해 보면 제일 왼쪽 위 구석으로 모든 View들이 겹쳐져 보일 것이다.

각 뷰들을 제약하지 않으면 디폴트(기본값)인 0,0 위치로 모두 이동하기 때문이다.

 

이제 각 뷰들의 constraint(제약)을 만들어 보자.

제약에 대해서는 '첫 프로젝트 만들기'에 설명이 있을 것이다.

 

안드로이드 스튜디오에는 constraint을 자동으로 만들어 주는 infer Constraints(위 빨간색 단추)가 있다.

하지만 사용해 보니 생각한 대로 잘 되지 않아서 여기서는 직접 하나씩 만들기로 한다.

옆에 있는 노란색 단추는 제약을 모두 끊어버리는 버튼이다.

하다가 마음에 잘 안되면 이걸 누르고 다시 하면 된다.

 

constraint(제약)을 디자인할 때 중요한 점이 있다.

앱을 세로로 놓았을 때와 가로로 놓았을 때 제대로 보이는 지 확인하면서 만들어야 한다.

한 방향으로만 실행할 때는 별 문제가 안된다.

지금 세로 방향을 가로로 해보자.

아래 그림처럼 Landscape를 선택하면 가로로 바꿀 수 있다.

 

방향 회전 버튼을 눌러서 Landscape를 선택하면 위 그림처럼 단추 부분이 보이지 않는다.

모든 View들이 가로,세로 방향에서 모두 적절한 위치에 놓이게 하는 요령을 여러 번의 시행착오를 통해 얻었다.

그것은 중간 부근에 있는 View를 기준으로 잡고 다른 View들을 constraint로 연결하는 것이 가장 좋았다.

더 좋은 방법이 있을 수도 있다.

 

이제 제약을 만들어 보자.

여기서는 textViewTryCount를 기준으로 정했다.

이 View는 기준이므로 4방향 모두 화면(스크린) 끝부분에 제약을 걸 것이다.

 

먼저 textViewTryCount 뷰를 선택하고 Layout 창의 Constraint Widget에서 Layout-width(레이아웃 넓이) 와 Layout-height(레이아웃 높이)를 Match Constraint로 바꾼다.

 

위 그림에서 빨간 테두리 안에 모양과 같을때 까지 클릭한다.

match constraint로 선택하면 아래쪽 녹색 테두리 처럼 넓이와 높이가 0dp가 될 것이다.

빨간 테두리 안의 선을 클릭하지 않고 처음부터 녹색 테두리에 있는 레이아웃 넓이(layout_width)와 높이(height)를 match constraint로 선택해도 된다. 자신이 편한 방법으로 하면 된다.

어쨌든 match는 레이아웃 끝에 연결한다는 뜻이라는 것만 기억하자.

 

이제 constraint를 걸어보자.

제약을 건다는 것은 비유하자면 느슨한 고무줄로 어떤 부분에 갈고리로 연결해 놓는다고 생각하면 된다.

위 상태에서 제약을 걸려면 파란색 나사 + 처럼 생긴 부분을 4개 모두 클릭하면 된다.  

그러면 아래 그림처럼 스크린 4방으로 화살표가 연결될 것이다.

 

 

위 상태는 고정된 간격을 가진 상태이므로 고무줄로 만들기 위해 숫자 옆 삼각형을 클릭해서 모두 0으로 바꾸자.

그러면 뷰의 범위가 4방으로 확장된다.

 

 

이제 다시 본래 모습으로 되돌리기 위해 layout_width에서 wrap_content를 선택한다.

wrap은 '감싼다'라는 뜻으로 뷰를 감싸는 정도의 크기로 맞출 때 사용한다.

layout_height도 wrap_content를 선택한다.

이 작업은 앞에서 빨간 사각형 안의 선을 클릭해도 같다.

다 됐으면 아래와 같은 모양이 된다.

 

 

위의 그림이 스크린 4방에 constraint가 걸려있는 상태이다.

이 상태에서는 뷰의 한 가운데를 마우스로 움직여도 수치(숫자)가 변하지 않는다.

이제 기준이 되는 뷰를 스크린에 제약을 걸었다.

 

휴~힘들다.

이번 글은 여기까지만 하자.

 

Wraven...