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

안녕하세요. 이번 시간에는 퀴즈 앱 만들기 세 번째 시간 - 답변 선택 이벤트를 만들어 보겠습니다.

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

2022.11.22 - [안드로이드] - [안드로이드 코틀린]간단한 퀴즈앱 만드는 방법 part2 - 퀴즈 만들기 및 보여주기

[안드로이드 코틀린]간단한 퀴즈앱 만드는 방법 part2 - 퀴즈 만들기 및 보여주기

---

목차

1. 실행 화면
2. 답변 선택 drawable selected_option_background.xml
3. 메인 코드 구현 MainActivity.kt

---

1. 실행 화면

2. 답변 선택 

drawable selected_option_background.xml

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

 - 설명 - 

 1. 답변 선택 background에 적용할 파일

 2. stroke

   외곽선 설정

 3. solid

   내부 설정

 4. corners

   모서리 설정

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 외곽선-->
    <stroke
        android:width="2dp"
        android:color="@android:color/holo_purple" />

    <!-- 내부 색상-->
    <solid android:color="@android:color/white" />

    <!-- 모서리 둥근 정도-->
    <corners android:radius="5dp" />
</shape>

 

반응형

3. 메인 코드 구현 MainActivity.kt

- 설명 - 

 1. View.OnClickListener

   뷰 클릭 이벤트

 2. option1Text.setOnClickListener(this)

   뷰 클릭 이벤트 설정

 3. override fun onClick

   클릭 이벤트 재정의

 4. setOptionStyle()

   답변 배경 스타일 설정

 5. selectedOptionStyle

   답변 선택 배경 스타일 설정

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)

    }

    private fun getQuestionData(){

        //질문 변수에 담기
        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.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성