1 / 42

Exploring 2D Graphics: The Sudoku Example

Exploring 2D Graphics: The Sudoku Example. Content taken from book: “Hello, Android” by Ed Burnette Third Edition. Two-dimensional graphics. Android provides a complete native two-dimensional graphics library in its android.graphics package.

vondra
Download Presentation

Exploring 2D Graphics: The Sudoku Example

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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); <?xml version="1.0" encoding="utf-8"?> <resources> <color name="mycolor">#7fff00ff</color> </resources> 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(inti) { 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 booleanonKeyDown(intkeyCode, 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 changethe 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

More Related