Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
CS260 Intro to Java & Android09.AndroidAdvUI (Part I)
Winter 2020
Winter 2020 CS260 - Intro to Java & Android 1
Creating TicTacToe for Android
We are going to begin to use everything we’ve learned thus far to produce the shell of an Android TicTacToe game
Winter 2020 CS260 - Intro to Java & Android 2
TicTacToe for AndroidStep #1
Create Initial App
Create TicTacToeAndroid using the default settings for an Android project
Delete the Hello World textView widget
Winter 2020 CS260 - Intro to Java & Android 3
TicTacToe for AndroidStep #1
Create Initial App
Winter 2020 CS260 - Intro to Java & Android 4
• Create main screen withcolors of your choice. Changethe action bar color also.
• There are three different colorson the screen
TicTacToe for AndroidStep #2
Add an Array Resource
Create a string array in strings.xml where the string-array name is gameDifficulty and the items are Easy, Medium, Hard
<resources>
<string name="app_name">TicTacToe V1.0</string>
<string name="sNewGame">New Game</string>
<string name="sAbout">About</string>
<string-array name="aGameDifficulty">
<item>Easy</item>
<item>Medium</item>
<item>Hard</item>
</string-array>
</resources>
Winter 2020 CS260 - Intro to Java & Android 5
TicTacToe for AndroidStep #3
Add a Menu
Add a menu folder inside of the res folder
Add the following menu.xml file to the menu folder
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menuAbout"
android:orderInCategory="0"
app:showAsAction="never"
android:title="@string/sAbout"/>
<item
android:id="@+id/menuSettings"
android:orderInCategory="1"
app:showAsAction="never"
android:title="Settings"/>
</menu>
Winter 2020 CS260 - Intro to Java & Android 6
TicTacToe for AndroidStep #4
Add a Menu
• After onCreate, add the following method
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu, menu);
return true;
}
Winter 2020 CS260 - Intro to Java & Android 7
Menu Results
• You should see the menu in the upper right
Winter 2020 CS260 - Intro to Java & Android 8
TicTacToe for AndroidStep #5
Handle Menu Selection
@Overridepublic boolean onOptionsItemSelected(MenuItem item) {
// Handle item selectionswitch (item.getItemId()) {case R.id.menuAbout:Log.d ("onOptionsItemSelected", "About");return true;
case R.id.menuSettings:Log.d ("onOptionsItemSelected", "Settings");return true;
default:return super.onOptionsItemSelected (item);
}}
Winter 2020 CS260 - Intro to Java & Android 9
Menu Results
01-16 20:19:21.311 6675-6675/edu.pacificu.cs.tictactoeas353 D/onOptionsItemSelected: About
Winter 2020 CS260 - Intro to Java & Android 10
TicTacToe for AndroidStep #6
Game Start
• There are any number of ways to start the game:
– Put in some Buttons
– Use an AlertDialog that asks for difficulty level and then calls start game
– Simply start the game right away
Winter 2020 CS260 - Intro to Java & Android 11
Graphics
We will explore still graphics and then graphic animation
Android provides libraries to perform 2D and 3D graphics
android.graphics provides low-level graphics drawing tools such as
canvases
color filters
points
rectangles
Winter 2020 CS260 - Intro to Java & Android 12
Android colors
Represented with four 8-bit numbers (ARGB)
alpha - measures transparency where 0 is completely transparent and 255 is completely opaque
red
green
blue
int color = Color.BLACK;int color = Color.argb (127, 0, 255, 255);
Winter 2020 CS260 - Intro to Java & Android 13
Paint
The Paint class holds information about
style and color
how to draw geometries, text, and bitmaps
Before drawing a color, it is common to set the color with the method setColor (Color.BLUE); which is part of the Paint class
Winter 2020 CS260 - Intro to Java & Android 14
Canvas
The canvas is a surface to draw on
Android framework APIs provide 2D drawing APIs to:
a) render your own graphics on a canvas - need to call onDraw () method passing a Canvas
b) modify (customizing) existing Views - draw graphics or animations into an existing View
a) is best for simple graphics with no animation
b) is best for video games with complex animation and frequent redraws
Winter 2020 CS260 - Intro to Java & Android 15
Basic Display
An Activity provides the UI for the display screen
An Activity hosts a View
A View hosts a Canvas
The onDraw () method can be overridden to perform custom drawing on the Canvas
Winter 2020 CS260 - Intro to Java & Android 16
Custom View (Step #1)Create TicTacToeView.java
import android.graphics.Canvas;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.view.View;
import android.content.Context;
public class TicTacToeView extends View
{
private ShapeDrawable mDrawable;
public TicTacToeView (Context context)
{
super (context);
int x = 10, y = 10, width = 300, height = 50;
mDrawable = new ShapeDrawable (new OvalShape ());
mDrawable.getPaint ().setColor (getResources ().getColor (R.color.cGreen));
mDrawable.setBounds (x, y, x + width, y + height);
}
protected void onDraw (Canvas canvas)
{
mDrawable.draw (canvas);
}
}
Winter 2020 CS260 - Intro to Java & Android 17
Drawing Custom ViewStep #2
public class MainActivity extends AppCompatActivity
{
int mGameDifficultyLevel = 0;
TicTacToeView mTicTacToeView;
@Override
protected void onCreate (Bundle savedInstanceState)
{
super.onCreate (savedInstanceState);
// setContentView (R.layout.activity_main);
mTicTacToeView = new TicTacToeView (this);
setContentView (mTicTacToeView);
}
Winter 2020 CS260 - Intro to Java & Android 18
TicTacToe for AndroidStep #4
Winter 2020 CS260 - Intro to Java & Android 19
CustomView Modifications
You can do any kind of drawing in the onDraw of a custom view.
The following slides allow you to draw the lines of a TicTacToe board
See if you can get this to work
Winter 2020 CS260 - Intro to Java & Android 20
Let's Create TicTacToe ScreenIssues
Sometimes the IDE doesn't seem to recognize what needs to be imported. Here are the imports
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import android.view.View;
import android.content.Context;
Winter 2020 CS260 - Intro to Java & Android 21
Let's Create TicTacToe ScreenStep #1
TicTacToeView is to have the following instance variables:
private Paint mBackground = new Paint ();
private Paint mDarkLines = new Paint();
private final int NUMBER_OP_RECTANGLES = 3;
private int mRectangleHeight;
private int mRectangleWidth;
Winter 2020 CS260 - Intro to Java & Android 22
Let's Create TicTacToe ScreenStep #2
TicTacToeView constructor is to look like:
public TicTacToeView (Context context)
{
super (context);
Log.d ("TicTacToeView", "Constructor Call");
}
Winter 2020 CS260 - Intro to Java & Android 23
Let's Create TicTacToe ScreenStep #3
Complete onDraw calculating mRectangleHeight, mRectangleWidth and vertical line draw
@Override
protected void onDraw (Canvas canvas)
{
mBackground.setColor (getResources ().getColor (R.color.cSteelblue));
mDarkLines.setColor (Color.BLACK);
canvas.drawRect (0, 0, getWidth (), getHeight (), mBackground);
// mRectangleHeight = // mRectangleWidth =
mDarkLines.setColor (Color.BLACK);
for (int i = 0; i < NUMBER_OP_RECTANGLES; i++)
{
// Draw Horizontal Line
canvas.drawLine (0, i * mRectangleHeight, getWidth(),
i * mRectangleHeight, mDarkLines);
// Draw Vertical Line
}
}
Winter 2020 CS260 - Intro to Java & Android 24
Result
Winter 2020 CS260 - Intro to Java & Android 25