Kotlin_첫 번째 앱 만들기

※본 포스팅은 안드로이드 생존 코딩 (오준석 지음) 책을 참고, 실습하여 작성한 포스팅입니다.

 

안녕하세요. 보안돌이 입니다.

지난 시간에는 프로젝트 생성 방법에 대해 알아보았습니다.

 

이번 시간에는 지난 시간에 이어 흐름을 알 수 있는 간단한 앱을 만들어 보겠습니다.

 

안드로이드 스튜디오의 기본 화면 구성은 크게 세 가지 영역이 있습니다.

우선 좌측에 프로젝트 창입니다.

상단에 Android라는 버튼을 클릭하면 보기 모드를 변경할 수 있습니다.

 

※가장 많이 사용하는 두 가지

Android : 안드로이드용으로 최적화된 모드입니다. 주로 이 모드로 작업합니다.

Project : 실제 폴더 구조대로 보는 모드입니다. Android 모드일 때는 보이지 않는 파일을 찾을 때 사용합니다.

 

중요한 파일, 폴더를 위주로 상세하게 알아보겠습니다.

 

■상세 설명

1. manifests

내부를 확인해 보면 AndroidManifest.xml이라는 파일이 있습니다.

해당 파일은 앱 구성을 기술한 파일입니다.

 

2.java

내부에는 소스 코드 작성 파일이 있습니다.

.kt 확장자는 코드를 작성합니다.

 

3.drawable

이미지 리소스 폴더입니다.

 

4.layout

.xml 확장자는 보이는 화면 즉, 레이아웃을 작성합니다.

※. kt확장자와. xml로 끝나는 확장자는 둘이 세트라고 봐야 합니다.

 

5.mipmap

앱의 아이콘 폴더입니다.

 

6.strings.xml

문자열 리소스 파일입니다.

 

화면 중앙에 에디터 창입니다.

여기서 소스를 작성하고 수정합니다.

 

하단의 기타 도구 창입니다.

여러 도구 중 주로 Logcat 탭을 자주 사용합니다.

여러 에러 메시지나 원인을 찾을 수 있는 각종 메시지를 확인할 수 있습니다.

 

그럼 이제 xml 파일을 더블 클릭하여 레이아웃 에디터를 열고 텍스트 뷰를 배치해보겠습니다.

레이아웃 에디터에 대한 상세 설명은 실습을 하면서 진행하도록 하겠습니다.

 

우선 화면에 보이는 "Hello World"를 클릭하고 Del을 눌러 삭제합니다.

위쪽에 자석 모양을 클릭하여 Autoconnect 모드를 켭니다.

Autoconnect 모드는 배치하는 뷰와 레이아웃 간에 자동으로 제약이 추가되게 됩니다.

 

※제약이란 배치하는 뷰가 어떻게 배치돼야 하는지를 결정하는 규칙입니다.

그 후 좌측 팔레트 창에서 TextView를 드래그하여 정 중앙에 놓습니다.

이때 주변에 점 선이 표시되며 제약이 자동 추가됩니다.

 

텍스트 뷰를 더블 클릭하여 우측에 속성 창에서 text속성을 수정하면 내용이 변경됩니다.

글자 크기를 변경하려면 textAppearance 속성을 변경하면 변경됩니다.

본격적인 앱 작성을 위해 TextView를 삭제하고 Button을 추가하겠습니다.

그 후 버튼 text를 보안돌이로 변경하고 id를 buttonTest로 변경하겠습니다.

id는 코드에서 참조하는 데 사용합니다. 따라서 의미가 명확한 id를 부여하는 게 중요합니다.

레이아웃을 작성하였으니 액티비티(. kt) 파일을 작성해 보겠습니다.

최상단 부분은 package 선언 부분입니다.

import문은 파일에서 사용하는 외부 클래스를 임포트 하는 구문입니다.

 

여기까지는 자바와 동일합니다.

클래스 선언 부분은 extends 대신 :(클론)을 사용하여 상속을 나타 냅니다.

 

class MainActivity : AppCompatActivity()

현재 MainActivity는 AppcompatActivity를 상속받고 있습니다.

 

※AppcompatActivity는 쉽게 말하면 구 버전 안드로이드 기기에서도 최신 기능을 쓸 수 있게 해주는

기능을 제공합니다. 하위 버전과도 문제없이 사용하기 위해서는 반드시 상속해야 합니다.

 

override 구문은 메서드를 오버라이드 할 때 붙이는 키워드입니다.

 

setContentView는 액티비티가 표시할 레이아웃 파일을 지정합니다.

 

버튼 클릭 시 버튼의 Text가 변경되는 소스를 구성해 보겠습니다.

buttonTest 레이 이웃에 있는 id를 가져와서 setOnClickListener를 설정해 줍니다.

해당 버튼을 클릭하면 다음과 같은 명령을 수행하라는 의미입니다.

 

자바에서는 ID를 부여한 뷰를 참조하려면 findViewBtId() 메서드를 사용해 하나씩 가져와야 했습니다.

하지만 코틀린에서는 kotlin-android-extensions 라이브러리를 사용하기 때문에 자동으로 가져올 수 있습니다.

 

실행 시 버튼을 클릭하면 '버튼을 눌렀습니다."로 정상 변경됩니다.

실행 모습

오늘은 안드로이드의 흐름과 창 구성요소를 알아보고 간단한 앱을 하나 제작해 보았습니다.

다음 시간에는 코틀린에 대해 조금 더 알아보는 시간을 갖겠습니다.

 

실습에 사용한 코드 링크:github.com/KimMinJun653/Kotlin_examlpe

KimMinJun653/Kotlin_examlpe

감사합니다.