Android Programming




  Lesson 12

2D Graphics
 NGUYEN The Linh
Android Programming


Contents


       1   CustomView


       2   SurfaceView


       3   Exercise 12




                         2
Android Programming


2D Graphics




              2D Graphics




                  3
Android Programming


CustomView

 Creating a custom view




                           4
Android Programming


CustomView

 Creating a custom view




                           5
Android Programming


CustomView

 Override onDraw()
    The most important step in drawing a custom view is to override
     the onDraw() method.

    The parameter to onDraw() is a Canvas object that the view can
     use to draw itself.

    The Canvas class defines methods for drawing text, lines,
     bitmaps, and many other graphics primitives. You can use these
     methods in onDraw() to create your custom user interface (UI).

                                 6
Android Programming


CustomView

 Create Drawing Objects
    The android.graphics framework divides drawing into two areas:
       • What to draw, handled by Canvas
       • How to draw, handled by Paint.


    For instance, Canvas provides a method to draw a line,
     while Paint provides methods to define that line's color.

    Canvas has a method to draw a rectangle, while Paint defines
     whether to fill that rectangle with a color or leave it empty.

                                    7
Android Programming


CustomView

 Create Drawing Objects
    Simply put, Canvas defines shapes that you can draw on the
     screen, while Paint defines the color, style, font, and so forth of
     each shape you draw.

     Creating objects ahead of time is an important optimization. Views
      are redrawn very frequently, and many drawing objects require
      expensive initialization. Creating drawing objects within
      your onDraw() method significantly reduces performance and can
      make your UI appear sluggish.


                                   8
Android Programming


CustomView

 Handle Layout Events
    In order to properly draw your custom view, you need to know
     what size it is.

    You should never make assumptions about the size of your view
     on the screen.

    App needs to handle different screen sizes, multiple screen
     densities, and various aspect ratios in both portrait and landscape
     mode.

                                  9
Android Programming


CustomView

 Handle Layout Events
    In order to properly draw your custom view, you need to know
     what size it is.

    You should never make assumptions about the size of your view
     on the screen.

    App needs to handle different screen sizes, multiple screen
     densities, and various aspect ratios in both portrait and landscape
     mode.

                                 10
Android Programming


CustomView

 Handle Layout Events
    Although View has many methods for handling measurement,
     most of them do not need to be overridden. If your view doesn't
     need special control over its size, you only need to override one
     method: onSizeChanged().

     onSizeChanged() is called when your view is first assigned a
      size, and again if the size of your view changes for any reason.




                                  11
Android Programming


CustomView

 Draw!
    Once you have your object creation and measuring code defined,
     you can implement onDraw().

    Every view implements onDraw() differently, but there are some
     common operations that most views share:




                                12
Android Programming


CustomView

 Draw!
    Draw text using drawText(). Specify the typeface by
     calling setTypeface(), and the text color by calling setColor().

     Draw primitive shapes using drawRect(), drawOval(),
      and drawArc(). Change whether the shapes are filled, outlined, or
      both by calling setStyle().




                                  13
Android Programming


2D Graphics

 Draw!
    Draw more complex shapes using the Path class. Define a shape
     by adding lines and curves to a Path object, then draw the shape
     using drawPath(). Just as with primitive shapes, paths can be
     outlined, filled, or both, depending on the setStyle().

    Define gradient fills by creating LinearGradient objects.
     Call setShader() to use your LinearGradient on filled shapes.

    Draw bitmaps using drawBitmap().

                                14
Android Programming


CustomView

 Example 12.1




                 15
Android Programming


2D Graphics




              SurfaceView




                  16
Android Programming


SurfaceView

 Difference between SurfaceView and View?
    Views are all drawn on the same GUI thread which is also used
     for all user interaction.

    So if you need to update GUI rapidly or if the rendering takes too
     much time and affects user experience then use SurfaceView.

    The main difference is that SurfaceView can be drawn on by
     background threads but Views can't.


                                 17
