안드로이드에서 문자를 입력 받아 새로운 화면(액티비티)에서 문자 출력하기(코틀린)
여기서 목적은 안드로이드 앱 개발의 기본에 대해 빨리 실험해 보고 대강의 감각을 익히는 것 입니다.
기본적인 예제를 통해 안드로이드에서 UI를 구성하고 입력된 데이터를 받아 새로운 화면(구체적으로는 액티비티)에서 출력하는 구체적인 방법에 대해 추가 개념에 대한 번거로운 학습 없이 간단하게 확인해 볼 수 있습니다.
여기에 소개된 절차를 실험 해보면, 안드로이드 개발 플랫폼에서 UI를 구성하는 XML과 이를 연동하는 코드의 관계, 그리고 모든 프로그램의 기본 동작으로 볼 수 있는, 데이터를 입력 받아 출력하는 기본적인 앱의 동작 구조 등을 빨리 경험해 볼 수 있습니다. 소스코드는 코틀린으로 되어 있습니다.
이 과정을 진행하기 전에 간단하게 알고 있어야 할 기본 개념
다음에 나올 설명들이 정확한 것은 아닙니다, 단지 이 곳에서 진행하는 과정에 대해 감을 잡고 빠르게 실험/실습해 보기 위한 간단한 설명으로 생각하시면 될 것 같습니다.
개념/용어 설명
액티비티(Activity): 보통 하나의 주제/기능을 위한 화면 1개가 액티비티와 대응한다. 그리고 액티비티 이하 레이아웃, 뷰 등의 요소를 이용하여 화면(사용자 인터페이스)을 구성할 수 있다.
따라서 사용자 입력 화면, 사용자로부터 입력된 내용 등을 계산하여 출력하는 간단한 기능은 각각의 액티비티로 구성하여 두 개의 화면(입력 전용 화면, 출력 전용 화면)을 만들어 제공하는 방식으로 앱을 개발 할 수 있다. 여기서 테스트 해보는 내용들도 두 개의 액티비티(사용자 입력, 입력 내용 출력)로 구성되어 있다.
인텐트(Intent): 액티비티에서 다른 액티비티를 생성하여 새로운 액티비티를 시작할 때 이전 액티비티에서 준비된 데이터를 새로운 액티비티로 넘기기 위해 사용할 수 있는 요소이다.
예를 들면, 사용자로부터 데이터를 입력받기 위한 액티비티(액티비티1)에서 입력 받은 데이터를 입력 데이터를 출력하기 위한 액티비티(액티비티2)로 전달하려면, 액티비티1에서 인텐트를 생성한 후 이 인텐트에 사용자로부터 입력 받은 데이터를 저장(putExtra)하여 액티비티2를 시작할 때 넘겨주면 된다.
간단하게 정리하면, 서로 다른 액티비티 간에 데이터를 전달하기 위한 개념으로 볼 수 있다.
인텐트를 사용하는 이유: 액티비티는 독립적인 실행 단위 이므로 다른 액티비티의 클래스 인스턴스 등을 직접 참조하는 등의 방법을 이용하여 데이터를 전달/참조 할 수 없다.
입력 화면과 출력화면 UI 설계
이 앱의 화면은 데이터 입력 화면 1개, 데이터 출력 화면 1개, 총 2개로 구성되어 있습니다.
데이터 입력 화면
데이터 출력 화면
여기서 진행하는 앱은 매우 간단하므로 데이터 입력 화면(액티비티)과 출력 화면을 굳이 별도로 둘 필요는 없습니다. 한 화면에서 두 가지 기능을 모두 제공해도 상관이 없습니다. 하지만 휴대기기는 화면이 작으므로 대부분의 앱을 구현할 때, 하나의 화면에서 입출력을 같이 처리 하는 경우가 별로 없습니다. 따라서 대부분의 앱을 구현하는 방식과 유사한 형태로 UI를 구성하여 구현해 봅니다.
작업 개념 정리
프로젝트 생성
UI 레이아웃을 XML로 구현
UI 연동을 위한 소스코드 구현
전체 작업 절차 요약
빈 프로젝트를 생성한다.(액티비티1)
빈 프로젝트 내에서 액티비티를 하나 더 추가 한다.(액티비티2)
액티비티1에서 XML로 사용자 입력 화면을 만든다.
액티비티2에서 XML로 데이터 출력 화면을 만든다.
사용자 입력 화면(액티비티1)에서 입력된 데이터를 출력 화면(액티비티2)에 전달한다.
출력 화면(액티비티2)에서 전달 받은 데이터를 화면에 출력한다.
전체 절차
액티비티1 작업
프로젝트 생성
프로젝트를 생성한다.
프로젝트를 생성하면 액티비티 1개가 기본으로 생성된다.(액티비티1: MainActivity)
XML로 UI 요소 추가
항목 이름 / 입력 영역 / 확인 버튼 을 XML로 구현한다.
각각의 구현에 사용되는 XML 요소(Element)는 다음과 같다.
전체 레이아웃 정의: LinearLayout
항목 이름: TextView
입력 영역: EditText
확인 버튼: Button
레이아웃 요소는 처음에 기본으로 구현 되어 있으므로 그대로 사용할 수도 있고 변경할 수도 있다. 여기에서는 LinearLayout으로 변경한다.
XML로 각 UI 요소의 레이아웃 속성 추가
각 요소(TextView/EditText/Button 모두 해당)의 레이아웃 관련 속성은 필수적인 것 2개만 추가 하면 된다.
<...
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
XML UI 요소를 소스코드에서 참조하기 위해 id 정의
EditText에 입력된 값을 소스코드에서 참조하려면 id를 명시해야 한다.
<EditText android:id=”@+id/edit_text” ...
XML UI 요소 중 Button을 눌렀을 때 실행될 이벤트 핸들러 이름 명시
버튼을 눌렀을 때 무엇인가 실행되도록 하려면 이벤트 핸들러(onClick)에 실행될 이벤트 핸들러 이름을 명시해야 한다.
<Button android:onClick=”printMessage” ...
현재까지 수정한 XML
activity_main.xml
XML UI 요소와 소스코드 연동
버튼을 눌렀을 때 실행될 이벤트 핸들러 코드 구현
1. 액티비티 클래스(MainActivity) 멤버 함수로 비어 있는 이벤트 핸들러 구현
fun printMessage(view: View) {
}
2. 이벤트 핸들러 내부 구현
이벤트 핸들러 내부에 다음의 내용을 수행하는 코드를 구현한다.
입력 영역에서 값을 가져온다.
intent를 생성한다.
입력 영역에서 가져온 값을 새로 생성한 intent에 저장한다.
새로운 액티비티를 실행한다. 이 때 인자로 intent를 같이 전달한다.
fun printMessage(view: View) {
// 이 부분에 코드 구현
}
이벤트 핸들러 내부 구현
1. 입력 영역에서 값을 가져온다.
fun printMessage(view: View) {
var edit_text: EditText = findViewById(R.id.edit_text)
var edit_text_value: String? = edit_text.text.toString()
}
2. 프로젝트 내에서 액티비티를 추가 한다.
안드로이드 스튜디오 메뉴에서 File -> New -> Activity -> Empty Activity 를 선택하여 절차를 진행한다. 여기에서는 절차 진행 중 액티비티 이름만 수정하면 된다. 이 때 액티비티 이름은 PrintMessageActivity로 정의 한다.(액티비티2: PrintMessageActivity)
3. intent를 생성한다.
intent를 생성할 때에는 첫번째 인자로 context(현재 액티비티 클래스 인스턴스)와 이 intent를 전달 받을 액티비티 클래스의 타입 정보를 전달해 주어야 한다. 따라서 아래 코드에 명시된 PrintMessageActivity 클래스는 이미 정의가 되어 있어야 한다.
fun printMessage(view: View) {
var edit_text: EditText = findViewById(R.id.edit_text)
var edit_text_value: String? = edit_text.text.toString()
var intent_for_print: Intent = Intent(this, PrintMessageActivity::class.java)
}
4. 입력 영역에서 가져온 값을 새로 생성한 intent에 저장한다.
fun printMessage(view: View) {
var edit_text: EditText = findViewById(R.id.edit_text)
var edit_text_value: String? = edit_text.text.toString()
var intent_for_print: Intent = Intent(this, PrintMessageActivity::class.java)
intent_for_print.putExtra("key1", edit_text_value)
}
putExtra 함수는 key/value 를 저장할 수 있는 자료 구조에 값을 저장할 수 있는 함수이다.
나중에 “key1”을 키 값으로 하여 값을 다시 꺼낼 수 있다.
5. 새로운 액티비티를 실행한다.
이 때 위에서 생성한 intent를 같이 전달한다.
fun printMessage(view: View) {
var edit_text: EditText = findViewById(R.id.edit_text)
var edit_text_value: String? = edit_text.text.toString()
var intent_for_print: Intent = Intent(this, PrintMessageActivity::class.java)
intent_for_print.putExtra("key1", edit_text_value)
startActivity(intent_for_print)
}
현재까지 작업한 코틀린 소스(printMessage 구현 추가)
MainActivity.kt 소스의 일부
액티비티2 작업
XML UI 요소를 소스코드에서 참조하기 위해 id 정의
액티비티2(PrintMessageActivity)에서는 XML 로 UI를 추가하지 않는다. 소스코드 구현을 통해 동적으로 추가 한다. 소스코드에서 XML에 정의된 레이아웃 요소를 참조할 수 있어야 하므로 id 속성만 추가하면 된다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".PrintMessageActivity"
android:id="@+id/activity_print_message"
>
</androidx.constraintlayout.widget.ConstraintLayout>
참고로, 자동으로 생성된 레이아웃은 ConstraintLayout이다. 여기서는 굳이 다른 레이아웃(ex. LinearLayout) 등으로 변경할 필요가 없다.
현재까지 수정한 XML
activity_print_message.xml
XML UI 요소와 소스코드 연동
소스코드(PrintMessageActivity.kt)에서는 다음의 내용들을 구현하면 된다. 액티비티를 추가할 때 자동으로 생성된 PrintMessageActivity 클래스의 onCreate 메서드에 구현을 추가하면 된다.
1. intent를 통해 전달된 데이터를 참조한다.
2. TextView를 생성한다.
3. TextView에 전달받은 데이터를 입력한다.
4. layout을 참조한다.
5. layout에 TextView를 추가 한다.
1. intent를 통해 전달된 데이터를 참조한다.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_print_message)
var edit_text_value: String? = intent.getStringExtra("key1")
}
2. TextView를 생성한다.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_print_message)
var edit_text_value: String? = intent.getStringExtra("key1")
var text_view: TextView = TextView(this)
}
3. TextView에 전달받은 데이터를 입력한다.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_print_message)
var edit_text_value: String? = intent.getStringExtra("key1")
var text_view: TextView = TextView(this)
text_view.setText(
edit_text_value
)
}
4. layout을 참조한다.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_print_message)
var edit_text_value: String? = intent.getStringExtra("key1")
var text_view: TextView = TextView(this)
text_view.setText(
edit_text_value
)
var layout: ViewGroup = findViewById(R.id.activity_print_message)
}
5. layout에 TextView를 추가 한다.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_print_message)
var edit_text_value: String? = intent.getStringExtra("key1")
var text_view: TextView = TextView(this)
text_view.setText(
edit_text_value
)
var layout: ViewGroup = findViewById(R.id.activity_print_message)
layout.addView(text_view)
}
현재까지 작업한 코틀린 소스
PrintMessageActivity.kt 소스의 일부
지금까지의 과정을 통해, 최소한의 지식으로, 사용자에게 값을 입력 받아 화면에 출력하는 기본적인 형태의 앱 구현을 빠르게 경험해 보았습니다.
'안드로이드(Android)' 카테고리의 다른 글
| 안드로이드 앱 개발을 위한 기본 개념들 요약 - 앱의 구성 (0) | 2021.03.01 |
|---|---|
| 안드로이드 앱 개발을 위한 기본 개념들 요약 - 사용자 인터페이스 (0) | 2021.03.01 |
| 안드로이드 단말기 개발 환경 구성(터미널/command-line 을 이용한 무선 연결 및 디버깅 환경 구성) (0) | 2021.01.14 |
| 안드로이드 단말기 개발 환경 구성(UI 조작 방법을 사용한 유선 연결 기준) (0) | 2021.01.09 |
| AVD Manager 안드로이드 가상머신 에뮬레이터(x86 이미지) 실행 시 비정상 종료 되는 원인 (0) | 2021.01.09 |