Drawing the Board

Android calls a view's onDraw() method every time any part of the view needs to be updated. To simplify things, onDraw( ) pretends that you're re-creating the entire screen from scratch. In reality, you may be drawing only a small portion of the view as defined by the canvas's clip rectangle. Android takes care of doing the clipping for you.

Start by defining a few new colors to play with in res/values/colors.xml:

Download Sudokuv2/res/values/colors.xml

<color name="puzzle_background">#ffe6f0ff</color> <color name="puzzle_hilite">#ffffffff</color> <color name="puzzle_light">#64c6d4ef</color> <color name="puzzle_dark">#6456648f</color> <color name="puzzle_foreground">#ff000000</color> <color name="puzzle_hint_0">#64ff0000</color> <color name="puzzle_hint_1">#6400ff80</color> <color name="puzzle_hint_2">#2000ff80</color> <color name="puzzle_selected">#64ff8000</color>

Here's the basic outline for onDraw():

Download Sudokuv2/src/org/example/sudoku/PuzzleView.java

@Override protected void onDraw(Canvas canvas) { // Draw the background... Paint background = new Paint(); background.setColor(getResources().getColor(

R.color.puzzle_background)); canvas.drawRect(0, 0, getWidth(), getHeight(), background);

// Draw the board... // Draw the numbers... // Draw the hints... // Draw the selection...

The first parameter is the Canvas on which to draw. In this code, we're just drawing a background for the puzzle using the puzzle_background color.

Now let's add the code to draw the grid lines for the board:

Download Sudokuv2/src/org/example/sudoku/PuzzleView.java

// Define colors for the grid lines

dark.setColor(getResources().getColor(R.color.puzzle_dark)); Paint hilite = new Paint();

hilite.setColor(getResources().getColor(R.color.puzzle_hilite)); Paint light = new Paint();

light.setColor(getResources().getColor(R.color.puzzle_light));

// Draw the minor grid lines for (int i =0; i <9; i++) {

canvas.drawLine(0, i * height, getWidth(), i * height, light);

canvas.drawLine(0, i * height + 1, getWidth(), i * height + 1, hilite);

canvas.drawLine(i * width, 0, i * width, getHeight(), light);

canvas.drawLine(i * width +1, 0, i * width + 1, getHeight(), hilite);

// Draw the major grid lines for (int i =0; i <9; i++) { if (i % 3 != 0) continue;

canvas.drawLine(0, i * height, getWidth(), i * height, dark);

canvas.drawLine(0, i * height + 1, getWidth(), i * height + 1, hilite);

canvas.drawLine(i * width, 0, i * width, getHeight(), dark); canvas.drawLine(i * width +1, 0, i * width + 1, getHeight(), hilite);

The code uses three different colors for the grid lines: a light color between each tile, a dark color between the three-by-three blocks, and a highlight color drawn on the edge of each tile to make them look like they have a little depth. The order in which the lines are drawn is important, since lines drawn later will be drawn over the top of earlier lines. You can see what this will look like in Figure 4.3, on the following page. Next, we need some numbers to go inside those lines.

5:57 PM

Game

1

I

r

r

n

r

r

n

Figure 4.3: Drawing the grid lines with three shades of gray for an embossed effect

0 0

Post a comment