[Android + Kotlin 시작하기] 간단한 App 만들어보기 - 2

 

INTRO

---

 

android Kotlin 으로 간단한 주사위 App 을 만들어볼것이다.

Kotlin을 처음 배우는 독자들에게 적합한 내용이다.

(Android Developers - Traning에 있는 내용을 실습하며 작성한 포스팅이다.)

https://developer.android.com/codelabs/basic-android-kotlin-training-dice-roller-images#0

Dice Roller 앱에 이미지 추가  |  Android Developers

 

 

 

해당 포스팅은 시리즈로 구성됩니다.

2021.12.27 - [Programming/[Android]] - [Android + Kotlin 시작하기] 간단한 App 만들어보기 - 1

 

 

 

---

 

 

 

1. ImageView추가

◆ 기존에 사용했던 TextView를 지우고, 그 자리에 ImageView를 추가해준다.

◆ ImageView 추가 시 아래와 같이 리소스 선택 창이 자동으로 열리는데,

◆ 지금은 Sample data에 있는 avatars를 선택해준다.

<?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=".MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.633" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="160dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.372"
        tools:srcCompat="@drawable/dice_1" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

---

 

 

 

 

 

2. Dice 이미지 저장 및 사용

◆ 아래 링크에 접속하여 6개의 주사위 이미지를 저장한다.

https://github.com/google-developer-training/android-basics-kotlin-dice-roller-with-images-app-solution/raw/master/dice_images.zip

 

◆ 이후 압축을 풀고, 프로젝트의 app -> src -> main -> res -> drawable 폴더로 6개의 이미지들을 옮겨준다.

 

◆ 이제 MainActivity.kt 로 가서 소스를 수정해준다.

◆ 기존 TextView코드를 제거하고, ImageView의 ID를 가져와 dice이미지를 set해주는 코드를 작성 할 것이다.

◆ drawable폴더 내의 이미지는 R.drawable.dice_2와 같이 불러올 수 있다.

 

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val rollButton:Button = findViewById(R.id.button1)

        rollButton.setOnClickListener {
            rollDice()
        }
    }

    private fun rollDice() {
        val dice = Dice(6)
        val diceRoll = dice.roll()
        val resultImageView: ImageView = findViewById(R.id.imageView1)
        resultImageView.setImageResource(R.drawable.dice_2)
    }
}

 

◆ 버튼 터치 시 dice_2이미지가 보여지는 것을 볼 수 있다.

 

---

 

 

 

3. 랜덤하게 등장하는 이미지 처리

◆ dice.roll() 메서드를 수행하면, 1이상 6이하의 랜덤한 숫자가 반환된다.

◆ 1이 반환되면, dice_1.png 이미지를 보여주고, 2가 반환되면 dice_2.png 이미지가 보여져야 한다.

◆ 해당 구문을 java에서는 아래와 같이 if/else 또는 switch문으로 처리했었다.

int diceRoll = dice.roll();

if(diceRoll == 1){
	resultImageView.setImageResource(R.drawable.dice_1);
} else if(diceRoll == 2){
	resultImageView.setImageResource(R.drawable.dice_2);
}
.
.
.

// 또는
int diceRoll = dice.roll();

switch(diceRoll){
	case 1:
    	resultImageView.setImageResource(R.drawable.dice_1);
        break;
    case 2:
    	resultImageView.setImageResource(R.drawable.dice_2);
        break;

.
.
.

 

◆ kotlin에서는 when 구문을 사용한다고 한다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val rollButton:Button = findViewById(R.id.button1)

        rollButton.setOnClickListener {
            rollDice()
        }
    }

    private fun rollDice() {
        val dice = Dice(6)
        val diceRoll = dice.roll()
        val resultImageView: ImageView = findViewById(R.id.imageView1)
        when (diceRoll) {
            1 -> resultImageView.setImageResource(R.drawable.dice_1)
            2 -> resultImageView.setImageResource(R.drawable.dice_2)
            3 -> resultImageView.setImageResource(R.drawable.dice_3)
            4 -> resultImageView.setImageResource(R.drawable.dice_4)
            5 -> resultImageView.setImageResource(R.drawable.dice_5)
            6 -> resultImageView.setImageResource(R.drawable.dice_6)
        }
    }
}

◆ 해당 코드에서는 setImageResource(R.drawable.dice_x) 메서드가 반복된다. 

◆ 간소화 하면 아래와 같아진다. (코드가 짧아지진 않지만, 가독성에 도움이 되는 것 같다.)

◆ when에서 else구문을 추가하지 않는 경우(java switch 문의 default:) 오류가 발생하므로 추가해준다.

◆ 또한 app실행 시, 버튼을 누르기 전에는 주사위 이미지가 보이지 않는다.

◆ 따라서 onCreate메서드 안에 rollDice()메서드를 한번 더 추가해준다.

 

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val rollButton:Button = findViewById(R.id.button1)

        rollButton.setOnClickListener {
            rollDice()
        }
        rollDice()
    }

    private fun rollDice() {
        val dice = Dice(6)
        val diceRoll = dice.roll()
        val resultImageView: ImageView = findViewById(R.id.imageView1)

        val drawableResource = when (diceRoll) {
            1 -> R.drawable.dice_1
            2 -> R.drawable.dice_2
            3 -> R.drawable.dice_3
            4 -> R.drawable.dice_4
            5 -> R.drawable.dice_5
            6 -> R.drawable.dice_6
            else -> {R.drawable.dice_1}
        }
        resultImageView.setImageResource(drawableResource)
    }
}

◆ 이제 버튼을 누를 때 마다 랜덤한 주사위 Image가 출력되는것을 볼 수 있다.

---

 

 

 

마무리

여기까지 따라왔다면 android-kotlin에서 아래와 같은 기능을 구현할 수 있게 된다.

1. 클래스 / 변수 작성

2. 기본적인 컴포넌트 제어

3. 이벤트 리스너 등록

4. when 구문 사용

 

포스팅은 여기까지이며, 시간적 여유가 허용 될 경우 app을 바탕으로 아래와 같은 기능을 넣어볼 수 있겠다.

1. 2개의 (혹은 더 많은) 주사위를 굴려 나온 값들의 합을 출력.

2. 출력된 수 만큼 말이 이동하는 브루마블 형태의 app

등등..

 

 

 

 

 

-퍼가실 때는 출처를 꼭 같이 적어서 올려주세요!