Android Programming


SurfaceView

 Example 12.2




                 18
Android Programming


Exercise 12

 Example 12.2
    Kill Ants




                 19
Android Programming

[Android] 2D Graphics

  • 1.
    Android Programming Lesson 12 2D Graphics NGUYEN The Linh
  • 2.
    Android Programming Contents 1 CustomView 2 SurfaceView 3 Exercise 12 2
  • 3.
  • 4.
  • 5.
  • 6.
    Android Programming CustomView  OverrideonDraw()  The most important step in drawing a custom view is to override the onDraw() method.  The parameter to onDraw() is a Canvas object that the view can use to draw itself.  The Canvas class defines methods for drawing text, lines, bitmaps, and many other graphics primitives. You can use these methods in onDraw() to create your custom user interface (UI). 6
  • 7.
    Android Programming CustomView  CreateDrawing Objects  The android.graphics framework divides drawing into two areas: • What to draw, handled by Canvas • How to draw, handled by Paint.  For instance, Canvas provides a method to draw a line, while Paint provides methods to define that line's color.  Canvas has a method to draw a rectangle, while Paint defines whether to fill that rectangle with a color or leave it empty. 7
  • 8.
    Android Programming CustomView  CreateDrawing Objects  Simply put, Canvas defines shapes that you can draw on the screen, while Paint defines the color, style, font, and so forth of each shape you draw.  Creating objects ahead of time is an important optimization. Views are redrawn very frequently, and many drawing objects require expensive initialization. Creating drawing objects within your onDraw() method significantly reduces performance and can make your UI appear sluggish. 8
  • 9.
    Android Programming CustomView  HandleLayout Events  In order to properly draw your custom view, you need to know what size it is.  You should never make assumptions about the size of your view on the screen.  App needs to handle different screen sizes, multiple screen densities, and various aspect ratios in both portrait and landscape mode. 9
  • 10.
    Android Programming CustomView  HandleLayout Events  In order to properly draw your custom view, you need to know what size it is.  You should never make assumptions about the size of your view on the screen.  App needs to handle different screen sizes, multiple screen densities, and various aspect ratios in both portrait and landscape mode. 10
  • 11.
    Android Programming CustomView  HandleLayout Events  Although View has many methods for handling measurement, most of them do not need to be overridden. If your view doesn't need special control over its size, you only need to override one method: onSizeChanged().  onSizeChanged() is called when your view is first assigned a size, and again if the size of your view changes for any reason. 11
  • 12.
    Android Programming CustomView  Draw!  Once you have your object creation and measuring code defined, you can implement onDraw().  Every view implements onDraw() differently, but there are some common operations that most views share: 12
  • 13.
    Android Programming CustomView  Draw!  Draw text using drawText(). Specify the typeface by calling setTypeface(), and the text color by calling setColor().  Draw primitive shapes using drawRect(), drawOval(), and drawArc(). Change whether the shapes are filled, outlined, or both by calling setStyle(). 13
  • 14.
    Android Programming 2D Graphics Draw!  Draw more complex shapes using the Path class. Define a shape by adding lines and curves to a Path object, then draw the shape using drawPath(). Just as with primitive shapes, paths can be outlined, filled, or both, depending on the setStyle().  Define gradient fills by creating LinearGradient objects. Call setShader() to use your LinearGradient on filled shapes.  Draw bitmaps using drawBitmap(). 14
  • 15.
  • 16.
  • 17.
    Android Programming SurfaceView  Differencebetween SurfaceView and View?  Views are all drawn on the same GUI thread which is also used for all user interaction.  So if you need to update GUI rapidly or if the rendering takes too much time and affects user experience then use SurfaceView.  The main difference is that SurfaceView can be drawn on by background threads but Views can't. 17
  • 18.
  • 19.
    Android Programming Exercise 12 Example 12.2  Kill Ants 19
  • 20.