안드로이드 스튜디오 코틀린 이용한 간단 버튼 작성

안드로이드 스튜디오에서 간단하게 텍스트와 버튼박스 작성하는 법을 설명해 보겠습니다.
환경은 Windows이고 사용 버전은 4.1.3에서 만들었습니다. 코드는 코틀린을 사용하였습니다.

안드로이드 스튜디오를 시작해서 새 프로젝트를 만듭니다.
"Create New Project"를 눌러 다음으로 넘어갑니다.

"Empty Activity"를 선택하고 "Next"를 눌러줍니다.

"Name"에 프로젝트 타이틀을 설정하고 "Save location"에 프로젝트 생성할 위치 설정 해 주고 "Language"는 Kotlin (코틀린)으로 그외는 자동으로 선택된 옵션으로 하시거나 화면과 같이 설정해 주시면 되겠습니다. 설정 후 "Finish" 버튼을 눌러 새 프로젝트를 생성합니다.

조금 기다려 보면 선택한 디렉토리 위치("Save location")에 파일들이 생성된 걸 확인할 수 있습니다.

사용할 파일들은 두 가지 입니다. "activity_main.xml"과 "MainActivity.kt"
확장자 xml파일은 디자인, kt파일(kt는 코트린 파일을 의미)은 실행 코드 부분을 담당합니다.

디자인 부분을 담당하는 xml파일인 activity_main.xml파일을 보겠습니다. 우측 상단을 보면 Code, Split, Design 세 가지 뷰어 아이콘 버튼이 있고 말 그대로 Code는 디자인을 코드로 하고 Design은 마우스등으로 그려가며 디자인을 할 수 있고 Split은 Code와 Design을 반반씩 보여 줍니다. 각각 눌러보면 직관적으로 이해할 수 있습니다. 밑의 스크린은 Split탭이 선택되어 있는 화면입니다.

우측의 디자인 스크린내에 "Hello World!" 텍스트 박스를 클릭 해서 백스페이스키로 텍스트 박스를 지우면 왼쪽의 코드 창의 TextView 코드 단락이 지워지는 것을 알 수가 있습니다.

텍스트 박스 지우기 전

텍스트 박스 지운 후

①디자인 탭을 선택
②"TextView"와 "Button"등을 선택해 끌어다 넣을 수 있음
③하나의 "TextView"와 두개의 "Button"을 임의의 위치로 끌어다 넣는다
④실행 버튼을 눌러 실행된 디자인을 본다. (에뮬레이터 사용, AVD)

실행 화면은 밑과 같이 출력된다. 디자인의 절대적 위치, 상대적 위치등 상관 관계를 알려주지 않으면 좌측 상단에 모두 고정되어 겹쳐 나온다.

위의 에뮬레이터 실행 화면에서 우측상단의 "X"를 눌러 창을 닫고 메인 화면으로 돌아와 Design창에서 Code탭을 눌러 Code창의 코드를 보면 세개의 아이템 블럭이 생성된 것을 알 수 있다.

다시 Design탭을 눌러 Design 창으로 돌아가 "Infer Constraints" 아이콘을 누른다. 만든 아이템들의 위치를 추정해서 설정하는 기능

"Infer Constraints" 버튼을 누르기 전후의 코드를 비교 해 보면 이하와 같다. 코드 변화를 보면 어떻게 바꾸면 작동 될 것인지 대충 짐작이 갈 것이다.

실행을 해 보면 다음과 같이 정렬이 된 것을 볼 수 있다.

위의 실행 화면을 닫고 다시 메인 화면으로 돌아와 "Split"탭을 눌러 "Code"와 "Design"창 둘 다 보여지게 한 뒤 우측 디자인 창에서 버튼등을 클릭해 보면 위치 정보가 보여지며 코드와 비교해 보며 절대(Parent로 부터) 위치인지 상대(다른 버튼으로 부터) 위치인지를 알 수가 있다. 여기서 코드내의 숫자등을 수정을 해 보면 위치가 바뀌는 것을 확인할 수 있을 것이다. 현재 선택된 버튼인 빨간 박스들을 보면 전체 화면(parent)로 부터의 위치를 나타내고 파란 박스와 화살표를 보면 다른 버튼인 id인 button2로 부터의 위치를 나타내는 것을 알 수 있다.

"Design"탭을 디자인 창으로 돌아와 "Attributes"를 누릅니다.

우측에 "Attributes"패널이 나타나며 속성값을 설정할 수 있습니다. 밑의 화면내에서 흰색 화면위의 중앙에 있는 버튼을 선택하고 "text" 속성값을 "Button"에서 "Count"로 변경해 엔터를 쳐보면 버튼의 텍스트가 변합니다. 이 버튼을 클릭했을 때 실행되는 코드를 짜기 위해 "onClick"의 속성값에 임의의 이름을 설정합니다. 여기서는 "clickCount"라고 설정하였습니다. "onClick"에 대한 부분은 조금 뒤에 설명합니다. 이와 같이 모든 다양한 속성값을 디자인 창에서 설정할 수 있고 물론 코드에서 직접 입력해도 됩니다. 코드를 어떻게 입력해야 될 지 모를 때 디자인 창에서 속성값을 주어 바뀐 코드를 보며 코드창에서 코드로 어떻게 속성값을 설정하는지 이해할 수 있습니다.

"Code" 탭을 눌러 코드 창으로 가 보면 디자인 창에서 설정한 것이 코드로 입력되 있는 것을 알 수 있습니다.

텍스트 부분을 상황에 맞는 글로 바꾸고 코드를 짤 때 식별자인 id 이름은 그대로 사용해도 상관은 없지만 Button, Button2등등의 id 이름은 무엇을 의미하는지 모르니 id 이름도 바꾸었습니다. 빨간 색 코드 부분이 바뀐 부분입니다.

이제 조금 앞에서 "onClick"의 속성 이름에 "clickCount"으로 설정한 부분에 대해 설명을 드리겠습니다. "clickCount" 텍스트위에서 마우스를 클릭하면 빨간 느낌표 전구가 나타납니다. 그 걸 클릭해 옵션이 나타나면 "Create 'clickCount(View)' in 'MainActivity'" 를 클릭합니다.

그럼 MainActivity.kt 파일에 "fun clickCount(view: View) {}"란 함수의 뼈대가 자동으로 생성됩니다.

activity_main.xml 파일로 돌아가 Reset 버튼에도 함수 타이틀을 "clickReset"으로 하는 "onClick" 기능을 코드로 추가해 MainActivity.kt 파일에 "fun clickReset(view: View) {}"란 함수의 뼈대가 자동으로 생성되도록 만듭니다.

MainActivity.kt 파일에 동작에 필요한 함수 뼈대 두개 생성을 마쳤습니다. 드디어 디자인 관련 부분을 끝내고 함수 코딩을 하는 부분으로 넘어왔습니다.

MainActivity.kt 파일내에 밑과 같이 코드를 작성합니다.

실행 화면입니다. 버튼을 눌러가며 동작을 확인해 보시길 바랍니다.