Tic Tac Toe App Notes

# Tic Tac Toe App ## Overview * The Tic Tac Toe application demonstrates Model-View-Controller (MVC) architecture and GUI creation using code instead of XML layouts. * It utilizes `GridLayout` for arranging buttons and implements event handling. ## GUI and Dynamic Generation * GUIs can be dynamic, generated based on data from files or remote websites. * Instead of hardcoding layouts in XML, code-based GUI creation offers flexibility. * For Tic Tac Toe, a 3x3 two-dimensional array of buttons is more manageable than placing individual buttons in an XML file. ## TicTacToeV2 * The app doesn't use XML for the GUI; it's built programmatically using a 3x3 button array. * It adheres to the MVC architecture, with classes for the Model (TicTacToe), and a combined View and Controller (to be separated later). ## Model: TicTacToe Class * The `TicTacToe` class represents the Model and contains: * A 3x3 two-dimensional array of integers representing the game board. * An integer indicating whose turn it is. ## Array Values * $0$: Cell is available. * $1$: Player 1 (X) has played in that cell. * $2$: Player 2 (O) has played in that cell. * An array of characters could also be used (' ', 'X', 'O'). ## TicTacToe Class Methods * The `TicTacToe` class includes methods for: * Playing the game. * Checking for a win. * Detecting game over. * Resetting the game. ## Version 0 * Displays a 3x3 grid of buttons. ## MainActivity and GridLayout * `GridLayout` is used to manage the screen layout and button placement. * `GridLayout` arranges components in a rectangular grid. ## MainActivity Steps * Retrieve the screen's width. * Define and instantiate a `GridLayout` with 3 rows and 3 columns. * Instantiate the array of `Buttons`. * Add the nine `Buttons` to the layout. * Set the `GridLayout` as the layout manager for the activity's view. ## Button Array * A 2-dimensional array of `Buttons` mirrors the Model's functionality: * `private lateinit var buttons : Array>` * The `Button` class is part of the `android.widget` package. ## GUI Construction * The `buildGuiByCode` method constructs the GUI. * It assumes a vertical orientation, where the screen width is less than its height. ## Dynamic Screen Size Handling * The screen width is retrieved dynamically to ensure GUI consistency across devices. * Each button's width and height are set to one-third of the screen's width. ## Retrieving Screen Dimensions * Various methods exist to get screen dimensions, some deprecated or API level-specific. * The `DisplayMetrics` for the current device are retrieved. ## Accessing System Resources * The `getSystem` method of the `Resources` class provides access to global, shared system resources. * `Resources.getSystem()` ## Getting Display Metrics * The `getDisplayMetrics` method (or `displayMetrics` attribute) of the `Resources` object is used to get device display metrics. * `Resources.getSystem().displayMetrics` ## Width and Height Pixels * The `widthPixels` and `heightPixels` attributes of `DisplayMetrics` provide the screen's width and height in pixels (integers). ## Chaining Method Calls * Method calls can be chained to retrieve the screen width: * `var width : Int = Resources.getSystem().displayMetrics.widthPixels` * `var width : Int = resources.displayMetrics.widthPixels` ## Setting Button Size * Button side length is calculated: * `var w : Int = width / TicTacToe.SIDE` * This value is then assigned to the width and height of` each `Button`. ## Layout Management * The Android library offers several layout classes for GUI management. * `GridLayout` is used to display the 3x3 grid of `Buttons`. ## Hierarchy of Layout Classes * `View` * `ViewGroup` * `GridLayout` * `LinearLayout` * `RelativeLayout` * `FrameLayout` * `TableLayout` * `TableRow` ## GridLayout Constructor * `GridLayout(context : Context)` * `MainActivity