국가 수도 맞추기 앱 만들기 #01
첫번째 시간에는 간단하게 레이아웃을 구성해보도록 하겠습니다. 그리고 지금은 당장 쓰이진 않지만 앱의 핵심 데이터인 국가, 수도 정보도 추가하도록 하겠습니다. 이번 시간 최종 목표는 아래와 같은 구성을 가지는 것입니다.
기본 구성은 다음과 같이 질문, 국가, 4개의 선택지, 이전, 다음 버튼으로 구성됩니다.
2개의 텍스트뷰와 6개의 버튼으로 이루어진 간단한 레이아웃입니다.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_quiz_all" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" tools:context="kotlinapp.circus.com.kotlinapplication.MainActivity"> <TextView android:id="@+id/question_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="Question" android:textSize="@dimen/qustion_size"/> <TextView android:id="@+id/question_country_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:paddingBottom="20dp" android:text="Country" android:textSize="@dimen/qustion_size"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/answer_one" android:layout_width="150dp" android:layout_height="wrap_content" android:textSize="17dp"/> <Button android:id="@+id/answer_two" android:layout_width="150dp" android:layout_height="wrap_content" android:textSize="17dp"/> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/answer_three" android:layout_width="150dp" android:layout_height="wrap_content" android:textSize="17dp"/> <Button android:id="@+id/answer_four" android:layout_width="150dp" android:layout_height="wrap_content" android:textSize="17dp"/> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:paddingTop="20dp"> <Button android:id="@+id/prev_button" android:layout_width="wrap_content" android:layout_height="50dp" android:layout_gravity="left" android:layout_marginRight="30dp" android:drawableLeft="@drawable/arrow_left" android:text="@string/prev_button" android:textSize="20dp"/> <Button android:id="@+id/next_button" android:layout_width="wrap_content" android:layout_height="50dp" android:layout_gravity="right" android:drawableRight="@drawable/arrow_right" android:text="@string/next_button" android:textSize="20dp"/> </LinearLayout> </LinearLayout> |
위와 같이 레이아웃 생성 후 텍스트뷰에 질문과 국가 정보를 출력할 수 있도록 연결해보겠습니다.
먼저 텍스트뷰의 id를 코드에서 바로 사용하기 위해서 activity_main의 모든 위젯들을 import 해줍니다.
MainActivity.kt
package kotlinapp.circus.com.kotlinapplication import android.support.v7.app.AppCompatActivity import android.os.Bundle import kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() { private var mCurrentIndex: Int = 0 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) showQuestion() } private fun showQuestion() { var countryList = CountryList() question_text.setText("${mCurrentIndex + 1}" + ". " + resources.getString(R.string.question_title)) question_country_text.setText("[" + resources.getString(countryList.mQuestions[mCurrentIndex].country) + "]") } } |
그 후 텍스트뷰의 id를 곧바로 사용하여 setText를 통해 표시할 텍스트를 지정해줍니다.
만약 showQuestion() 메서드를 자바로 구현했다면 텍스트뷰에 대한 변수를 선언해주고 해당 변수를 레이아웃의 위젯과 연결해주는 과정이 필요합니다.
위젯의 id를 바로 사용할 수 있는 코틀린에서는 이러한 과정이 없어 매우 편리합니다.
public class MainActivity extends AppCompatActivity { private TextView mQuestionTextView; private TextView mQuestionCountryTextView; ... ... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ... ... mQuestionTextView = (TextView) findViewById(R.id.question_text); mQuestionCountryTextView = (TextView) findViewById(R.id.question_country_text); showQuestion(); } private void showQuestion() { mQuestionTextView.setText(mCurrentIndex + 1 + ". " + getResources().getString(R.string.question_title)); mQuestionCountryTextView.setText("[" + getResources().getString(mQuestions[mCurrentIndex].getCountry()) + "]"); } ... ... } |
그리고 국가와 수도 정보를 가진 Question 클래스를 살펴보면 코틀린의 간결함과 편리함을 다시 한 번 느낄 수 있습니다.
Question.java
public class Question { private int mCountry; private int mCapital; public Question(int country, int capital) { mCountry = country; mCapital = capital; } public int getCountry() { return mCountry; } public int getCapital() { return mCapital; } } |
어려운 내용들은 아니지만 국가, 수도 정보를 위한 변수와 생성자, getter가 존재하여 코드가 많아 보입니다.
Question.kt
class Question(val country: Int, val capital: Int) |
primary constructor(주생성자)에 필요한 변수가 존재하며 getter, setter는 생략가능한 코틀린의 특성으로 인해 아주 간결한 모습입니다.
CountryList 클래스는 국가, 수도 정보를 가지는 Question 객체를 담고 있는 array를 포함하고 있습니다.
여기까지의 코드는 GitHub에 올려두었습니다. 해당 repository에 지속적으로 commit 하여 앱을 완성해 나가도록 해보겠습니다.
https://github.com/MyStoryG/CapitalQuiz
'프로그래밍 > Kotlin' 카테고리의 다른 글
| 국가 수도 맞추기 앱 만들기 #03 (1) | 2018.02.19 |
|---|---|
| 국가 수도 맞추기 앱 만들기 #02 (0) | 2018.02.11 |
| 코틀린으로 Activity에 Hello World 출력하기 (0) | 2018.01.21 |
| 코틀린(Kotlin) List & Map (0) | 2018.01.17 |
| 코틀린(Kotlin) 배열(Array) (0) | 2018.01.11 |
| 코틀린(Kotlin) 리시버가 있는 함수 리터럴 (0) | 2018.01.05 |
| 코틀린 익명 함수 (Anonymous Function) (0) | 2018.01.02 |