O X X X O O X O X. Tic-Tac-Toe. 5COSC005W MOBILE APPLICATION DEVELOPMENT Lecture 2: The Ultimate Tic-Tac-Toe Game

Transcription

1 Tic-Tac-Toe 5COSC005W MOBILE APPLICATION DEVELOPMENT Lecture 2: The Ultimate Tic-Tac-Toe Game Dr Dimitris C. Dracopoulos O X X X O O X O X The Ultimate Tic-Tac-Toe: Rules of the Game Dimitris C. Dracopoulos 1/25 A more sophisticated version of the classical tic-tac-toe game: Each square contains a smaller tic-tac-toe board. On each turn, a player marks one of the small squares. When you get three in a row on a small board, you have won that board. To win the game, you need to win three small boards in a row. You dont get to pick which of the nine boards to play on. Thats determined by your opponents previous move. Whichever square he picks, thats the board you must play in next. if the opponent sends you to a board that s already been won you get to go anywhere you like, on any of the other boards. what if a small board is a tie? It can count as either an X or an O. If one player ticks this box: Dimitris C. Dracopoulos 2/25 Dimitris C. Dracopoulos 3/25 Dimitris C. Dracopoulos 4/25

2 Then the next player must tick a box in this area: Dimitris C. Dracopoulos 5/25 Dimitris C. Dracopoulos 6/25 Designing a User Interface The activity main.xml File Using XML Using Code This can also be done by using various graphical editors BUT you should know how to do it in XML and code. < FrameLayout xmlns:android =" http: // schemas. android. com / apk / res / android " xmlns:tools =" http: // schemas. android. com / tools " android: layout_ height =" match_ parent " android: clipchildren =" false " tools: context =". TicTacToeActivity " > < fragment android:id ="@+id/ main_fragment " class =" org. example. tictactoe. MainFragment " android: layout_ width =" wrap_ content " android: layout_ gravity =" center " tools:layout / fragment_main "/> </ FrameLayout > Dimitris C. Dracopoulos 7/25 Dimitris C. Dracopoulos 8/25

3 Android Layouts Layout Parameters Some common layouts: LinearLayout: Arranges its children in a single column or row. FrameLayout: Used to block out an area on the screen to display a single item, but can be used to add multiple children views by controlling their position with a gravity value RelativeLayout: Arranges its children in relation to each other or to the parent. This is often used in forms GridLayout: Arranges its children in rows and columns, similar to an HTML table ConstraintLayout: Arranges its children in a flexible way by providing relative positioning, circular positioning (by angle and distance) and other different ways Some parameters are common to all layouts: xmlns:android=" res/android": Defines the XML namespace for Android. You should define this once, on the first XML tag in the file android:layout width="match parent", android:layout height="match parent": Takes up the entire width and height of the parent (in this case, the window) Possible values: match parent wrap content Dimitris C. Dracopoulos 9/25 Creating the Main Fragment fragment main.xml < LinearLayout xmlns:android =" http: // schemas. android. com / apk / res / android " xmlns:tools =" http: // schemas. android. com / tools " android: layout_ width =" wrap_ content " android: background drawable / menu_ background " android: elevation / elevation_ high " android: orientation =" vertical " android: padding / menu_ padding " tools: context =". TicTacToeActivity " > < TextView android: layout_ width =" wrap_ content " android: layout_ marginbottom / menu_ space " android:text / long_app_name " android: textappearance ="? android: textappearancelarge " android:textsize / menu_text_size "/> Dimitris C. Dracopoulos 11/25 Dimitris C. Dracopoulos 10/25 Creating the Main Fragment fragment main.xml < Button android:id ="@+id/ continue_button " android: layout_ margin / menu_ button_ margin " android: padding / menu_ button_ padding " android:text / continue_label "/> < Button android:id ="@+id/ new_button " android: layout_ gravity =" center " android: layout_ margin / menu_ button_ margin " android: padding / menu_ button_ padding " android:text / new_game_label "/> < Button android:id ="@+id/ about_button " android: layout_ gravity =" center " android: layout_ margin / menu_ button_ margin " android: padding / menu_ button_ padding " android:text / about_label "/> </ LinearLayout > Dimitris C. Dracopoulos 12/25

