[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

이번 시간에는 Tic Tac Toe 보드 게임의 화면 구성을 해보겠습니다. 

Tic Tac Toe 게임은 오목처럼 번갈아 가며 클릭을 해서 누가 먼저 한 줄을 만들면

이기는 단순한 게임입니다. 

---

목차

1. 실행 화면
2. 뷰 바인딩
3. 메인 화면 activity_main.xml

---

1. 실행 화면

 

2. 뷰바인딩

build.gradle(Module:프로젝트명:app)

android 괄호 안에 아래 코드를 넣어주시면 됩니다.

findViewById 없이 뷰 객체 접근하기 위한 설정

  buildFeatures{
        viewBinding = true
    }

 

 

3. 메인 화면 activity_main.xml

- 설명 -

 1. 플레이어 레이아웃

   플레이어 이름과 승점으로 구성

   차례가 되면 플레이어 이름 빨간 표시

 2. 보드판 레이아웃 

   9개의 버튼으로 구성

   플레이어1은 X, 플레이어2는 O 모양을 표시

   먼저 한 줄을 만들면 점수 획득

 3. 리셋 버튼을 누르면 초기화

<?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:orientation="vertical"
    tools:context=".MainActivity">

    <!-- 플레이어 레이아웃 -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/player1"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="플레이어1"
            android:textSize="25sp" />

        <TextView
            android:id="@+id/player1Score"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/player1"
            android:gravity="center"
            android:text="0"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/player2"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:gravity="center"
            android:text="플레이어2"
            android:textSize="25sp" />

        <TextView
            android:id="@+id/player2Score"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/player2"
            android:layout_alignParentEnd="true"
            android:gravity="center"
            android:text="0"
            android:textSize="20sp" />
    </RelativeLayout>

    <!-- 보드판 레이아웃 -->
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="3"
        android:orientation="horizontal">

        <!-- 버튼0 -->
        <Button
            android:id="@+id/btn_0"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼1 -->
        <Button
            android:id="@+id/btn_1"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼2 -->
        <Button
            android:id="@+id/btn_2"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼3 -->
        <Button
            android:id="@+id/btn_3"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼4 -->
        <Button
            android:id="@+id/btn_4"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼5 -->
        <Button
            android:id="@+id/btn_5"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼6 -->
        <Button
            android:id="@+id/btn_6"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼7 -->
        <Button
            android:id="@+id/btn_7"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼8 -->
        <Button
            android:id="@+id/btn_8"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>
    </GridLayout>

    <!-- 리셋 버튼 -->
    <Button
        android:id="@+id/resetBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:backgroundTint="#E1470D"
        android:text="RESET GAME"
        android:textSize="25sp"
        android:textStyle="bold"/>
</LinearLayout>

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

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

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

2022.09.30 - [안드로이드] - [안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

[안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법