국가 수도 맞추기 앱 만들기 #01

첫 번째 시간에는 간단하게 레이아웃을 구성해보도록 하겠습니다. 그리고 지금은 당장 쓰이진 않지만 앱의 핵심 데이터인 국가, 수도 정보도 추가하도록 하겠습니다. 이번 시간 최종 목표는 아래와 같은 구성을 가지는 것입니다.

project

기본 구성은 다음과 같이 질문, 국가, 4개의 선택지, 이전, 다음 버튼으로 구성됩니다.

2개의 텍스트뷰와 6개의 버튼으로 이루어진 간단한 레이아웃입니다.

layout

activity_main.xml

<?xml version=파라오 슬롯;1.0파라오 슬롯; encoding=파라오 슬롯;utf-8파라오 슬롯;?

24

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파라오 슬롯;

25

android:gravity=파라오 슬롯;center파라오 슬롯;

android:orientation=파라오 슬롯;vertical파라오 슬롯;

tools:context=파라오 슬롯;kotlinapp.circus.com.kotlinapplication.MainActivity파라오 슬롯;

26

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 funshowQuestion(){

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를 바로 사용할 수 있는 코틀린에서는 이러한 과정이 없어 매우 편리합니다.

MainActivity.java

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 하여 앱을 완성하도록 하겠습니다.