로또 번호 추첨 토이 프로젝트

-constraint 화면 구성

전 프로젝트에서는 linear 화면 구성을 사용한 반면에

constraint 화면 구성을 사용했다

여러 제약을 통해 유연하게 앱 화면을 구성할 수 있다

구체적인 예시는 아래에서 살표보자

 

activity_main.xml 전체 코드

<?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">

    <NumberPicker
        android:id="@+id/numberPicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/addButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="16dp"
        android:text="번호 추가하기"
        app:layout_constraintEnd_toStartOf="@+id/clearButton"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/numberPicker" />

    <Button
        android:id="@+id/clearButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="초기화"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/addButton"
        app:layout_constraintTop_toBottomOf="@+id/numberPicker"
        app:layout_constraintTop_toTopOf="@+id/addButton" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:gravity="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/addButton">

        <TextView
            android:id="@+id/first_generated_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:layout_margin="5dp"
            android:text="1"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/second_generated_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="1"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/third_generated_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="1"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/fourth_generated_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="1"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/fifth_generated_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="1"
            android:textSize="18sp"
            android:textStyle="bold" />

    </LinearLayout>

    <Button
        android:id="@+id/runButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:text="자동 생성 시작"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

<NumberPicker
    android:id="@+id/numberPicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="100dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

-numberpicker 코드 생성

 

-구성

       top

start       end

     bottom

 

-제약 추가

app:layout_constraintEnd_toEndOf = "parent"

numberpicker의 오른쪽 경계를 바탕화면의 오른쪽으로부터 제약을 받도록 설정한다

그렇게 되면 numberpicker가 화면 오른쪽에 붙는다

 

같은 방식으로 top start end에 설정한 후

marginTop을 설정하여서 위치를 아래와 같이 둔다

이러한 방법으로 화면들을 구성했다

---

<TextView
    android:id="@+id/first_generated_num"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:text="1"
    android:textSize="18sp"
    android:textStyle="bold"
    android:visibility="gone"
    tools:visibility="visible" />

-android:visibility="gone"은 작동된 화면상에서는 이 TextView의 text가 보이지 않는다

그러나 tools:visibility="visible"을 통해 코드상 화면에서는 보이도록 설정했다

 

 

activity_main.xml 파일의 버튼들을 MainActivity.kt에 연결해보자

private val clearButton: Button by lazy {
    findViewById<Button>(R.id.clearButton)
}
private val addButton: Button by lazy {
    findViewById<Button>(R.id.addButton)
}

private val runButton: Button by lazy {
    findViewById<Button>(R.id.runButton)
}

private val numberPicker: NumberPicker by lazy{
    findViewById<NumberPicker>(R.id.numberPicker)
}

-by lazy

변수가 선언되면 그때 해당 값이 assign된다

뒤늦게 할당되어서 lazy인듯하다.

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

    numberPicker.minValue = 1
    numberPicker.maxValue = 45

    initRunButton()
    initAddButton()
}

-numberPicker가 작동되기 위해서는 minval과 maxval이 설정되어야 한다

 

-initRunButton, initAddButton 함수를 작동시킨다

함수 코드는 아래에...

 

initRunButton

private fun initRunButton(){
    runButton.setOnClickListener{
        val list = getRandomNumber()

        Log.d("MainActivity", list.toString())
    }
}

private fun getRandomNumber(): List<Int>{
    val numberList = mutableListOf<Int>()
        .apply {
            for (i in 1..45){
                this.add(i)
            }
        }
    numberList.shuffle()

    val newList = numberList.subList(0,6)

    return newList.sorted()
}

-추후에 수정할듯

 

-일단 Log에 랜덤으로 중복없이 생성된 6가지 번호를 정렬하여 추출하는 코드를 작성

 

-logic

1-45의 번호를 리스트에 넣고 shuffle함수를 사용하여 섞은 뒤 

앞 6개의 번호를 slicing하여 다른 리스트에 할당하고 정렬 함수를 써서

리턴하였음

이를 initRunButton에서 로그를 찍어 확인하는 것으로 코드를 작성함

 

