CS378 - Mobile Computing
description
Transcript of CS378 - Mobile Computing
![Page 1: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/1.jpg)
CS378 - Mobile Computing
More UI - Part 2
![Page 2: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/2.jpg)
2
Special Menus• Two special application menus–options menu– context menu
• Options menu replaced by action bar (API 11)
menu action bar
![Page 3: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/3.jpg)
3
OptionsMenu• User presses Menu Button• Activities onCreateOptionsMenu method
is called
• In example options_menu.xml in res/menu folder
![Page 4: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/4.jpg)
4
OptionsMenu• Alternate creation of OptionsMenu• add item to menu programmatically
• chained method calls
![Page 5: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/5.jpg)
5
SubMenus• Option on Menu may be creation of a
SubMenu• In XML nest menu inside menu or
programmatically by adding SubMenus to Menu in onCreateOptionsMenu method
![Page 6: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/6.jpg)
6
Menu Options Selected• if Menu Option is another Activity it is
launched when Menu button pressed– The Big About in previous example
• For other items–onOptionsItemSelected(MenuItem item)
![Page 7: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/7.jpg)
7
ACTION BAR
![Page 8: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/8.jpg)
8
ActionBar• Introduced in Android 3.0–Honeycomb, tablet only
• 4.0, Ice Cream Sandwich, tablet and phones
• "The action bar is a window feature that identifies the application and user location, and provides user actions and navigation modes"
• http://developer.android.com/guide/topics/ui/actionbar.html
![Page 9: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/9.jpg)
9
Purpose of ActionBar• identification• navigation• actions
OverflowMenu
Navigation Tabs
Action ItemIcon / Logo
![Page 10: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/10.jpg)
10
ActionBar• ActionBar items declared in menu.xml
![Page 11: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/11.jpg)
11
ActionBar• If menu items declared in xml, added to
menu in order they appear• Extra items brought up with overflow
button
![Page 12: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/12.jpg)
12
Navigation Tabs• Used to switch between fragments
• http://developer.android.com/guide/topics/fundamentals/fragments.html
![Page 13: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/13.jpg)
13
ContextMenu• pre 3.0, aka Floating Menus• subtype of Menu• display when a long press is performed on a
View – Activity is a descendant of View– Activity may be broken up into multiple views
• implement onCreateContextMenu method
• must call registerForContextMenu method and pass View
![Page 14: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/14.jpg)
14
ContextMenu• From Tip Calculator• Long press on total
amount EditText• Default behavior for
EditText• Nothing added in
TipCalculator to create this
![Page 15: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/15.jpg)
15
Contextual Action Mode• 3.0 and later
http://developer.android.com/guide/topics/ui/menus.html#CAB
![Page 16: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/16.jpg)
16
STYLES
![Page 17: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/17.jpg)
17
Styles• Defined in XML file• res/values/style• similar to a cascading style sheet as used
in html• group layout attributes in a style and
apply to various View objects (TextView, EditText, Button)
![Page 18: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/18.jpg)
18
Sample Styles, in styles.xml
![Page 19: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/19.jpg)
19
Apply Style - in main xml
![Page 20: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/20.jpg)
20
Result of Styles• can override
elements of style– bottom edit text
overrides color• one style can inherit
from another• use UI editor to
create view and then extract to style
![Page 21: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/21.jpg)
21
GESTURES
![Page 22: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/22.jpg)
22
Common Gestures
![Page 23: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/23.jpg)
23
Common Gestures
http://developer.android.com/design/patterns/gestures.html
![Page 24: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/24.jpg)
24
Common Gestures• Fling or flick gesture:
similar to swipe or drag• scroll/swipe/drag–user presses then moves
finger in s steady motion before lifting finger
• fling or flick–user presses then moves
finger in an accelerating motion before lifting
![Page 25: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/25.jpg)
25
Dealing With Gestures• To handle simple touch
events create View.OnTouchListener for view
• Example from tutorial, screen press leads to player moving if it is their turn and they touch an open square
![Page 26: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/26.jpg)
26
onTouchEvent• passed a
MotionEvent object with a large amount of data
• in tic tac toe tutorial you only used location of event (x and y)
• View also has ability to listener for long clicks and drags
![Page 27: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/27.jpg)
27
Handling Common Gestures• Instead of trying to decode gestures from
the MotionEvent passed to on touch …• Use the GestureDetector class• Add a GestureDetector object to View• override View.onTouchEvent method to
pass MotionEvent on to the GestureDetector.onTouchEvent method
![Page 28: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/28.jpg)
28
Handling Common Gestures• create a
GestureDetector.OnGestureListener (several gestures) or a GestureDetector.SimpleOnGestureListener (more gestures) and register it with the GesturerDetector
• callback methods for onLongPress, onScroll, onFling, onSingleTapConfirmed, others
![Page 29: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/29.jpg)
29
Simple Gesture Demo• App that listens for
simple gestures• update lower TextView
in call back methods
![Page 30: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/30.jpg)
30
Gesture Demo
![Page 31: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/31.jpg)
31
Gesture Demo• Recall, Graphics Demo overrode
onTouchEvent and displayed new random grid when down event occurred
• Here, simply pass event on to the GestureDetectorCompat object– it will call back methods
![Page 32: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/32.jpg)
32
Callback Methods for OnGestureListener
![Page 33: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/33.jpg)
33
Callback Methods for OnGestureListener
![Page 34: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/34.jpg)
34
Callback Methods for DoubleTapListener
![Page 35: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/35.jpg)
35
Multi Touch Gestures• Multiple fingers (pointers) touch screen
at same time• Handled via MotionEvents• each pointer (finger) has a MotionEvent• track via index (in array of MotionEvents)
or ID• MotionEvent object sent to onTouch
contains number of "pointers" involved
![Page 36: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/36.jpg)
36
Displaying Multitouch data• static methods from MotionEventCompat
class
![Page 37: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/37.jpg)
37
Scale Gestures
• ScaleGestureDetector class from Api level 8 (API 2.2)• pinch to zoom in our out• out -> scale up• in -> scale down
![Page 38: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/38.jpg)
38
Scale Gestures• Create class that implements
ScaleGestureDetector.OnScaleGestureListener• OR create class that extends
ScaleGestureDetector.SimpleOnScaleGestureListener– adapter class– implements methods from OnScaleGestureListener
with dummy methods– override only the methods you care about
• Create a ScaleGestureDetector with listener• pass Motion events from onTouch
![Page 39: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/39.jpg)
39
Scaling Example• listener updates overall scale factor• shows current scale factor in TextView
![Page 40: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/40.jpg)
40
Scale Example
![Page 41: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/41.jpg)
41
Drag Gestures• Similar to handling Scale gestures• Implement View.OnDragListener–one method, onDrag(View v, DragEvent de)
• Drag event phases:– start– continuing–dropped–ended
![Page 42: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/42.jpg)
42
Complex Gestures• Non standard gestures require lots of
code to recognize• Android 1.6 introduced new APIs to store,
load, draw, and recognize gestures• Gesture Builder app on emulator–emulator must include virtual SD card– allows creating set of gestures for your
application– limited success with jelly bean emulators
![Page 43: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/43.jpg)
43
GestureBuilder on Devices• GestureBuilder
app included on emulators• Possible to put
on a real device• Create project
from sample
File -> New Project -> Android
![Page 44: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/44.jpg)
44
Select Build Target
• Gesture Builder in SDK examples for multiple API levels
• I tried API level 10
![Page 45: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/45.jpg)
45
Finish Project Create• After project created, install on real device
![Page 46: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/46.jpg)
46
Complex Gestures• Each gesture associated with
name• Limited to single pointer• multiple gestures can have
same name – variations on same gesture,
better chance of recognizing• Move gestures from
emulator to application res/raw folder
![Page 47: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/47.jpg)
47
Gesture Data File• DDMS file explorer
![Page 48: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/48.jpg)
48
Complex Gestures• Recognizing gestures via a
GestureOverlayView• simple drawing board on top of view that
shows and records user gestures• When gesture complete GestureLibrary
queried to see if gesture is recognized• Predictions between entered gesture and
those in the library
![Page 49: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/49.jpg)
49
Animal Sounds App
![Page 50: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/50.jpg)
50
Predictions
![Page 51: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/51.jpg)
51
onCreate
![Page 52: CS378 - Mobile Computing](https://reader035.fdocuments.net/reader035/viewer/2022062813/56816553550346895dd7cd64/html5/thumbnails/52.jpg)
52
Listener