[Kotlin] 안드로이드 스도쿠 앱 제작부터 스토어 출시까지 - 3

[Kotlin] 안드로이드 스도쿠 앱 제작부터 스토어 출시까지 - 1

https://developerkkyu37.tistory.com/94

[Kotlin] 안드로이드 스도쿠 앱 제작부터 스토어 출시까지 - 2

 

스도쿠 문제가 나왔으니 이제 숫자를 입력할 수 있게 해야된다. 먼저 스도쿠의 빈 영역을 누를 수 있는 이벤트를 만들어 줘야 한다. 

 

1. 선택 영역 생성

스도쿠 문제에 숫자가 없는 빈 영역을 클릭하면 색깔이 바뀌게 하고 싶었다. frameLayout을 클릭했을 때 그 영역의 색깔이 바뀌게 된다.

 

MainActivity.kt

private var lastClickedFrameLayout: FrameLayout? = null

    private fun DisplayGrid() {
        ...

        for (i in 0 until 9) {
            ...
            for (j in 0 until 9) {
					
                ...
                
                frameLayout.setOnClickListener {

                    // 기존에 클릭된 프레임 레이아웃의 배경색 초기화
                    lastClickedFrameLayout?.setBackgroundColor(Color.TRANSPARENT)
                    // 현재 클릭된 프레임 레이아웃의 배경색 변경
                    frameLayout.setBackgroundColor(Color.rgb(173, 216, 230))
                    // 현재 클릭된 프레임 레이아웃을 lastClickedFrameLayout에 저장
                    lastClickedFrameLayout = frameLayout
                }

				...
            }
        }
		...
    }

2. 숫자 버튼 생성

1부터 9까지의 버튼을 만들어준다.

 

activity.xml

<GridLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="0"
            android:rowCount="1"
            android:columnCount="9"
            android:layout_margin="16dp"
            android:layout_gravity="bottom"
            android:layout_marginBottom="16dp">

            <android.widget.Button
                android:id="@+id/btn1"
                android:layout_row="0"
                android:layout_column="0"
                android:background="#00FFFFFF"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_columnWeight="1"
                android:textColor="@color/black"
                android:textSize="40sp"
                android:text="1"/>

            <android.widget.Button
                android:id="@+id/btn2"
                android:layout_row="0"
                android:layout_column="1"
                android:background="#00FFFFFF"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_columnWeight="1"
                android:textColor="@color/black"
                android:textSize="40sp"
                android:text="2"/>

            <android.widget.Button
                android:id="@+id/btn3"
                android:layout_row="0"
                android:layout_column="2"
                android:background="#00FFFFFF"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_columnWeight="1"
                android:textColor="@color/black"
                android:textSize="40sp"
                android:text="3"/>

            <android.widget.Button
                android:id="@+id/btn4"
                android:layout_row="0"
                android:layout_column="3"
                android:background="#00FFFFFF"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_columnWeight="1"
                android:textColor="@color/black"
                android:textSize="40sp"
                android:text="4"/>

            <android.widget.Button
                android:id="@+id/btn5"
                android:layout_row="0"
                android:layout_column="4"
                android:background="#00FFFFFF"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_columnWeight="1"
                android:textColor="@color/black"
                android:textSize="40sp"
                android:text="5"/>

            <android.widget.Button
                android:id="@+id/btn6"
                android:layout_row="0"
                android:layout_column="5"
                android:background="#00FFFFFF"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_columnWeight="1"
                android:textColor="@color/black"
                android:textSize="40sp"
                android:text="6"/>

            <android.widget.Button
                android:id="@+id/btn7"
                android:layout_row="0"
                android:layout_column="6"
                android:background="#00FFFFFF"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_columnWeight="1"
                android:textColor="@color/black"
                android:textSize="40sp"
                android:text="7"/>

            <android.widget.Button
                android:id="@+id/btn8"
                android:layout_row="0"
                android:layout_column="7"
                android:background="#00FFFFFF"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_columnWeight="1"
                android:textColor="@color/black"
                android:textSize="40sp"
                android:text="8"/>

            <android.widget.Button
                android:id="@+id/btn9"
                android:layout_row="0"
                android:layout_column="8"
                android:background="#00FFFFFF"
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_columnWeight="1"
                android:textColor="@color/black"
                android:textSize="40sp"
                android:text="9"/>
        </GridLayout>

 

3. 숫자 버튼 입력

이제 숫자 버튼을 클릭해 스도쿠 그리드에 클릭한 숫자가 나오게 해준다. 숫자 버튼의 text를 그리드 값의 담고 다시 Display() 함수를 실행해 숫자가 나오도록 한다.

private fun DisplayGrid() {
        ...

        val btn1: Button = findViewById(R.id.btn1)
        val btn2: Button = findViewById(R.id.btn2)
        val btn3: Button = findViewById(R.id.btn3)
        val btn4: Button = findViewById(R.id.btn4)
        val btn5: Button = findViewById(R.id.btn5)
        val btn6: Button = findViewById(R.id.btn6)
        val btn7: Button = findViewById(R.id.btn7)
        val btn8: Button = findViewById(R.id.btn8)
        val btn9: Button = findViewById(R.id.btn9)

        val buttons = listOf(btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8, btn9)

        for (i in 0 until 9) {
            ...
            for (j in 0 until 9) {
				...

                frameLayout.setOnClickListener {

                    // 기존에 클릭된 프레임 레이아웃의 배경색 초기화
                    lastClickedFrameLayout?.setBackgroundColor(Color.TRANSPARENT)
                    // 현재 클릭된 프레임 레이아웃의 배경색 변경
                    frameLayout.setBackgroundColor(Color.rgb(173, 216, 230))

                    // 현재 클릭된 프레임 레이아웃을 lastClickedFrameLayout에 저장
                    lastClickedFrameLayout = frameLayout

                    for (button in buttons) {
                        button.setOnClickListener {
                            val buttonText: CharSequence = button.text
                            val intValue: Int = buttonText.toString().toInt()

                            riddleGrid[i][j] = intValue

                            DisplayGrid()
                        }
                    }

                }

               ...
            }
        }
        ...
    }

 

4. 함수 실행 및 화면 출력

MainActivity.kt

 

OnCreate 함수에서 만들어두었던 함수를 실행하고 최종적으로 DisplayGrid 함수를 실행해 화면에 스도쿠 문제 배열을 보여준다. 이제 숫자 버튼 클릭을 통해 숫자를 채워 줄 수 있다.

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        InitGrid(solvedgrid)
        ShuffleGrid(solvedgrid, 3)
        CreateRiddleGrid(piecesToErase)
        setContentView(R.layout.activity_main)
        DisplayGrid()
    }

• 애뮬레이터 실행 모습