2D Graphics: Part 2. Class Drawable A Drawable is an object that knows how to render itself on a...
-
Upload
dominic-melton -
Category
Documents
-
view
220 -
download
0
Transcript of 2D Graphics: Part 2. Class Drawable A Drawable is an object that knows how to render itself on a...
2D Graphics: Part 2
©SoftMoore Consulting
Class Drawable
• A Drawable is an object that knows how to render itself on a Canvas.
• Class Drawable and a number of related subclasses (e.g., BitmapDrawable, LayerDrawable, ShapeDrawable, etc.) are defined in package android.graphics.drawable.
• Unlike a View, a Drawable does not have any facility to receive events or otherwise interact with the user.
• Similar to other Android UI objects, most Drawable objects can be defined programmatically or in an XML file.
Slide 2
©SoftMoore Consulting
Different Types of Drawables
Drawables may take a variety of forms including
• Bitmap: e.g., a PNG or JPEG image
• Nine Patch: an extension to the PNG format allows it to specify information about how to stretch it and place things inside of it
• Shape: contains simple drawing commands instead of a raw bitmap, allowing it to resize better in some cases.
• Layers: a compound drawable that draws multiple underlying drawables on top of each other.
• States: a compound drawable that selects one of a set of drawables based on its state.
Slide 3
©SoftMoore Consulting
Example: Defining a Shape Drawable in XML
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="@color/bgColor" />
<stroke android:width="2px" android:color="@color/circleColor" />
<size android:height="200dp" android:width="200dp" />
</shape>Slide 4
File res\drawable\circle.xml
circle = oval withequal dimensions
©SoftMoore Consulting
Example: Defining a Shape Drawable in XML(continued)
public class DrawableDemo extends ActionBarActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView circleView = (ImageView) findViewById(R.id.circleImage); circleView.setImageResource(R.drawable.circle); } }
Slide 5
©SoftMoore Consulting
Example: Defining a Shape Drawable in XML(continued)
Slide 6
©SoftMoore Consulting
Defining a Shape Drawable Programmatically
• Package android.graphics.drawable.shapes provides support for several geometric shapes– rectangles (and squares)– rectangles with rounded corners– ovals (and circles)– arcs and lines– other shapes defined as Paths
• These shapes generally have no dimensions but are bound by their container object, usually a ShapeDrawable.
Slide 7
©SoftMoore Consulting
Example: Defining a Shape DrawableProgrammatically
@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main);
OvalShape ovalShape = new OvalShape(); ShapeDrawable circle = new ShapeDrawable(ovalShape); circle.setIntrinsicWidth(400); circle.setIntrinsicHeight(400);
Paint paint = circle.getPaint(); paint.setAntiAlias(true); paint.setColor(Color.MAGENTA); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(2);
Slide 8
(continued on next slide)
Note: height and widthare in pixels, not dp
©SoftMoore Consulting
Example: Defining a Shape DrawableProgrammatically (continued)
ImageView circleView = (ImageView) findViewById(R.id.circleImage); circleView.setImageDrawable(circle); }
Slide 9
©SoftMoore Consulting
Example: Defining a Shape DrawableProgrammatically (continued)
Slide 10
©SoftMoore Consulting
Gradients
• A gradient is a color fill that gradually blends from one color to another.
• All gradients need at least a start color and an end color, but they can contain an array of colors.
• Android gradient classes– subclasses of android.graphics.Shader– differentiated by the direction in which the gradient “flows”
• LinearGradient• RadialGradient• SweepGradient
• Gradients are set using the setShader() method of class Paint.
Slide 11
©SoftMoore Consulting
Example: Gradients
public class GradientView extends View { public GradientView(Context context) { super(context); }
@Override protected void onDraw(Canvas canvas) { Paint paint = new Paint(); paint.setAntiAlias(true) float centerX1 = getWidth()/4; float centerY1 = getHeight()/4;
Slide 12
©SoftMoore Consulting
Example: Gradients(continued)
float centerX2 = getWidth()/2; float centerY2 = getHeight()/2;
float centerX3 = 3*centerX1; float centerY3 = 3*centerY1;
float radius = (3*centerX1)/4; canvas.drawColor(Color.WHITE);
// create/draw a circle with a linear gradient LinearGradient lg = new LinearGradient( centerX1 - radius, centerY1 - radius, centerX1 + radius, centerY1 + radius, Color.RED, Color.BLUE, Shader.TileMode.MIRROR); paint.setShader(lg); canvas.drawCircle(centerX1, centerY1, radius, paint);
Slide 13
©SoftMoore Consulting
Example: Gradients(continued)
// create/draw a circle with a radial gradient RadialGradient rg = new RadialGradient( centerX2, centerY2, radius, Color.RED, Color.BLUE, Shader.TileMode.MIRROR); paint.setShader(rg); canvas.drawCircle(centerX2, centerY2, radius, paint);
// create/draw a circle with a sweep gradient int[] sgColors = { Color.RED, Color.YELLOW, Color.GREEN, Color.BLUE }; SweepGradient sg = new SweepGradient( centerX3, centerY3, sgColors, null); paint.setShader(sg); canvas.drawCircle(centerX3, centerY3, radius, paint); } }
Slide 14
©SoftMoore Consulting
Example: Gradients(continued)
Slide 15
©SoftMoore Consulting
Drawing Text
• Class canvas provides several methods for drawing text.
• Examples– void drawText(String text, float x, float y, Paint paint)
– void drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)
Slide 16
Note: Although some Canvas functionality is duplicatedin other places, text drawing capabilities are not.
©SoftMoore Consulting
Android Typefaces
• Class Typeface (in package android.graphics) provides support for several typeface families and styles.
• Typeface families– Typeface.SERIF– Typeface.SANS_SERIF– Typeface.MONOSPACE– Typeface.DEFAULT (equal to SANS_SERIF)
• Typeface styles– Typeface.NORMAL– Typeface.BOLD– Typeface.ITALIC– Typeface.BOLD_ITALIC
Slide 17
©SoftMoore Consulting
Using Typefaces
• Create a typefaceTypeface typeface = Typeface.create(Typeface.SERIF, Typeface.BOLD);
• Set the text size and typeface for a paint objectpaint.setTextSize(15);paint.setTypeface(typeface);
• Draw the text on the canvascanvas.drawText("Serif Typeface (Bold)", 30, 140, paint);
Slide 18
©SoftMoore Consulting
Example: Android Typefaces
@Overrideprotected void onDraw(Canvas canvas) { paint.setAntiAlias(true); paint.setColor(Color.BLUE); paint.setTextSize(35); canvas.drawColor(Color.WHITE);
Typeface tfDN = Typeface.create( Typeface.DEFAULT, Typeface.NORMAL); paint.setTypeface(tfDN); canvas.drawText("Default - Normal", 20, 50, paint);
Typeface tfDB = Typeface.create( Typeface.DEFAULT, Typeface.BOLD); paint.setTypeface(tfDB); canvas.drawText("Default - Bold", 20, 100, paint);
Slide 19
©SoftMoore Consulting
Example: Android Typefaces(continued)
... // other typefaces
Typeface tfMBI = Typeface.create( Typeface.MONOSPACE, Typeface.BOLD_ITALIC); paint.setTypeface(tfMBI); canvas.drawText("Monospace - Bold Italic", 20, 830, paint);
paint.setTypeface(tfDN); paint.setUnderlineText(true); canvas.drawText("Default - Normal (Underlined)", 20, 890, paint); }
Slide 20
©SoftMoore Consulting
Example: Android Typefaces(continued)
Slide 21
Notes:
1. Default typeface is Sans Serif.
2. Monospace typeface does notimplement bold or italic styles.
©SoftMoore Consulting
Matrix Transformations
• Class Matrix provides the capability to perform transformations on a View.
• It is possible to create a Matrix corresponding to the desired transformation and then apply it via the following Canvas method:– void set(Matrix src)
• Class Canvas provides convenience methods for common transformations.– void rotate(float degrees)– void scale(float sx, float sy)– void skew(float sx, float sy)– void translate(float dx, float dy)
Slide 22
©SoftMoore Consulting
Relevant Links
• Canvas and Drawableshttp://developer.android.com/guide/topics/graphics/2d-graphics.html
• Drawable Resourceshttp://developer.android.com/guide/topics/resources/drawable-resource.html
Slide 23