Graphics Concepts CS 2302, Fall 2014. 11/17/20142 Drawing in Android.
-
Upload
mary-green -
Category
Documents
-
view
219 -
download
0
Transcript of Graphics Concepts CS 2302, Fall 2014. 11/17/20142 Drawing in Android.
Graphics Concepts
CS 2302, Fall 2014
11/17/2014 2
Drawing in Android
11/17/2014 3
Android Alternatives
Android provides several ways to create graphic images Drawable objects
Defined by program code Defined in resource files Can be manipulated and animated
2D Canvas More in a moment, this is the approach we will take
3D Canvas
11/17/2014 4
Constructive Graphics
Android supports building graphic images from simple components
This is sometimes called vector graphics, recalling very early graphics display systems
The organization of the visible interface and underlying code is very similar to other systems Event driven drawing Constructive graphics
11/17/2014 5
Drawing Surface
Any View can be used as a drawing surface Reference
Every View has an associated Canvas object that provides various drawing methods Canvas reference Even buttons and other widgets can be drawn on,
though that may conflict with the drawing done for their basic look
View has a method onDraw() that is called by the system when any drawing needs to be done
11/17/2014 6
Why Event Driven Drawing?
In older systems, especially before Windows and Linux, drawing was carried out directly and immediately by programming commands
In Android and other GUI systems, drawing is delayed until the system asks for it by calling a method
This is because there are many situations in which the drawing may be needed, based on external circumstances The application is starting The application is being uncovered The application is being un-minimized
11/17/2014 7
Supporting Classes
There are numerous supporting classes needed to carry out effective drawing.
We mention just a few for now (the links lead to reference pages) Color (already discussed) Paint Paint.Style Path (will be discussed later)
11/17/2014 8
Class Paint
Paint objects are used to specify many characteristics of drawing
Paint can be used to specify The color used to outline and/or fill shapes The style of drawing a shape: filled or outlined Width of lines and curves How lines and curves will be 'joined' and 'capped' Characteristics of text such as font family, font size, and
weight
11/17/2014 9
A Widget to Draw On
Since drawing is carried out when the system calls the onDraw method in View, we must create a new class that Extends View Overrides onDraw
The overriding method will carry out the drawing The onDraw method takes one parameter, a Canvas that
can be used to create the graphics we wish
11/17/2014 10
Start an Application
Start a new Android application In the same package with the main activity, create a new
class named ViewForGraphics
11/17/2014 11
View Details
View does not have a default constructor, so we must provide at least one constructor that uses 'super'
It is convenient to use the constructor that takes two parameters
public ViewForGraphics(Context context, AttributeSet attrs)
This will allow the new class to be used like any other widget in the GUI editor We won't use that constructor in code
When overriding onDraw, call the super method to make sure any standard actions are taken
11/17/2014 12
Creating the Interface
In the GUI editor, remove the standard TextView Find the new 'widget' at the bottom of the palette Drag the new widget into the editing area Set the widget to fill the space completely Running the app at this point will show nothing
11/17/2014 13
Creating Paint
Any drawing needs paint A default Paint object will work, but is monochrome Define a color Define the style for filling or not Define the stroke width
11/17/2014 14
Drawing a Figure
Start with a Paint object Use one of the drawing methods from Canvas
Rectangle, Circle and Oval are easy to use The example we will do is
Draw a rectangle outline Draw a filled oval using the same coordinates The oval touches the sides of the rectangle Drawing a circle uses the center and radius, so beware!
11/17/2014 15
Drawing Text
Some terminology Baseline Ascent, descent Leading Font family
Drawing text Alignment
11/17/2014 16
Add Some Text
Write the word 'Center' in the center of the oval/rectangle combination
Set the text size to 40 to make it more visible Try different text alignment settings Try both stroke and fill for the characters
11/17/2014 17
Drawing Paths
11/17/2014 18
Drawing models
Drawing models explain how color is applied to the screen to create graphics.
We’ve not had to worry about that so far because we’ve worked with very simple figures.
However, even to draw something as simple as a triangle and fill it in, our tools are not adequate.
Drawing models usually work with a pen which is moved around.
Sometimes the pen leaves a trace, sometimes it does not The color of the trace the pen leaves can change If the pen traces a closed curve, that is it finishes at the point
where it started, the area enclosed can be filled.
11/17/2014 19
Turtle Graphics
One drawing model, called Turtle Graphics was popularized by a language called Logo.
The pen is called a turtle in this model In this model, the turtle has a position and heading. The turtle can turn in place, changing its heading The turtle can move a given distance in the direction it is
currently heading
11/17/2014 20
Android Paths
The model used in Android for paths is similar, but only works with position.
The pen has a current position at any time The pen can be moved to another position. The pen can leave a
trace or not. The pen can move in a straight line to another position or along a
variety of curved segments. If the path is the outline of an area to be filled, the path is ended by
closing the path. Once the Path is created, it must be drawn to be visible Path Reference
11/17/2014 21
Polygonal Paths
Paths made of line segments Create a Path object Apply methods
moveTo(x,y) lineTo(x,y) Close()
Use drawPath to make display the path
11/17/2014 22
Examples
We'll continue using the example project we used earlier Each example will be implemented as a new widget that
can be dragged into the user interface The first example will be a path that has five line
segments: two will be invisible, three will be visible Fill the path first Outline the path second Note the visible and invisible segments Note that even invisible segments bound the interior
11/17/2014 23
Diamonds
Another view will draw diamonds A diamond is created by connecting the midpoints of the
sides of a rectangle Write a method that will create and return a diamond
shaped path given the left, top, right and bottom coordinates of the enclosing rectangle
The view will draw many diamonds in random position and with random color The color will have value .75 but with random hue and
saturation
11/17/2014 24
Interactive Diamonds View
This is the same as the basic diamond view except that every time the view is clicked, the number of diamonds is reduced by 1
The view will contain a listener registered to 'this' Once the number of diamonds has been reduced, the view
must be redrawn Note that, right now, clicking the view causes no visible
change Write a message to the log file (visible in the logcat view)
to show that the listener is actually active
11/17/2014 25
Forcing Redrawing
There is an internal change but not a visible change
The onDraw method must be executed somehow
However, we don't have a Canvas, necessary to call onDraw
There's no good way to create a useful one either The system must call onDraw
So, we ask the system to call onDraw for us
This is what the method 'invalidate' does
It tells the system that the current state of the view is not valid, so it must be redrawn