[Kotlin] 시작하기 (hello world)

android studio도 설치했고 대략적인 실행법도 살펴보았으니 이제 android studio를 통해 app 만들기를 간단히 시작해 보도록 하겠습니다.

 

android studio를 실행하면 제일 먼저 다음과 같은 화면을 볼 수 있습니다. (만약 이전에 생성한 프로젝트가 존재한다면 좌측에 별도로 목록이 보일 수 있습니다.)

 

어떤 경우는 위와 같은 화면이 열리지 않고 지난번 생성했던 프로젝트가 그대로 열릴 수도 있습니다. 그런경우에는 그 상태에서 'File -> Settings'로 들어가 좌측 'Appearance & Behavior -> System Settings'를 선택한 후

 

'Reopen last project on startup'을 체크해제하고 다시 실행하면 됩니다.

 

다시 본론으로 돌아와 첫화면에서 'Start a new Android Studio project'를 선택하면 다음과 같이 Project Template 선택하는 화면이 표시됩니다.

 

편하게 시작할 수 있는 여러가지 템플릿이 보이는데 우선은 이 중에서 'Empty Activity'를 선택하고 'Next'버튼을 누릅니다. 그러면 다음과 같이 프로젝트를 시작하기 위한 설정 화면을 볼 수 있습니다.

 

Name은 임의의 프로젝트명입니다. 예제에서는 이름을 'MyfirstApp'으로 하였습니다.

Package name은 애플리케이션 ID를 의미하며 여기는 모두 소문자로만 입력되어야 합니다. Save location은 프로젝트가 저장되는 경로로서 원하는 위치를 지정할 수 있습니다.

 

Language는 프로젝트를 개발하는데 사용하는 언어입니다. Minimum SDK는 App 개발 시 최소한으로 사용될 SDK 버전이며 예제에서는 API 16: Android 4.1 (Jelly Bean)이 선택되어 있고 하단에 이 SDK를 지정해서 App을 생성하는 경우 전체 안드로이드 디바이스 중 거의 99.8%의 디바이스에서 App을 실행할 수 있다는 것을 보여주고 있습니다.

 

위와 같이 설정하고 'Finish'버튼을 누른 후 잠시기다리면 다음과 같은 화면을 볼 수 있습니다.

 

처음 보이는 화면에서 오른쪽 화면은 코드 입력창이며 코드 파일의 확장자가 kt인 것을 보니 kotlin파일의 확장자임을 알 수 있습니다. 상단 탭에서 왼쪽 xml로 끝나는 탭을 선택하면 현재 작업 중인 App 화면을 볼 수 있습니다.

 

여기에서 버튼이나 텍스트입력등 다양한 요소를 화면에 넣어 배치할 수 있는데 이 화면에 사용되는 파일은 activity_main.xml이며 res->layout에 위치하고 있습니다. 현재 화면상으로는 2개의 디자인 영역을 볼 수 있는데 오른쪽은 blueprint라고 하여 위젯의 종류와 테두리를 보여주는 영역입니다.

 

참고로 디자인영역은 상단의 Select Design Surface버튼을 통해 Design모드를 설정하여 원하는 형태의 화면을 볼 수 있습니다.

 

또한 바로 오른쪽에 있는 Orientation for Preview버튼을 사용하면 화면이 세워져 있는 경우는 물론 가로로 회전한 경우의 디자인도 볼 수 있습니다.

 

이것으로 android가 app의 화면을 구성할 때 xml형식의 파일을 사용한다는 것을 알 수 있습니다. 물론 activity_main.xml파일 외에 다른 xml파일이 존재할 수 있고 따라서 그만큼 여러 개의 App 화면을 추가할 수 있는 것입니다.

 

xml파일이 화면을 구성한다고 해서 이미지같은 그림파일의 형태는 아니고 이것도 XML 형식으로 된 하나의 코드 파일입니다. xml파일 안에 작성된 요소 하나하나가 화면에 층을 이루어 전체적인 레이아웃을 만들어냅니다. 실제 디자인 화면의 오른쪽 상단에서 Code나 Split을 선택하면 xml파일 안에 작성된 코드를 확인할 수 있습니다.

 

xml을 통해 화면을 구성하는 형태이기에 필요에 따라서는 디자인영역에서 마우스로 필요한 요소를 끌어다 놓는 작업 대신 xml파일을 직접 수정하여 화면을 구성하는 경우도 종종 있을 수 있습니다.

 

실제 다음과 같이 디자인모드에서 button하나를 끌어다 놓으면

 

