[Android Study Jam]UNIT 2: Dice Roller

코틀린 카테고리에서 먼저 구글의 Android Study Jam의 전문가 트랙을 수료했던 내용을 정리하려합니다.

developer.android.com/courses/study-jams

Android Study Jams  |  Android 개발자  |  Android Developers

처음으로 만들어볼 앱은 주사위 굴리기 앱입니다.

사용자에게 보여지는 화면 레이아웃을 만들어볼텐데요,

Constraint Layout, Linear Layout에서 버튼, 이미지를 추가합니다.

안드로이드에서는 먼저 activity_main.xml에서 레이아웃을 설정하고,

MainActivity.kt 안에서 R.id.Button와 같은 명령으로 위 xml 파일의 변수를 가져와 기능을 넣습니다.

버튼 추가

activity_main.xml 파일에서 버튼을 추가해봅시다.

<Button
   android:layout_width=""
   android:layout_height="" />

xml파일에서 버튼을 추가하고 기능은 MainActivity.kt에서 추가할 겁니다.

리소스 추출

재사용할 필요가 있거나 이름을 지정해주고 싶은 자원은 resource 파일로 extract할 수 있습니다.

<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

위에서 쓰인 roll_label을 아래와 같이 버튼의 이름으로 지정해줄 수 있습니다.

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />

기능 추가

화면에 버튼을 만들었으니 버튼을 누르면 이벤트가 발생해야합니다.

이제 MainActivity.kt에서 기능을 추가할 차례입니다.

class MainActivity : AppCompatActivity() {

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

        val rollButton: Button = findViewById(R.id.roll_button)
        rollButton.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}

위 코드는 간단하게 버튼이 클릭됐다고 토스트 메세지를 띄웁니다.

주사위를 굴리는 등의 로직도 간단하게 구현할 수 있겠죠?

 

이제 응용해 봅시다. 주사위를 굴리고 나온 눈금을 사진으로 보여줄겁니다.

이미지 추가

res/drawable 폴더에 xml파일로 이미지를 추가할 수 있습니다.

주사위 굴리기

private fun rollDice() { val randomInt = (1..6).random() val drawableResource = when (randomInt) { 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 else -> R.drawable.dice_6 } diceImage.setImageResource(drawableResource) }

private fun rollDice() {
   val randomInt = (1..6).random()
	 val drawableResource = when (randomInt) {
	   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
	   else -> R.drawable.dice_6
		}
	diceImage.setImageResource(drawableResource)

}

각 눈금별로 다이스 이미지를 할당합니다.

rollDice가 실행될 때마다 주사위는 랜덤하게 던져지고, 그에 맞는 이미지가 보여집니다.

 

참고

developer.android.com/courses/study-jams

Android Study Jams  |  Android 개발자  |  Android Developers