4 Units and Creating Resource IDs The creates a new resource ID which other code can use it. button defines the ID for the About button, which can be used to make something happen when the user presses that button. The following can be used as units for defining spacing: px (pixels): Dots on the screen. in (inches): Size as measured by a ruler. mm (millimeters): Size as measured by a ruler. pt (points): 1/72 of an inch. dp (density-independent pixels): An abstract unit based on the density of the screen. On a display with 160 dots per inch, 1dp = 1px. dip: Synonym for dp, used more often in Google examples. sp (scale-independent pixels): Similar to dp but also scaled by the users font size preference. Use sp unit for text sizes; dip unit for everything else. Dimitris C. Dracopoulos 13/25 The Java Code for the Opening Page of the Game The main activity: package org. example. tictactoe ; import android. app. Activity ; import android.os. Bundle ; public class MainActivity extends Activity { protected void oncreate ( Bundle savedinstancestate ) { super. oncreate ( savedinstancestate ); setcontentview ( R. layout. activity_ main ); Views Besides the TextView some other common views (all of them derived by class View or its subclasses are): Button Checkbox EditText ImageButton ListView RadioButton VideoView WebView Defining the Fragment in the main Activity MainFragment.java: package org. example. tictactoe ; import android. app. AlertDialog ; import android. app. Fragment ; import android. content. DialogInterface ; import android.os. Bundle ; import android. view. LayoutInflater ; import android. view. View ; import android. view. ViewGroup ; public class MainFragment extends Fragment { private AlertDialog mdialog ; Dimitris C. Dracopoulos 14/25 public View oncreateview ( LayoutInflater inflater, ViewGroup container, Bundle savedinstancestate ) { View rootview = inflater. inflate ( R. layout. fragment_main, container, false ); // Handle buttons here... return rootview ; Dimitris C. Dracopoulos 15/25 Dimitris C. Dracopoulos 16/25

5 The About Button The Code for the About button Fill the rest of the MainFragment.java in the appropriate place: // Handle buttons here... View aboutbutton = rootview. findviewbyid ( R. id. about_ button ); aboutbutton. setonclicklistener ( new View. OnClickListener () { public void onclick ( View view ) { AlertDialog. Builder builder = new AlertDialog. Builder ( getactivity ()); builder. settitle (R. string. about_title ); builder. setmessage (R. string. about_text ); builder. setcancelable ( false ); builder. setpositivebutton ( R. string. ok_label, new DialogInterface. OnClickListener () { public void onclick ( DialogInterface dialoginterface, int i) { // nothing ); ); mdialog = builder. show (); Dimitris C. Dracopoulos 17/25 Dimitris C. Dracopoulos 18/25 The MainFragment.java (cont ed) When the activity containing the fragment is paused (e.g. when another app is started, the About dialog should be dismissed: public void onpause () { super. onpause (); // Get rid of the about dialog if it s still up if ( mdialog!= null ) mdialog. dismiss (); Defining Resources The strings.xml file: < string name =" app_name ">UT3 </ string > < string name =" long_app_name ">Ultimate Tic Tac Toe </ string > < string name =" action_settings ">Settings </ string > < string name =" continue_label ">Continue </ string > < string name =" new_game_label ">New Game </ string > < string name =" about_label ">About </ string > < string name =" ok_label ">OK </ string > < string name =" about_ title " > About Ultimate Tic Tac Toe </ string > < string name =" about_text ">\ This game is played just like regular Tic Tac Toe with one difference: to win a tile you have to win a smaller game of Tic Tac Toe inside that tile.\ n\ n A tie happens when there are no further moves. In the case of a tie in a small board, that will count as a win for both sides in the larger game. </ string > Dimitris C. Dracopoulos 19/25 Dimitris C. Dracopoulos 20/25

6 The dimens.xml File The Drawables Resources <dimen name =" elevation_high ">8dp </ dimen > <dimen name =" stroke_width ">1dp </ dimen > <dimen name =" corner_radius ">4dp </ dimen > <dimen name =" menu_padding ">10 dp </ dimen > <dimen name =" menu_space ">10 dp </ dimen > <dimen name =" menu_text_size ">32 sp </ dimen > <dimen name =" menu_button_margin ">4dp </ dimen > <dimen name =" menu_button_padding ">10 dp </ dimen > Drawables are any kind of graphical objects that can be drawn on the screen.the simplest drawables are bitmaps, which are typically stored in PNG or JPG format. Example: menu background.xml, the background of the launcher screen. <shape xmlns : android =" http :// schemas. android. com / apk / res / android " android : shape =" rectangle "> < stroke android : width / stroke_width " android : color / border_color "/> <solid android : color / field_color "/> < corners android : radius / corner_radius "/> </ shape > The Colors Resources Dimitris C. Dracopoulos 21/25 The Styles and Themes Dimitris C. Dracopoulos 22/25 <color name =" field_color " ># b5cee0 </ color > <color name =" border_color " >#7 f7f7f </ color > Define the looks of an app. A theme is a collection of styles. A style is a set of values that control appearances and behaviors. looking inside AndroidManifest.xml: android : theme / AppTheme " This is defined inside styles.xml: <!-- Base application theme. --> < style name =" AppTheme " parent =" android : Theme. Holo. Light. NoActionBar. Fullscreen "> <!-- Customize your theme here. --> </ style > Dimitris C. Dracopoulos 23/25 Dimitris C. Dracopoulos 24/25

7 Debugging with Log Messages Print messages of various severity levels to the Android system log: Log.e(): Errors Log.w(): Warnings Log.i(): Information Log.d(): Debugging Log.v(): Verbose Log.wtf(): What a Terrible Failure.Report an exception that should never happen. Look at the Logcat to select variouls levels of log severity level. Alternatively, Use the Debugger Dimitris C. Dracopoulos 25/25