cs378 - mobile computing
DESCRIPTION
CS378 - Mobile Computing. 2D Graphics. Android Graphics. Does not use the Java awt or swing packages Whole set of custom classes Canvas: class that holds code for various "draw" methods Paint: Controls the drawing. A whole host of properties. Similar to Java Graphics object - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/1.jpg)
CS378 - Mobile Computing
2D Graphics
![Page 2: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/2.jpg)
2
Android Graphics• Does not use the Java awt or swing packages• Whole set of custom classes• Canvas: class that holds code for various
"draw" methods• Paint: Controls the drawing. A whole host of
properties. Similar to Java Graphics object• Bitmap: the things drawn on• Drawable: the thing to draw. (rectangles,
images, lines, etc.)
![Page 3: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/3.jpg)
3
Common Methods for Drawing• Two approaches• draw graphics or animations into a View
object that is part of layout–define graphics that go into View– the simple way
• Draw graphics directly to a Canvas– the complex way
![Page 4: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/4.jpg)
4
Simple Graphics• Use Drawables in Views• Create a folder res/drawable• Add images– png (preferred)– jpg (acceptable)– gif (discouraged)
• Images can be added as background for Views
![Page 5: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/5.jpg)
5
Simple Graphics
• Change background to an image–previously used background colors
![Page 6: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/6.jpg)
6
Top Ten With Image Background
![Page 7: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/7.jpg)
7
Add ImageView to Layout• In the main.xml for top
ten
![Page 8: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/8.jpg)
8
ImageView Attributes• scaleType: how image
should be moved or resized in the ImageView
• tint: affects color of image
• more to position image in ImageView
![Page 9: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/9.jpg)
9
Changing ImageView Programmatically
• Randomly set the alpha (transparency of the image)• Or pick an image randomly• Or set image based on
month (Season)
![Page 10: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/10.jpg)
10
Using a Canvas• Simple way -> Create a custom View and
override the onDraw method• The Canvas is sent as a parameter• Create a class that extends View–override the 2 parameter constructor–override the onDraw method–perform custom drawing in the onDraw
method– add the View to the proper layout
![Page 11: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/11.jpg)
11
Simple Example - Graphics View
![Page 12: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/12.jpg)
12
GraphicsView - onDraw
![Page 13: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/13.jpg)
13
Add CustomView to XML• in main.xml• add custom View as last element in
LinearLayout
![Page 14: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/14.jpg)
14
Canvas Class• methods to draw– lines– arcs– paths– images– circles– ovals– points– text– and a few I missed
![Page 15: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/15.jpg)
15
Paint• typically create Paint with anti aliasing• Paint p =
new Paint(Paint.ANTI_ALIAS_FLAG);
![Page 16: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/16.jpg)
16
Anti Aliasing
![Page 17: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/17.jpg)
17
Paint Object• many, many attributes and properties
including:– current color to draw with–whether to fill or outline shapes– size of stroke when drawing– text attributes including size, style (e.g.
underline, bold), alignment, – gradients
![Page 18: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/18.jpg)
18
Gradients• 3 kinds of gradients• LinearGradeint• RadialGradeint• SweepGradient• at least 2 color, but possibly more• flows from one color to another
![Page 19: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/19.jpg)
19
Linear Gradient
![Page 20: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/20.jpg)
20
LinearGradient
![Page 21: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/21.jpg)
21
RadialGradient
![Page 22: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/22.jpg)
22
RadialGradient
![Page 23: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/23.jpg)
23
SweepGradient
![Page 24: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/24.jpg)
24
SweepGradient
![Page 25: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/25.jpg)
25
SweepGradient
![Page 26: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/26.jpg)
26
SweepGradient
![Page 27: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/27.jpg)
27
SweepGradient
![Page 28: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/28.jpg)
28
GuessFour
![Page 29: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/29.jpg)
29
Simple Animations• Tweened Animations• provide a way to perform simple
animations on Views, Bitmaps, TextViews, Drawables
• provide start point, end point, size, rotation, transparency, other properties
• Can set up tweened animation in XML or programmatically
![Page 30: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/30.jpg)
30
GuessFour Example• On error board shakes back and forth• On win board shakes up and down• From BoardView in GuessFour
![Page 31: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/31.jpg)
31
res/anim• shake up down
• shake left right
![Page 32: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/32.jpg)
32
More Tweened Examples• hyperspace example from
android dev site• rotate and change alpha• animation types:– alpha– scale– translate– rotate
http://developer.android.com/guide/topics/resources/animation-resource.html
![Page 33: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/33.jpg)
33
More Complex Graphics• Don't want apps to become unresponsive• If complex graphics or animation use
SurfaceView class• Main view not waiting on onDraw to finish• secondary thread with reference to
SurfaceView• SrufaceView draws and when done
display result
![Page 34: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/34.jpg)
34
Using a SurfaceView• extend SurfaceView • implement SurfaceHolder.Callback–methods to notify main View when
SurfaceView is created, changed or destroyed
![Page 35: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/35.jpg)
35
Simple Example• Static Screen• continuously draw several hundred small
rectangles (points, with stroke = 10)– slowly fill screen and then keep changing
![Page 36: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/36.jpg)
36
Implement SurfaceHolder.Callback methods
![Page 37: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/37.jpg)
37
Prevent Runaway Threads!
![Page 38: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/38.jpg)
38
Inner Class for Thread
![Page 39: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/39.jpg)
39
Run Method in StaticThread
Standard Approach for Drawing on SurfaceView
![Page 40: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/40.jpg)
40
Demo run()• Pronounced flicker
and jitter• Double buffer under
the hood• We are drawing on
two different Bitmaps• Canvas does drawing
onto Bitmap
![Page 41: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/41.jpg)
41
Remove Flicker / Jitter• If we draw
background each "frame" then we don't redraw previous rectangles
• How about "saving" all the data?–points, colors
![Page 42: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/42.jpg)
42
Alternative• Recall two approaches:–draw on UI thread by overriding onDraw• create custom View (tutorial 4)• okay if not a lot of drawing
–must keep UI thread responsive• complex drawing or animations using SurfaceView
• Third approach, possible variation on the above two approaches–maintain a separate Bitmap
![Page 43: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/43.jpg)
43
Separate Bitmap• StaticThread has a Bitmap instance var• Initialize in constructor
![Page 44: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/44.jpg)
44
Updates to BitmapCreate a Canvas todraw on the Bitmap we are saving
When donedrawing toBitmap useSurfaceViewCanvas todraw
![Page 45: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/45.jpg)
45
Demo Alt Version of run()• Flicker and
jitter?• Also possible
to save Bitmap to file for later use
![Page 46: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/46.jpg)
46
Animations• Frame based vs. Time based• Frame based:– update every frame– simple, but difference in frame
rates• Time based– update every frame but based
on time elapsed since last frame–more work, more accurate– sdk example lunar lander
![Page 47: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/47.jpg)
47
Checking Frame Rate• From StaticView• Emulator 6-7 fps, dev phone 40 -45 fps
![Page 48: CS378 - Mobile Computing](https://reader036.vdocument.in/reader036/viewer/2022081517/56815ee1550346895dcd87a1/html5/thumbnails/48.jpg)
48
Controlling Frame Rate• Sleep after completing work in loop of
run• More complex than shown, use previous
time and current time