[안드로이드 코틀린] 간단한 퀴즈앱 만드는 방법 part5- 결과 화면

안녕하세요. 이번 시간에는 퀴즈 앱 만들기 다섯 번째 시간 - 결과 화면 만드는 방법을 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.11.24 - [안드로이드] - [안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part4 - 답변 체크 이벤트

[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part4 - 답변 체크 이벤트

---

목차

1. 실행 화면
2. 결과 액티비티 ResultActivity
3. 메인 코드 구현 MainActivity.kt

---

1. 실행 화면

 

 

2. 결과 액티비티 ResultActivity

app 선택 -> 마우스 오른쪽 클릭 -> New -> Activity -> Empty Activity

Activity name: ResultActivity

activity_result.xml

 - 설명 - 

 1. 결과 TextView

 2. 점수 보여주는 TextView

 3. 게임 화면으로 이동 Button

<?xml version="1.0" encoding="utf-8"?>
<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:gravity="center"
    android:orientation="vertical"
    tools:context=".ResultActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="결과"
        android:textSize="30sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/score_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:textSize="20sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/reset_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="다시 하기"
        android:textSize="20sp" />
</LinearLayout>

 

ResultActivity.kt

 - 설명 - 

 1. intent.getIntExtra("score", 0)

   전달 받은 점수

 2. intent.getIntExtra("totalSize", 0)

   전달 받은 전체 문제 갯수

 3. Intent(this@ResultActivity, MainActivity::class.java)

   메인 액티비티로 이동하는  Intent

 4. startActivity(intent)

   메인 액티비티로 이동

class ResultActivity : AppCompatActivity() {

    private lateinit var binding: ActivityResultBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityResultBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val score = intent.getIntExtra("score", 0)
        val totalSize = intent.getIntExtra("totalSize", 0)

        //점수 보여주기
        binding.scoreText.text = getString(R.string.count_label, score, totalSize)

        //다시하기 버튼
        binding.resetBtn.setOnClickListener {
            val intent = Intent(this@ResultActivity, MainActivity::class.java)
            startActivity(intent)
        }
    }
}

 

반응형

3. 메인 코드 구현 MainActivity.kt

 -  설명 - 

 1. Intent(this@MainActivity, ResultActivity::class.java)

   결과 액티비티로 이동하는 intent

 2. intent.putExtra("score", score)

   결과 액티비티에 전달할 점수

 3. intent.putExtra("totalSize", questionList.size)

   결과 액티비티에 전달할 전체 문제 갯수

 4. startActivity(intent)

   결과 액티비티로 이동

 5. finish()

   액티비티 닫기

class MainActivity : AppCompatActivity(), View.OnClickListener {

    private lateinit var binding:ActivityMainBinding

    private var currentPosition: Int = 1 //질문 위치
    private var selectedOption: Int = 0 //선택 답변 값
    private var score: Int = 0 // 점수

    private lateinit var questionList: ArrayList<Question>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //질문 리스트 가져오기
        questionList = QuestionData.getQuestion()

        //화면 셋팅
        getQuestionData()

        binding.option1Text.setOnClickListener(this)
        binding.option2Text.setOnClickListener(this)
        binding.option3Text.setOnClickListener(this)
        binding.option4Text.setOnClickListener(this)

        //답변 체크 이벤트
        binding.submitBtn.setOnClickListener {

            if(selectedOption != 0){

                val question = questionList[currentPosition-1]

                //정답 체크(선택 답변과 정답을 비교)
                if(selectedOption != question.correct_answer) { //오답

                    setColor(selectedOption, R.drawable.wrong_option_background)

                    callDialog("오답", "정답 ${question.correct_answer}")
                }else{
                    score++
                }
                setColor(question.correct_answer, R.drawable.correct_option_background)

                if(currentPosition == questionList.size){
                    binding.submitBtn.text = getString(R.string.submit, "끝")
                }else{
                    binding.submitBtn.text = getString(R.string.submit, "다음")
                }

            }else{
                //위치값 상승
                currentPosition++
                when{
                    //전체 문제 숫자가 현재 위치보다 크면 다음 문제로 셋팅
                    currentPosition <= questionList.size -> {
                        //다음 문제 셋팅
                        getQuestionData()
                    }

                    else ->{
                        //결과 액티비티로 넘어가는 코드
                        val intent = Intent(this@MainActivity, ResultActivity::class.java)
                        intent.putExtra("score", score)
                        intent.putExtra("totalSize", questionList.size)
                        startActivity(intent)
                        finish()
                    }
                }
            }
            //선택값 초기화
            selectedOption = 0
        }//submitBtn

    } //onCreate

    /**
     * 답변 배경색상 변경
     */
    private fun setColor(opt: Int, color: Int){
        when(opt){
            1 -> binding.option1Text.background = ContextCompat.getDrawable(this, color)
            2 -> binding.option2Text.background = ContextCompat.getDrawable(this, color)
            3 -> binding.option3Text.background = ContextCompat.getDrawable(this, color)
            4 -> binding.option4Text.background = ContextCompat.getDrawable(this, color)
        }
    }

    /**
     * 정답 확인 다이얼로그
     */
    private fun callDialog(alertTitle: String, correctAnswer: String){

        AlertDialog.Builder(this)
            .setTitle(alertTitle)
            .setMessage("정답: $correctAnswer")
            .setPositiveButton("OK"){
                dialogInterface, i ->
                dialogInterface.dismiss() //창 닫기
            }
            .setCancelable(false)
            .show()
    }


    /**
     * 문제 셋팅
     */
    private fun getQuestionData(){

        //답변 설정 초기화
        setOptionStyle()

        //질문 변수에 담기
        val question = questionList[currentPosition-1]

        //상태바 위치
        binding.progressBar.progress = currentPosition

        //상태바 최대값
        binding.progressBar.max = questionList.size

        //현재 위치 표시
        binding.progressText.text = getString(R.string.count_label, currentPosition, questionList.size)

        //질문 표시
        binding.questionText.text = question.question

        //답변 표시
        binding.option1Text.text = question.option_one
        binding.option2Text.text = question.option_two
        binding.option3Text.text = question.option_three
        binding.option4Text.text = question.option_four

        setSubmitBtn("제출")
    }

    //제출 버튼 텍스트 설정
    private fun setSubmitBtn(name: String){

        binding.submitBtn.text = getString(R.string.submit, name)
    }

    /**
     * 답변 스타일 설정
     */
    private fun setOptionStyle(){

        var optionList: ArrayList<TextView> = arrayListOf()
        optionList.add(binding.option1Text)
        optionList.add(binding.option2Text)
        optionList.add(binding.option3Text)
        optionList.add(binding.option4Text)

        //답변 텍스트뷰 설정
        for(op in optionList){
            op.setTextColor(Color.parseColor("#555151"))
            op.background = ContextCompat.getDrawable(this, R.drawable.option_background)
            op.typeface = Typeface.DEFAULT
        }
    }

    /**
     * 답변 선택 이벤트
     */
    private fun selectedOptionStyle(view: TextView, opt: Int){

        //옵션 초기화
        setOptionStyle()

        //위치 담기
        selectedOption = opt

        view.setTextColor((Color.parseColor("#5F00FF")))
        view.background = ContextCompat.getDrawable(this, R.drawable.selected_option_background)
        view.typeface = Typeface.DEFAULT_BOLD
    }

    override fun onClick(view: View) {
        when(view.id){
            R.id.option1_text -> selectedOptionStyle(binding.option1Text, 1)
            R.id.option2_text -> selectedOptionStyle(binding.option2Text, 2)
            R.id.option3_text -> selectedOptionStyle(binding.option3Text, 3)
            R.id.option4_text -> selectedOptionStyle(binding.option4Text, 4)
        }
    }
}

2022.11.07 - [안드로이드] - [안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

2022.08.29 - [안드로이드] - [안드로이드 코틀린] 야구 게임 만드는 방법 part1 - 화면 구성

[안드로이드 코틀린] 야구 게임 만드는 방법 part1 - 화면 구성

2022.08.08 - [안드로이드] - [안드로이드 코틀린] 같은 그림 찾기 게임 만드는 방법 part2 - 이미지 섞기& 보여주기

[안드로이드 코틀린] 같은 그림 찾기 게임 만드는 방법 part2 - 이미지 섞기& 보여주기