첫 프로젝트 만들기_06_button 버튼 넣기

버튼 만드는 방법

 

지금까지는 프로젝트를 만드는데 필요한 기본적인 내용을 살펴보았다.

이번 글 부터 본격적으로 첫 프로젝트에 필요한 내용을 만들어 볼것이다.

 

이번에는 screen(화면)에 버튼을 넣어 본다.

버튼과 같은 구성요소들은 Palette에 준비되어 있다.

버튼을 넣는 방법은 3가지가 있다.(03 레이아웃에서 한번 설명했다)

 

1. 팔레트 창에서 버튼을 마우스로 끌어서 아래의 Component Tree창에 놓는다.
2. 팔레트 창에서 버튼을 마우스로 끌어서 오른쪽 스크린에 놓는다.
3. Text 편집창에서 직접 코드를 입력한다.

편한 방법을 사용하면 된다.

하지만 Design창에서 잘 안되거나 복잡한 구조인 경우에는 Text 편집창에서 직접 코드를 입력하는 것이 필요하다.

 

Component Tree창의 입력한 버튼 오른쪽을 보면 경고 표시가 나타나 있다.

이것은 추가한 구성요소 설정에 문제가 있다는 것을 나타낸다.

 

버튼의 문제 해결과 관련된 설정은 나중에 하기로 하고

먼저 TextView(텍스트뷰)인 Hello Kotlin!의 모양을 바꿔보기로 한다.

Component Tree에서 TextView를 클릭하여 선택한다.

 

오른쪽의 Attribute(속성) 창에서 layout_width(레이아웃 넓이)는 현재 wrap_content로 설정되어 있다.

이 옵션은 화면에서 보이는 것 처럼 텍스트를 둘러싸는 레이아웃을 가지는 것이다.

삼각형 모양의 옵션 버튼을 눌러서 match_constraint로 바꿔본다.

이것은 레이아웃을 constraint 크기에 맞추는 옵션이다. 

계속해서 layout_height(레이아웃 높이)도 match_constraint로 바꿔본다.

 

이번에는 layout_width를 200dp, layout_height는 100dp로 바꿔보자.

이번에는 글자를 레이아웃의 중앙에 오도록 설정을 바꿔보자.

이것을 하려면 Attribute(속성)의 gravity(중력) 속성을 사용하면 된다.

gravity속성으로 이동하기 위해서는

속성창 위쪽에 있는 돋보기 모양의 검색을 클릭한 후 gr를 입력하거나

오른쪽의 스크롤을 아래로 내려 gravity로 이동한다.

gravity왼쪽의 삼각형을 클릭하면 다양한 위치로 바꿀 수 있는 옵션을 볼 수 있다.

 

텍스트를 가운데 위치로 하려면 center(중앙)을 체크한다.

다른 옵션들도 체크해서 어떻게 변하는 지 확인해 보자.

이제 지금까지의 작업을 확인하기 위해 AVD(가상장치) 또는 실제폰으로 실행(Run)시켜보자.

 

그런데 스크린의 모양과 가상장치의 화면에 차이가 있다.

앞에서 추가한 버튼의 위치가 다르다.

이 문제는 다음 글에서 살펴보기로 한다.

끝.