게임명_GuessNumber_03_레이아웃 디자인B

앞 글의 제약 만들기를 계속한다.

Constraint

 

이번에 만들 제약은 각 View들의 가로,세로 제약이다.

이 게임에서는 각 뷰들을 모두 가운데로 정렬하게 만들것이다.

그러므로 뷰들의 가로, 세로를 screen(화면) 왼쪽과 오른쪽에 제약을 걸어주면 될 것 같다.

 

먼저 제일 위에 있는 뷰인 textViewTitle을 선택한다.

왼쪽과 오른쪽 제약을 screen에 걸어보자.

 

뷰의 왼쪽,오른쪽에 있는 동그라미를 마우스로 끌어서 화면의 좌,우로 끌어서 해도 되지만

여기서는 오른쪽 나사 모양의 단추를 클릭하는 방법이 조금 더 편한것 같다.

 

 

왼쪽,오른쪽 나사버튼을 클릭한 후 숫자를 다시 0으로 바꿔주면 된다.

뷰의 글자 길이 만큼만 레이아웃을 만들것이므로 아래 width, height는 wrap_content(컨텐트 감싸기)로 한다.

숫자를 0으로 바꾸면 아래 그림처럼 될 것이다.

 

 

이제 textViewTryCount는 제외하고 나머지 View들도 같은 방법으로 좌,우 제약을 걸어주자.

마지막 리셋 버튼까지 좌우 제약을 걸면 아래 그림처럼 될 것이다.

 

 

이제 좌우 제약 거는 것 보다는 조금 복잡한 위와 아래 제약을 걸어줘야 한다.

핵심은 textViewTryCount를 기준으로 위쪽에 있는 뷰들은 자신의 바로 아래에 제약을 걸고

아래쪽에 있는 뷰들은 자신의 바로 위쪽 뷰에 제약을 건다.

 

직접 해보는게 제일 좋다.

textViewTitle을 선택한다.

잘 보기 위해 아래 그림 처럼 핑크색 + 를 눌러서 화면을 확대하자.

현재의 작업은 오른쪽 녹색 테두리에 경고 Not Vertically Constrained(수직 제약이 없음)을 해결하는 것이다.

 

 

textViewTitle의 아래쪽 동그라미를 마우스로 클릭한 상태에서 아래로 끌면 바로 아래 뷰의 동그라미가 나타난다.

아래쪽 동그라미로 연결하자.

참고로 만약 하다가 잘못 됐을 때 Ctrl+Z키를 한번씩 누르면 다시 뒤로 되돌아 간다. 

 

오른쪽에 현재 상태를 나타내는 설명이 나온다.

Bottom -> TopOf textViewNumber (0dp)

 

이 내용의 뜻은 다음과 같다.

바닥 -> textViewNumber 위에 

 

그래서 현재 뷰는 '바닥이 textViewNumber 위로 화살이 꽂혀있고 간격은 0이다'라는 뜻이다.

 

위 경우처럼 두 뷰가 붙어있으면 어떤 뷰가 어디에 제약되어 있는지 잘 알기 어렵다.

그때 오른쪽 제약 설명부분을 보면 쉽게 알 수 있다.

 

붙은 것을 떼기 위해 숫자를 8로 바꾸자.

 

계속해서 textViewNumber, editTextInputNum, textViewHint를 순서대로 아래쪽 뷰 TopOf 에 제약을 걸고 간격을 8로 수정한다.

textViewHint까지 완성하면 아래 그림처럼 될 것이다.

 

 

이제 textViewTryCount 아래 쪽에 있는 두 버튼에 제약을 걸자.

이 두 버튼은 위쪽을 연결하면 된다.

Reset 버튼 위쪽을 Enter 버튼 아래쪽으로, 

Enter버튼 위쪽을 textViewTryCount 아래쪽으로 연결하자.

간격은 일단 8로 한다.

 

 

다 됐으면 이제 textViewTryCount를 마우스로 클릭한 상태로 위,아래로 드래그 해보자.

다른 뷰들이 자동으로 따라서 움직인다.

