Presentation is loading. Please wait.

Presentation is loading. Please wait.

Exploring 2D Graphics: The Sudoku Example Content taken from book: “Hello, Android” by Ed Burnette Third Edition.

Similar presentations


Presentation on theme: "Exploring 2D Graphics: The Sudoku Example Content taken from book: “Hello, Android” by Ed Burnette Third Edition."— Presentation transcript:

1 Exploring 2D Graphics: The Sudoku Example Content taken from book: “Hello, Android” by Ed Burnette Third Edition

2 Two-dimensional graphics Android provides a complete native two- dimensional graphics library in its android.graphics package. Android colors are represented with four numbers, one each for alpha, red, green, and blue (ARGB).

3 Colors Each component of the ARGB can have 256 possible values, or 8 bits, so a color is typically packed into a 32-bit integer. Alpha is a measure of transparency. The lowest value, 0, indicates the color is completely transparent. Values in the middle are used for translucent, or semitransparent, colors.

4 Color specification int color = Color.BLUE; // solid blue // Translucent purple color = Color.argb(127, 255, 0, 255); #7fff00ff color = getResources().getColor(R.color.mycolor);

5 Paint The Paint class holds the style, color, and other information needed to draw any graphics including bitmaps, text, and geometric shapes. cPaint.setColor(Color.LTGRAY);

6 Canvas The Canvas class represents a surface on which you draw. Initially canvases start off devoid of any content, like blank transparencies for an overhead projector. Methods on the Canvas class let you draw lines, rectangles, circles, or other arbitrary graphics on the surface.

7 Example activity called Graphics The display screen is taken up by an Activity, which hosts a View, which in turn hosts a Canvas. You get an opportunity to draw on that canvas by overriding the View.onDraw( ) method.

8 Path The Path class holds a set of vector-drawing commands such as lines, rectangles, and curves.

9 Drawable A Drawable class is used for a visual element like a bitmap or solid color that is intended for display only. You can combine drawables with other graphics, or you can use them in user interface widgets (for example, as the background for a button or view).

10 Drawable Forms (1) Bitmap: A PNG or JPEG image. NinePatch: A stretchable PNG image, so named because originally it divided the image into nine sections. These are used for the background of resizable bitmap buttons. Shape: Vector-drawing commands, based on Path.

11 Drawable Forms (2) Layers: A container for child drawables that draw on top of each other in a certain order. States: A container that shows one of its child drawables based on its state (a bit mask). One use is to set various selection and focus states for buttons. Levels: A container that shows only one of its child drawables based on its level (a range of integers). This could be used for a battery or signal strength gauge.

12 Drawable Forms (3) Scale: A container for one child drawable that modifies its size based on the current level. One use might be a zoomable picture viewer. Drawables are often defined in XML

13 A gradient background defined in XML

14 Adding Graphics to Sudoku Starting the Game Modify Sudoku.java private void startGame(int i) { Log.d(TAG, "clicked on " + i); Intent intent = new Intent(this, Game.class); intent.putExtra(Game.KEY_DIFFICULTY, i); startActivity(intent); }

15 Game.java

16 Modify Manifest and String files AndroidManifest.xml res/values/strings.xml

17 PuzzleView class

18 Drawing the Board Res/values/colors.xml PuzzleView.java

19 Draw the board

20 Drawing the Numbers

21 Handling Input Android phones come in many shapes and sizes and have a variety of input methods. They might have a keyboard, a D-pad, a touch screen, a trackball, or some combination of these. A good Android program, therefore, needs to be ready to support whatever input hardware is available, just like it needs to be ready to support any screen resolution.

22 Defining and Updating the Selection This code shows the player which tile is currently selected We use the selection rectangle calculated earlier in onSizeChanged( ) to draw an alpha- blended color on top of the selected tile

23 Mofify PuzzleView.java Move the selection by overriding the onKey-Down( ) method @Override public boolean onKeyDown(int keyCode, KeyEvent event) { Log.d(TAG, "onKeyDown: keycode=" + keyCode + ", event=" + event); switch (keyCode) { case KeyEvent.KEYCODE_DPAD_UP: select(selX, selY - 1); break; case KeyEvent.KEYCODE_DPAD_DOWN: select(selX, selY + 1); break; case KeyEvent.KEYCODE_DPAD_LEFT: select(selX - 1, selY); break; case KeyEvent.KEYCODE_DPAD_RIGHT: select(selX + 1, selY); break; default: return super.onKeyDown(keyCode, event); } return true; }

24 directional pad (D-pad) you use the invalidate( ) method to mark rectangles as dirty. The window manager will combine all the dirty rectangles at some point in the future and call onDraw( ) again for you. The dirty rectangles become the clip region, so screen updates are optimized to only those areas that change.

25 Entering Numbers To handle keyboard input, we just add a few more cases to the onKey-Down( ) method for the numbers 0 through 9 (0 or space means erase the number).

26 D-pad

27 a call to setSelectedTile( ) to change the number on a tile

28 Adding Hints

29 Hints There are three states for zero, one, and two possible moves. If there are zero moves, that means the player has done something wrong and needs to backtrack.

30 Animation PuzzleView.java This loads and runs a resource called R.anim.shake, defined in res/anim/ shake.xml, that shakes the screen for 1,000 milliseconds (1 second) by 10 pixels from side to side. cycle_7.xml

31 Keypad The keypad is handy for phones that don’t have keyboards. It displays a grid of the numbers 1 through 9 in an activity that appears on top of the puzzle. The whole purpose of the keypad dialog box is to return a number selected by the player.

32 Creating the Keypad UI layout from res/layout/keypad.xml

33 Keypad class

34 findViews in Keypad.java

35 setListeners() in Keypad.java

36 onKeyDown() in Keypad.java

37 isValid and returnResult() in Keypad.java

38 Game.Java

39 Implementing the Game Logic In Game.java

40

41

42


Download ppt "Exploring 2D Graphics: The Sudoku Example Content taken from book: “Hello, Android” by Ed Burnette Third Edition."

Similar presentations


Ads by Google