Android <4> Build your first Android app: [Dice Roller🎲]

 

오늘은, ! 아니 지난 주 교육 세션에서 드디어 첫 안드로이드! 앱을 만들어보았습니다 짝짝짝

처음 만들기를 시도한 앱은 바로 🎲주사위 굴리기 앱🎲입니다 !!!!!!!!

 

 

 

🎲 Empty Activity 프로젝트 생성하기

 

 

🎲action bar 만들기 - themes.xml 파일에서 color 선택

 

*alt+enter

 

 

초록색을 골랐습니닷

 

 

🎲 주사위 굴릴 버튼 생성하기

 

 

🎲  constraint 레이아웃 설정하기 -> 안 하면 오류 발생

: 상하 중 무조건 1개, 좌우 중 무조건 1개는 설정해야 합니다!

 

 

🎲 개발자 눈에만 보이는 text 적기 [text 중 위에는 모든 사람들 눈에 보이는, 밑에는 개발자에게만 보이는!]

 

🎲 버튼에 동작 부여하기

생성된 버튼의 id와 코드에서 사용되는 id가 동일한지 확인!

 

---

--중간 결과물 --

 

 

🎲 이제 진짜 버튼을 누르면 주사위가 굴려지게 해보쟈

 

1 주사위 클래스 생성

 

2 주사위를 굴리는 함수 생성 (numSides를 6으로 해서, 6면체 주사위 생성)

 

 

🎲 버튼 누를 때마다 숫자가 바뀜!

 

 

-코드

package com.myfirstandroidapp.dicerollerprac

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView


/**
 * 본 activity는 사용자가 주사위를 굴리고 그 결과를 화면에서 볼 수 있도록 한다
 */
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

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


        rollButton.setOnClickListener{ rollDice() }
    }

    /**
     * 주사위를 굴리고 결과를 화면에 출력한다
     */

    private fun rollDice() {
       //주사위 객체 생성 -> 주사위 객체가 있어야!
        val myDice = Dice(6) // 육면체 주사위

        //주사위 굴리기
        //주사위 굴린 결과를 변수에 받아놓기
        //diceResult에는 1부터 numsides까지 중 랜덤으로 출력된 int가 반환
        val diceResult = myDice.roll()

        // -> TextView 가져오기
        val resultTextView: TextView = findViewById(R.id.textView)

        // 거기에 주사위 굴린 결과 출력
        resultTextView.text = diceResult.toString() //text는 string


    }
    class Dice(private val numSides: Int) {

        fun roll(): Int {
            return ( 1..numSides).random()
        }
    }

}

 

 

---

 

🎲주사위 그림 넣기

 

현재 숫자로 출력되는 부분을 그림으로 바꾸기 -> ImageView로 변경

 

 

🎲 밑 콘텐츠와 10dp 정도 거리두기 : 수동으로 constraints 값 입력하기

 

 

🎲 사진 가져오기

 

 

🎲 srcCompat 에 넣어서 크기 조절하기

 

 

🎲암튼 보이긴 함

 

 

🎲 출력값에 따라 주사위 그림 다르게 보여주기 

*코드 한 줄 복붙 -> ctrl +d

drawable에 이미지파일이 들어있군

 

-코드

package com.myfirstandroidapp.dicerollerprac

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView


/**
 * 본 activity는 사용자가 주사위를 굴리고 그 결과를 화면에서 볼 수 있도록 한다
 */
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

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


        rollButton.setOnClickListener{ rollDice() }
    }

    /**
     * 주사위를 굴리고 결과를 화면에 출력한다
     */

    private fun rollDice() {
       //주사위 객체 생성 -> 주사위 객체가 있어야!
        val myDice = Dice(6) // 육면체 주사위

        //주사위 굴리기
        //주사위 굴린 결과를 변수에 받아놓기
        //diceResult에는 1부터 numsides까지 중 랜덤으로 출력된 int가 반환
        val diceResult = myDice.roll()

        // -> TextView 가져오기
        val resultImageView: ImageView = findViewById(R.id.imageView2)

        // 거기에 주사위 굴린 결과 출력
        val imageResource = when(diceResult) {
            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 //when문은 else가 필수!
        }
        resultImageView.setImageResource(imageResource)


    }
    class Dice(private val numSides: Int) {

        fun roll(): Int {
            return ( 1..numSides).random()
        }
    }

}

 

 

🎲 onCreate()에  rollDice()를 추가해주면? 시작부터 주사위 굴려진 채로 시작!

 

 

---

 

도전 문제: 주사위 2개를 굴리고 출력하려면 어떻게 해야 할까?

 

1 주사위 그림 두개 넣기

:첫번째 주사위 id는 imageView2고, 두번째는 imageView4다!

 

 

2 객체 2개 만들기

*코드의 중복을 줄이기 위해 rollshow()라는 함수를 생성해서 안에 중복되는 코드 넣어주기

private fun rollDice() {
    // Roll the first die
    val resultImageView2: ImageView = findViewById(R.id.imageView2)
    val diceResult2 = rollshow(resultImageView2)

    // Roll the second die
    val resultImageView4: ImageView = findViewById(R.id.imageView4)
    val diceResult4 = rollshow(resultImageView4)
}

private fun rollshow(resultImageView: ImageView): Int {
    val myDice = Dice(6)
    val diceResult = myDice.roll()

    val imageResource = when(diceResult) {
        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
    }

    resultImageView.setImageResource(imageResource)

    return diceResult
}
class Dice(private val numSides: Int) {

    fun roll(): Int {
        return ( 1..numSides).random()
    }
}

 

짠

---

 

🤔첫 앱 빌딩 후 느낀 점: 

자바에 익숙치 않은 저에게 --.. 코틀린을 짧게 배우는 동안,, 이게 안드로이드 앱 빌딩에 어떻게 응용될까 항상 궁금했었는데 간단한 앱을 만들어보니,, 물론 더 더 어렵고 낯설었지만 그래도 ((아 이런 과정에서 이 개념이 쓰이는군..하고_)) 신기했습니다! 

그리고 뭔가 일반적인 코딩보다 피그마처럼 디자인 툴의 느낌이 강하게 들어서 오히려 저는 더 재밌었어욥 흿

그래도 한 가지 우려되는 점은,, 제가 안드로이드 유저가 아니라서,, 나중에 프로젝트를 할 때도 사용자 경험 측면에서 과연 다양한 아이디어를 낼 수 있을까 하는 걱정도 들었어요 ! 엄마 핸드폰 뺏어서 많이 써봐야겠음 ㅠ 

아무튼 제 인생 첫 안드로이드 앱 빌딩이었습니다. ! 💝