이 textViewTryCount 뷰를 기준으로 제약 올가미에 걸려있는 상태이기 때문이다.

 

마지막으로 제일 위에 있는 뷰의 위쪽 제약을 걸어주자.

 

 

아래에 제약을 완성한 모습이다.

 

 

가로 모드로 바꿔보자.

 

 

이렇게 큰 테두리, 레이아웃, 제약 등을 완성한 후에 나머지 자잘한 부분을 손보면서 완성해 나가는 것이 좋다.

그렇지 않고 처음부터 한 부분을 완벽히 해 놓으면 나중에 다시 수정해야 하는 불편함이 생길 수도 있다.

이제 남은 것은 텍스트의 크기와 색, 배경 그림 넣기 정도만 남았다.

 

잠시 쉬었다가 마무리 하자!

 

 

Text Color (글자색)

 

이번에는 글자의 색(color)을 바꾼다.

 

textViewTitle 뷰를 선택한 후 오른쪽 속성창 위에 있는 검색창에 'color'을 입력한다.

 

속성 textColor 오른쪽에 리소스 선택 버튼을 클릭한다.

 

 

app(3)은 현재 앱에 설정되어 있는 색이 3개라는 뜻이다.

여기에는 언제라도 색을 추가할 수 있다.

색 추가하는 방법은 '첫 프로젝트 만들기'에서 설명한 적이 있다.

 

android(28)은 안드로이드 스튜디오에서 기본적으로 가지고 있는 색의 개수이다.

여기서는 앱에 있는 파란색을 선택한다. 

파란색을 선택한 후 OK버튼을 클릭한다.

 

두번째 뷰도 파란색으로 정하고

세번째 editTextInputNum 뷰는 textColor , textColorHint 2개의 색을 바꾼다.

android(28)에 있는 색 중에서 오렌지색과 빨간색을 선택한다.

 

그 아래에 있는 Hint와 Tried 뷰는 colorAccent 색을 선택한다.

 

 

이번에는 텍스트의 크기(size)를 바꾸자.

제일 위에 있는 textViewTitle을 선택하고 검색창에서 size를 입력한다.

textSize를 24dp로 바꾼다.

 

 

아래 뷰의 텍스트 크기를 18dp로 바꾼다.

 

• textViewNumber
• textViewHint
• textViewTryCount

 

나머지 버튼과 editTextInputNum의 글자 크기는 디폴트(기본값)으로 한다.

 

다 됐으면 제약 기준으로 잡은 textViewTryCount 뷰를 마우스로 끌어서 적당한 위치로 조정한다. 

세로 모양으로 바꿔서 다시 확인한다.

 

 

이번에는 editTextInputNum 뷰의 글자가 입력창 한가운데로 오게 하자.

뷰를 선택하고 속성 검색창에 text를 입력한다.

 

textAlignment를 center로 바꾸면 가운데 맞춤을 할 수 있다.

align은 조정하다, 맞추다는 뜻이다.

 

이제 모두 끝났다. 가로, 세로로 했을 때 모든 뷰가 적당한 위치에 자리잡은 것 같다.

검색창을 닫으려면 오른쪽 x 단추를 누르면 된다.

 

 

마무리

 

그런데 editTextInputNum에 경고 아이콘이 있다.

Missing 'autofillHints' attribute라는 메시지가 나온다.

힌트 자동 채우기 속성이 빠져있다는 말이다.

이 기능은 앱에서 문자를 칠 때 전에 입력했던 글자를 보여주는 기능인 것 같다.

아이콘을 클릭해 보면 설명이 나온다.

 

Warnings(경고)가 2개나 있다.

하나씩 해결해 보자.

 

첫번째 에러(autofillHints)를 대충 읽어보면 이 기능이 빠져있는데 어떻게 처리할건지 물어보는 내용이다.

여기서는 게임을 만들고 있으므로 별로 필요없는 기능이다.

또한 API가 26이하인 폰에서는 문제가 생길 수도 있다.

 

제일 아래쪽으로 가보면 Fix(고침) 2가지 옵션이 있다.

