Download
1 / 44
450 likes | 617 Views
2D Graphics. Outline. Basic Adding graphics to Sudoku Handing input The rest of the story Improvements. Basic -Color. int color = Color.BLUE ; // solid blue // Translucent purple color = Color.argb (127, 255, 0, 255); XML file color = getResources (). getColor ( R.color.mycolor );.
E N D
Outline • Basic • Adding graphics to Sudoku • Handing input • The rest of the story • Improvements
Basic -Color • int color = Color.BLUE; // solid blue • // Translucent purple • color = Color.argb(127, 255, 0, 255); • XML file • color = getResources().getColor(R.color.mycolor);
Paint • One of the Android native graphics library’s most important classes is the Paint class. • It holds the style, color, and other information needed to draw any graphics including bitmaps, text, and geometric shapes. • Normally when you paint something on the screen, you want to draw it in a solid color. • You set that color with the Paint.setColor( ) method. • For example: • cPaint.setColor(Color.LTGRAY); • This uses the predefined color value for light gray.
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.
Draw on Canvas • In Android, the display screen is taken up by an Activity, which hosts a View, which in turn hosts a Canvas. • Draw on that canvas by overriding the View.onDraw( ) method. • The only parameter to onDraw( ) is a canvas on which you can draw
Path • Draw lines, rectangles, and curves • Circular path • defines a circle at position x=150, y=150, with a radius of 100 pixels. (Clockwise) • circle = new Path(); • circle.addCircle(150, 150, 100, Direction.CW);
Drawable Class • Is used for a visual element like a bitmap or solid color that is intended for display only. • 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 • Drawables are often defined in XML • gradient • from one color to another (in this case, white to gray). • angle • specifies the direction of the gradient (270 degrees means top to bottom). • This will be used for the background of a view:
Use Drawable • Refer to it in XML with the android: • background=attribute or • setBackgroundResource(R.drawable.background) • in the view’s onCreate( ) method • This gives our GraphicsView example a nice gradient background,
Three different colors • 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, • 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.
Draw numbers • Find out what numbers to display. • getTileString( ) • To calculate the size of the numbers • set the font height to three-fourths the height of the tile • set the aspect ratio to be the same as the tile’s aspect ratio. • We can’t use absolute pixel or point sizes because we want the program to work at any resolution. • To determine the position of each number • center it in both the x and y dimensions. • The x direction is easy—just divide the tile width by 2. • the y direction, wehave to adjust the starting position downward a little so that the midpoint of the tile will be the midpoint of the number instead of its baseline. • We use the graphics library’s FontMetrics class to tell how much vertical space the letter will take in total, and then we divide that in half to get the adjustment.
Handling Input • Implement a little cursor that shows the player which tile is currently selected. • The selected tile is the one that will be modified when the player enters a number. • This code will draw the selection in onDraw( ):
Shaking Things Up • What if the user tries to enter an obviously invalid number, • such as a number that already appears in the three-by-three block? • Let’s make the screen wiggle back and forth when they do that. • First we add a call to the invalid number case in setSelectedTile( ).
The Rest of the Story • Creating the 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