xml의 구조도 같이 바뀌는 것을 볼 수 있죠.

 

res -> layout에 있는 activity_main.xml파일뿐만 아니라 다른 xml파일도 더블클릭하면 위와 같은 디자인 화면을 볼 수 있으며 현재 app의 첫 화면은 setContentView(R.layout.activity_main) 구문(코드창에서의 10행)을 통해 res(R)->layout(layout)에 있는 activity_main.xml파일로 첫 화면을 나타내도록 되어 있음을 알 수 있습니다.

 

위에서 버튼 하나를 디자인영역에 끌어다 놓았는데 배치한 버튼을 선택하면 다음과 같이 속성 창을 통하여 선택한 요소를 상세하게 편집할 수 있는 창이 나타나게 됩니다.

 

속성 창에서 가장 큰 영역을 차지하고 있는 Constraint Weget은 위젯의 크기나 위치를 조절하기 위한 영역입니다. 이 영역에서 상하좌우 +모양의 버튼을 클릭하면 다른 요소와 떨어져 있는 거리를 볼 수 있습니다. 예를 들어 예제에서 상단의 +를 선택하면 현재 button요소는 상단의 Hello world! 를 표시하고 있는 TextView요소와 34dp만큼 떨어져 있다는 내용이 표시됩니다.

 

내부에 있는 wrap content는 요소의 크기모드에 관한 설정으로서 다음과 같은 의미를 가지고 있습니다.

 

Wrap Content : 요소의 크기를 내부요소의 크기에 맞게 설정합니다. 예제에서는 Button의 내부요소가 BUTTON이라는 글자입니다.

Fixed : 요소의 가로, 세로 속성값에 따라 크기를 지정합니다.

Match Constraint : 상하좌우 각 Constraint 값에 따라 크기를 지정합니다. 

따라서 크기를 Fixed 모드로 맞추고 layout_width를 100, layout_height를 100으로 하면 크기가 가로세로 100으로 고정딤을 의미합니다.

 

그런데 가만히 보니 붉은색으로 느낌표(!)가 나타나 있는걸 볼 수 있군요. 뭔가 잘못되었다는 얘기입니다. 실제로 에러 내용을 보니 앱이 동작할 때는 0,0의 위치에서 요소가 배치되어 시작될 것이라고 합니다.

 

이 부분은 차근차근 알아보기로 하고 일단 무시하기로 합니다. 실제 app을 동작할때 어떻게 되는지 직접 확인해 보겠습니다.

 

이제 하면에 버튼을 배치했으니 버튼을 눌렀을때 동작하는 코드를 만들어 보도록 하겠습니다. 우선 디자인 화면에서 속성 창의 id값을 mybutton으로 바꿔줍니다.

 

id는 요소의 교유한 이름을 의미합니다. 필요하지 않다면 기본id 그대로 사용할 수도 있으나 추가한 요소를 확실하게 구분하기 위해 id를 바꿨습니다.

 

그리고 다시 코드창으로 들어와 onCreate 메서드 안에 다음과 같은 코드를 추가합니다.

mybutton.setOnClickListener {
	textView.setText("안녕!")
}

위 코드내용은 textView의 문자열 내용을 '안녕!'으로 바꾸는 코드입니다. textView는 화면에서 Hello world! 를 화면에 표시하던 요소의 id입니다.

 

전체 내용은 다음과 같습니다.

 

참고로 mybutton을 입력할때나 setOnClickListener을 입력할 때 다음과 같이 자동완성 코드가 나타나는 걸 확인할 수 있습니다.

 

온전하게 전체를 타이핑할 필요없이 자동으로 나타나는 코드를 선택해 코드를 완성시키면 편리합니다. 특히 요소의 id를 입력할 때는 웬만하면 자동완성 코드를 선택하는 것이 좋은데 이 자동완성 코드는 상단의 import영역에 다음과 같은 코드를 자동으로 추가시켜 주기 때문입니다.

import kotlinx.android.synthetic.main.activity_main.*

코드 편집창에서 요소의 id로 요소에 접근하려면 상단의 내용이 반드시 import 되어야 합니다.

 

위와 같이 코드가 완성되었으면 Run 'app'버튼을 눌러 App을 실행합니다.

 

요소의 위치가 경고된 대로 시작하는군요... 일단 무시하고 버튼을 눌러보겠습니다.

 

의도한 대로 내용이 바뀌었습니다.

 

간단하게 app을 만들어 Emulator에서 구동해 보았는데 다음 시간부터 계속해서 진행하도록 하겠습니다.

 

수고하셨습니다.