곧장 앞서 만든 FirstApp에 약간의 코딩을 하고 화면에서 버튼을 클릭하여 우리가 원하는 글자를 출력하는 앱을 만들어 봅시다.
Activity_main.xml 디자인 탭에는 안드로이드 스튜디오가 디폴트로 만들어준 뷰가 하나 있습니다. HelloWorld 라는 글자를 표시해 주고 있죠. 그 뷰를 선택하고 'Del' 키를 눌러 뷰를 완전히 없애세요. 그럼 진짜 속이 완전히 빈 앱이 되는 것이죠. 원래는 이 상태가 기본입니다!
[뷰 추가해 보기]
① Autoconnect 옵션을 켜세요. (맙굽자석 아이콘에 금지선이 있으면 안돼요. 금지선이 있으면 옵션이 꺼진 거예요)
② 팔레트에서 'TextView'라는 뷰를 디자인 창의 앱 레이아웃 중앙에 가져다 놓으세요. 참고로 레이아웃 정중앙으로 아이콘을 가져가면 세로및 가로줄이 나타납니다) 이렇게 가져다 놓은 텍스트 뷰의 속성 창에서 text 항목에 앱에서 출력하고 싶은 문자열을 입력해 보세요. 저는 "My first application!"라고 입력해 봤습니다. 글자의 크기를 크게 하기 위해 textApearance를 AppCompat.Display3 으로 바꿔주세요. 컴포넌트 트리 창을 보면 우리가 가져다 놓은 텍스트 뷰가 하나 나열됐음을 알 수 있어요. 그런데 노란 경고 표시가 생겼을 겁니다.
③ 경고 아이콘을 클릭해보세요.
경고 이유가 긴 메시지로 출력되는데, 요점은 텍스트를 리소스화 하지 않았다는 것 입니다.
메시지 제일 아래쪽에 'Fix' 버튼을 누르면 안드로이드 스튜디오가 이 문제를 수정할 수 있게 이끌어 줍니다.
'리소스'란? 번역해 보면, '자원'이죠. 앱 제작에 사용되는 모든 문자열, 사진, 음악 파일, 사진 파일, 뷰 조각 등등을 안드로이드 스튜디오에서 사용할 수 있는 작은 모듈 형태로 만들게 되는데, 이런 모든 데이터들을 포괄적으로 리소스라고 부릅니다. 즉, 앱을 만드는 '자원'인 셈이니까요~
화면에 'Extract Resource' 창이 나타나 있죠? 리소스화 시켜주는 창입니다. Resource Name에 임의로 영문 이름을 작성하고 OK를 클릭하세요 (다른 세세한 리소스 설정은 안드로이드 스튜디오가 일단 디폴트 설정으로 알아서 작업해 주므로 우선 이렇게 이름을 정해주는 것만으로도 텍스트가 리소스화 됩니다. 저는 이 리소스 이름을 'my_first_application'이라고 적었습니다. (경고 표시가 사라진 것을 확인할 수 있을 거예요)
프로젝트 탐색기>app>res>values>strings.xml을 열어보면 아래 코드와 같이 리소스화 되어 있는 my_first_application을 확인할 수 있습니다.
<resources>
<string name="my_first_application"> My First Application </string>
<resources>
이 textView 뷰를 앞으로 프로그래밍 할 때 'my_first_application'라는 이름으로 프로그램 내에서 참조할 수 있게 된 것입니다. 리소스화라는 게 별거 아닙니다. 이 처럼 <resources>라는 XML 요소로 구체적인 설정 값들을 정의해 놓는 것에 불과합니다. 디자인 창에서 뷰들을 많이 추가해 놓으면 이렇게 정의된 <resources> 요소가 그 수 만큼 점점 늘어나겠죠?
참고) 여기서는 경고 속 'Fix' 링크를 통해 문자열을 리소스화 했는데, 이것은 경고메시지 처리 방법을 알려주기 위한 것이었고, 앞으로는 string.xml 에디터 창 위쪽에 있는 'Open editor' 링크로 직접 Extract Resource 창을 열고 입력을 하세요.
[다국어 지원 기능 넣기]
한편, 여러 나라 사람들이 앱을 사용할 수 있으려면 문자열이 다중 언어를 지원하도록 해줘야 합니다.
위 strings.xml을 더블클릭으로 열고 'open editor' 링크 메뉴를 클릭하세요.
Translation Editor가 열리면 'Add Locale' 아이콘(지구본 모양)을 눌러 'Korean (ko) in South Korea (KR)'를 선택하여 언어를 추가하고 'Default Value'와 'Korean (Ko) in South Korea (KR)'에 앱에서 사용되는 문자열 별로 각 언어에 맞는 번역을 적어 넣으세요. key는 문자열 리소스의 이름이고 아래에 두 개의 문자열 리소스가 보이네요. app_name은 앱 이름, my_first_application은 우리가 추가했던 문자열 뷰의 이름입니다. Default Value는 문자열 표시에 사용되는 디폴트 언어를 나타냅니다. 금방 한국어를 추가했던 방법으로 여러나라 언어들을 계속 추가하면 그 만큼의 다중 언어를 지원하는 앱이 되는 것이에요. 간단하죠?!
[뷰의 위치 조정]
뷰에 설정되어 있는 제약을 수정함으로써 뷰의 위치를 바꿔봅시다.
activity_main.xml을 열고 레이아웃 그림에서 아래 쪽에 설정된 제약를 제거해 보세요. 아래 쪽 여백이 사라지면서 뷰가 상단에 붙어 버릴거예요. 속성 창에서 뷰의 상단 여백으로 200 정도를 입력해 봅시다.
잠깐! 읽어보고 넘어가야 할 사항이 있어요.
액티비티란?
안드로이드에서 화면을 액티비티라고 부릅니다. 안드로이드 스튜디오의 에디트 창에 열려있는 MainActivity.kt 파일에는 액티비티를 생성하는 코드가 들어 있습니다. 열어 보세요. 아래와 같은 소스 코드가 보일거예요. 그리소 아래 설명은 그냥 읽어보기만 하고 넘어가세요. 자바나 C# 경험이 있다면 코틀린 언어가 전혀 낯설게 보이지 않을 거예요. '//'는 주석(설명) 입니다. 그런 게 있구나하고 참고만 하세요.
package com.tistory.firstapp // 본 파일 패키지의 위치를 표시함 (디스크 드라이브 ....\com\tistory\firstapp 폴더를 가리킴)
// 도트(.)는 트리(Tree) 구조의 하위 디렉토리 구분용이라고 이해할 것
import android.os.Bundle // 안드로이드 기본 번들 묶음을 가져옴 (import는 외부 프로그램 모듈들을 본 파일에 포함시켜 줌)
import androidx.appcompat.app.AppCompatActivity // 액티비티 기본 틀 정의 묶음을 가져옴
class MainActivity : AppCompatActivity() { // 상위클래스 AppCompatActivity를 상속받아 MainActivity 클래스를 생성
// 클래스란 화학에서 '분자'와 같은 개념으로 프로그램 세계의 분자라고 할 수 있음
// 하나의 프로그램 안에 수 많은 클래스들이 '개체'로서 활성화되어 동작하는 것임.
// 프로그램 세계에서의 그 분자 구조를 class 키워드로 정의함
// 클래스 내부는 속성 값들과 개체로서 활성화됐을 때 취할 동작이 정의된 함수들로
// 구성됨. 함수(function)를 최근에는 메소드(method)라고도 부르고 있음
// 즉 클래스 = 속성 값 + 메소드
// 자바에서 상속 표현은 extend임 (C#이나 코틀린은 :를 사용)
// MainActivity는 우리가 제작하는 프로그램 첫 기본 화면임
// 액티비티를 만들기 위해서는 반드시 AppCompatActivity라는
// 상위 클래스(=부모 클래스)를 상속받아야 함
// (상속이란? 부모격 클래스의 '속성 값 + 메소드'를 묵시적으로 복사하는 것)
override fun onCreate(savedInstanceState: Bundle?) { // onCreate 메서드는 액티비티 시작 때 제일 처음 호출됨
// 메소드는 "fun 메소드명(매개변수 묶음)" 형태로 정의하며
// override란 상위클래스의 특정 메소드를 재정의 하겠다는 의미임
// 반드시 상위클래스의 onCreate 메소드를 오버라이드 하고,
super.onCreate(savedInstanceState) // 반드시 상위클래스(super)의 onCreate 메소드를 호출해야 함
setContentView(R.layout.activity_main) // setContentView()로 액티비티의 레이아웃을 설정 함
// R은 자동 생성되는 리소스 클래스. 모든 리소스는 정수형ID로 관리되고 참조됨
// 괄호안은 지난 시간에 디자인을 정의했던 res/layout/activity_main.xml을 가리킴
}
}
[버튼 배치]
① 팔레트에서 버튼을 레이아웃 중앙 약간 아래 쪽에 가져다 놓고 속성을 다음과 같이 수정합시다.
상하단 여백에 대한 제약도 추가하시고요.
ID : 'clickButton'
text : '클릭해 보세요'
textApearance : 글자크기를 자기 마음대로 적당히.
(ID 이름을 짓는 이유는 프로그램 코드에서 우리가 지은 이름으로 컴포넌트들을 참조하기 위해서임)
참고)
자바에서는 findViewById()를 이용해서 컴포넌트 파일에서 컴포넌트를 찾아와서 사용해야 했었지만 코틀린에서는 kotlin-android-extensions 라이브러리를 사용하여 xml 파일의 컴포넌트를 자동으로 참조함)
② 버튼을 배치했으니 버튼을 눌렀을 때 할 동작을 정의해 줍시다. MainActivity.kt 파일을 열어 주세요.
우선 import로 시작되는 행들이 몇 줄 있는지 확인해 보세요. 두 줄이 있죠?
이제 OnCreate()라는 오버라이드된 함수 안에 아래 굵게 표시된 빨간색 코드를 입력해 넣으세요. 입력중에 자동으로 관련 명령어들('메서드'들 이라고 부릅니다)이 자동완성형으로 나열되면서 입력을 도와 줄 것입니다. 혹시라도 자동완성 창이 사라지면 CTRL+Space 를 누름으로써 다시 표시되게 할 수 있습니다. 이 코딩을 하면 위에서 확인해봤던 import 문이 새롭게 하나 추가되어 3 줄이 됐음을 확인할 수 있습니다. 원래 일일이 import 문도 입력해야 되지만, 스튜디오가 알아서 자동으로 작성한 것입니다. 편하죠^^
(참고: 오버라이드란 안드로이드 프로젝트에 기본적으로 정의되어 빌트인 되어 있는 메서드를 새롭게 정의할테니 앞으로는 새롭게 정의된 메서드를 호출하라는 의미입니다. 우린 이렇게 새로 메서드를 정의하면서, 버튼을 클릭했을 때 해야 할 동작을 추가해 넣은 것입니다. 아래는 버튼을 눌렀을 때 '버튼을 눌렀네요'라는 메시지를 출력합니다)
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
clickButton.setOnClickListener {
textView.text = "버튼을 눌렀네요"
}
}
}
③ 실행해 봅시다.
버튼을 누르면 아래와 같이 '버튼을 눌렀네요' 메시지가 나타날 것입니다.
위에서 사용한 setOnClickListener는 빈번하게 사용되므로 잘 기억해 둡시다.
이렇게 안드로이드 앱을 만들어 봤는데, 아직 뜬 구름 잡는 기분이시죠? 때문에 프로그래밍 언어를 배워야 합니다. 대략 앱 개발 분위기는 파악하셨으리라 생각됩니다. 위에서는 버튼 컴포넌트(기능을 조작할 수 있는 컴포넌트라는 의미에서 '컨트롤'이라고도 해요)을 사용해 봤는데, 앞으로의 학습 방식도 이와 똑같아요. 위와 같이 단순히 컴포넌트들을 하나씩 정복해 가는 거죠.
이제 본격적으로 코틀린 언어를 배워 보자구요. 각오 단단히 하세요. 다음 포스트에 계속~