이번 포스팅에서 만들어볼 것은 가위바위보 게임 어플리케이션입니다. 앱에 대해 간단히 소개하면, 가위바위보에서 지는 사람이 커피를 사면 되는 매우 간단한 어플리케이션입니다. 이 포스팅을 통해 학습하고자 하는 내용은 데이터 바인딩과 Back버튼 두 번 눌러 종료하기입니다.
① RockScissorPaper라는 이름의 프로젝트를 생성한다.
② activity_main.xml 파일의 레이아웃을 LinearLayout으로 변경한다.
③ 배경색을 검은색으로 설정해보자.
<LinearLayout
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"
android:background="#000000"
android:orientation="vertical"
tools:context=".MainActivity">
④ 자식 LinearLayout을 추가한 후, TextView 태그를 넣는다.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="100dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="가위바위보에서 진\n 사람이 커피 사기"
android:textColor="#ffffff"
android:textStyle="bold"
android:layout_margin="20dp"
android:gravity="center"/>
</LinearLayout>
⑤ drawable 디렉토리 하위로 가위바위보 이미지를 넣은 후, 이번엔 ImageView를 포함한 자식 LinearLayout 컨테이너를 생성한다.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="120dp">
<ImageView
android:src="@drawable/paper"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_weight="1"/>
<ImageView
android:src="@drawable/scissors"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_weight="1"/>
</LinearLayout>
⑥ 가위바위보를 시작할 버튼을 생성한다. (별도의 자식 LinearLayout 안에 둘 필요는 없다)
<Button
android:id="@+id/startButton"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#FF0008"
android:textColor="#ffffff"
android:text="가위바위보 시작"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="120dp"/>
XML 레이아웃에 정의된 요소들에 접근하는 것을 데이터 바인딩이라 하는데, 그 동안은 findViewById를 사용했었다. 이번 포스팅에서는 layout을 이용한 데이터 바인딩 방식을 사용해보기로 하자.
① build.gradle.kts(Module :app)에 들어가 kotlinOptions 아래에 코드를 추가하고, Sync Now를 클릭해주자.
kotlinOptions {
jvmTarget = "1.8"
}
buildFeatures{
dataBinding = true
}
② 데이터 바인딩을 사용하기 위해 activity_main.xml 파일을 layout 컨테이너로 감싼다.
<?xml version="1.0" encoding="utf-8"?>
<layout>
<LinearLayout
...
</LinearLayout>
</layout>
③ MainActivity 파일에 아래의 코드를 작성한다.
private lateinit var binding : ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
binding.startButton.setOnClickListener {
Toast.makeText(this, "안내면 진거 가위바위보!", Toast.LENGTH_SHORT).show()
}
}
④ activity_main.xml 파일에서 가위바위보 이미지에 id를 넣는다.
<ImageView
android:id="@+id/person_1"
android:src="@drawable/paper"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_weight="1"/>
<ImageView
android:id="@+id/person_2"
android:src="@drawable/scissors"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_weight="1"/>
⑤ MainActivity에서 person1과 person2를 바인딩하고 Random하게 가위바위보를 선택하게 하자.
val image1 = binding.person1
val image2 = binding.person2
binding.startButton.setOnClickListener {
Toast.makeText(this, "안내면 진거 가위바위보!", Toast.LENGTH_SHORT).show()
val number1 = Random.nextInt(1, 4)
val number2 = Random.nextInt(1, 4)
if(number1 == 1) {
image1.setImageResource(R.drawable.rock)
}
else if(number1 == 2) {
image1.setImageResource(R.drawable.scissors)
}
else {
image1.setImageResource(R.drawable.paper)
}
if(number2 == 1) {
image2.setImageResource(R.drawable.rock)
}
else if(number2 == 2) {
image2.setImageResource(R.drawable.scissors)
}
else {
image2.setImageResource(R.drawable.paper)
}
}
코드를 실행시켜보면 버튼을 누를 때마다 가위바위보를 할 수 있게 된다.
지금까지는 Back 버튼을 한번만 눌러도 앱이 종료되는 형태였는데, 이제부터는 메인화면에서 Back 버튼을 두 번 눌러야만 앱이 종료되도록 변경해보겠다.
① 더블 클릭을 확인할 수 있도록 isDouble 변수를 생성한다. binding을 선언한 곳과 같은 곳에 선언하면 된다. 참고로, 값이 나중에 변경되어야 할 경우, val이 아닌 var을 써야 한다.
private lateinit var binding : ActivityMainBinding
private var isDouble = false
② 뒤로가기 버튼을 눌렀을 때 호출될 메서드를 정의한다.
override fun onBackPressed() {
if(isDouble)
finish()
isDouble = true
Toast.makeText(this, "종료하시려면 한번 더 눌러주세요.", Toast.LENGTH_SHORT).show()
Handler().postDelayed(Runnable {
isDouble = false;
}, 2000)
}
코드를 실행해보면, 뒤로 가기 버튼을 두 번 눌러야만 앱이 종료되는 것을 확인할 수 있다.