initAddButton함수

 private fun initAddButton() {
        addButton.setOnClickListener{

            if (didRun) {
                Toast.makeText(this, "초기화 후에 시도해주세요. ", Toast.LENGTH_SHORT).show()
                return@setOnClickListener
            }

            if (pickedByUserNumberSet.size >= 5){
                Toast.makeText(this, "번호는 5개까지만 선택할 수 있습니다. ", Toast.LENGTH_SHORT).show()
                return@setOnClickListener
            }

            if (pickedByUserNumberSet.contains(numberPicker.value)) {
                Toast.makeText(this, "이미 선택한 번호입니다. ", Toast.LENGTH_SHORT).show()
                return@setOnClickListener
            }

            val textView = AutoGeneratedNumList[pickedByUserNumberSet.size]
            textView.isVisible = true
            textView.text = numberPicker.value.toString()

            pickedByUserNumberSet.add(numberPicker.value)



        }
    }

 private val previousNumTextView: List<TextView> by lazy {
        listOf<TextView>(
                    findViewById<TextView>(R.id.first_generated_num),
                    findViewById<TextView>(R.id.second_generated_num),
                    findViewById<TextView>(R.id.third_generated_num),
                    findViewById<TextView>(R.id.fourth_generated_num),
                    findViewById<TextView>(R.id.fifth_generated_num),
                    findViewById<TextView>(R.id.sixth_generated_num)
        )
    }

-didRun함수는 flag 값인듯하다... 추후에 코드 수정

 

-

val textView = previousNumTextView[pickedByUserNumberSet.size]

pickedByUserNumberSet은 사용자에게 번호가 뽑히기 전에는 크기가 0이다.

따라서 번호가 뽑히면서 순차적으로 첫번째부터 번호가 할당된다.

textView.isVisible = true
textView.text = numberPicker.value.toString()

pickedByUserNumberSet.add(numberPicker.value)

-textView를 그동안 보이지 않게 설정했으므로 다시 보이게 설정한다.

-textView.text를 numberPicker에 할당된 번호로 지정한다.

-->화면상에 뽑힌 번호가 보이게 된다

-pickedByUserNymberSet에 뽑힌 번호를 추가하며 함수 마무리

---

initClearButton 함수 구현

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

    numberPicker.minValue = 1
    numberPicker.maxValue = 45

    initRunButton()
    initAddButton()
    initClearButton()
}

private fun initRunButton(){
    runButton.setOnClickListener{
        val list = getRandomNumber()

        didRun = true

        list.forEachIndexed{
            index, number -> val textView = AutoGeneratedNumList[index]

            textView.text = number.toString()
            textView.isVisible = true
        }
        Log.d("MainActivity", list.toString())
    }
}

-forEachIndexed 를 통해 index와 내용을 동시에 추출한다

이 리스트에서 index와 number를 가져와서 순차적으로 textView에 할당하여

이를 화면에 띄우도록 한다

 

private fun initClearButton() {
    clearButton.setOnClickListener{
        pickedByUserNumberSet.clear()
        previousNumTextView.forEach{
            it.isVisible= false
        }

        didRun = false
    }
}

-초기화 버튼 기능

버튼을 눌렀을 때 set을 초기화한다

그 후 previousNumTextView를 순차적으로 초기화한ㄷ

 

-getRandomNumber 함수 수정

큰 목적: 사용자가 뽑은 숫자들과 자동으로 생성된 숫자들을 조합하여 리턴하자

---

res>drawble에 drawble 파일들을 추가한다

 

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#5FB5DB"/>
    <size
        android:width="44dp"
        android:height="44dp"/>
</shape>

-shape 추가 oval은 원 의미

-solid 속성 추가하여 색깔을 입힘

-size 속성 추가하여 가로 세로 크기 지정

 

이와 같은 파일들을 5개 추가한다 각각 다른 색으로

 

private fun setNumberBackground(number: Int, textView: TextView) {
    when(number) {
        in 1..10 -> textView.background = ContextCompat.getDrawable(this, R.drawable.circle_yellow)
        in 11..20 -> textView.background = ContextCompat.getDrawable(this, R.drawable.circle_blue)
        in 21..30 -> textView.background = ContextCompat.getDrawable(this, R.drawable.circle_red)
        in 31..40 -> textView.background = ContextCompat.getDrawable(this, R.drawable.circle_gray)
        else -> textView.background = ContextCompat.getDrawable(this, R.drawable.circle_green)
    }
}

-drawble 소스를 가져오기 위해서 ContextCompat.getDrawble를 사용한다

이를 통해 textView.background를 지정하여 사용한다.