중요하지 않다는 옵션의 Fix 버튼을 클릭한다.

 

경고 문구가 하나 더 남았다.

Missing accessiblility label (접근할 수 있는 레이블이 없음)

 

editTextInputNum은 글자를 입력할 수 있는 editText (Plain Text)이다.

이 뷰에는 입력 상자 안에 힌트나 설명를 넣을 수 있는 기능이 있다.

앞에서 텍스트 색을 바꿀 때 텍스트 색은 오렌지색, 힌트는 빨간색으로 정했었다.

그 힌트 글자가 없다는 경고이다.

스트링 리소스를 빼먹고 넣지 않은것 같다.

editText의 hint 속성에 넣을 String(문자열)을 추가 하자.

 

리소스 매니저 창을 열고 이름은 edit_text_hint , 값에는 Enter a number(0~100) 이라고 입력하자.

 

그 다음에 hint 속성에서 방금 만든 리소스를 선택해 준다.

오른쪽 속성 검색창에 hint를 입력한 후 Pick a resource 버튼을 눌러서 edit_text_hint를 선택한다.

 

이제 에러 메시지가 사라졌다.

힌트 메세지는 나중에 코드 작성할 때 나오게 할 것이다.

 

editText를 터치하면 숫자 패드만 나타나도록 해보자.

 

속성창에서 inputType 속성을 찾고 그 옆에 깃발을 클릭한다.

현재는 number와 text를 입력할 수 있는 상태이다.

 

제일 위쪽에서 Clear(비움)을 누른 후 number만 체크한다.

실행해서 클릭하면 숫자패드만 나타난다.

 

 

배경 그림 넣기

 

이제 진짜 마지막으로 배경그림을 넣는것만 남았다.

 

배경 그림은 무료이미지를 얻을 수 있는 대표적인 사이트인 Pixabay에서 가져온다.

 

구글 검색창에 pixabay를 입력해서 사이트로 이동하자.

 

픽사베이 검색창에 question을 입력하고 엔터키를 치면 배경그림을 찾을 수 있다.

 

 

그림을 찾았으면 순서대로 무료다운로드 클릭 =>1280x1280 png 선택 =>다운로드 버튼 클릭한다.

 

다 받으면 폴더 열기를 누른다.

 

 

파일을 선택한 후 복사한다.(마우스 오른쪽 클릭 후 복사 또는 Ctrl+C )

복사한 파일을 안드로이드 스튜디오의 폴더에 넣어야 한다.

안드로이드 스튜디오로 돌아와서 왼쪽에 있는 project탭을 클릭한다.

 

 

drawable폴더를 선택한 후 붙여넣기 위해 Ctrl+V를 누르거나 마우스 오른쪽을 누르고 Paste(붙여넣기)를 누른다.

 

 

폴더를 선택하는 창이 뜬다.

 

이미지 파일을 넣을 수 있는 폴더는 2개이다.

drawable , drawable-v24 중에서 한 곳에 넣으면 된다.

drawable-v24폴더는 특별히 아이콘 이미지의 전경(foreground)에 사용하는 그림을 넣는 곳이다.

다음 기회에 설명한다.

 

OK버튼을 누른다.

 

 

파일이름을 img_background로 바꾸고 OK버튼을 누른다.

img는 이미지(image)의 준말이고 background는 '배경'이다.

 

 

이제 게임 프로젝트 폴더 안에 저장한 배경 그림 파일을 스크린에 등록한다.

배경 그림을 넣을 곳은 ConstraintLayout이다.

컨스트레인트 레이아웃을 선택한 후 오른쪽 속성 검색창에 back을 누르면 background 속성이 나타난다.

오른쪽 리소스 선택 버튼을 클릭한다.

 

등록돼 있는 img_background를 선택하고 OK를 누른다.

 

세로로 바꿔서 배경 그림이 잘 맞는지 확인한다.

이것으로 게임 Guess Number 디자인을 완성했다.

이제 디자인에 게임이 잘 작동하도록 코딩할 차례다.

다음 글에서 코틀린으로 코드를 작성해보자.

 

Wraven...