COMMON USER INTERFACE ELEMENTS

joyfulfightΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

124 εμφανίσεις

COMMON USER
INTERFACE ELEMENTS
SEng
5199-1: Mobile Application Development
Andy Selvig

DIRECT CONTROLS
Things allow for direct user input and output
Label


Static text
Button


Single tappable area with text and/or icon
Edit Text / Text Field


Long text display
Text View


Simple text entry
Checkbox / Switch


Like a button, but with binary state
Radio Button / Segment Control


Like button, but with n-ary state
Slider /
SeekBar



One-dimensional numeric control (continuous)
Spinner / Stepper


One-dimensional numeric control (discrete)
Picker


Allows the user to select from one of several options
Date Picker


Allows the user to select a date
Alert


Presents at least one button that the user must tap
Dynamic Rendering


CoreGraphics
on
iOS
(2D)


Canvas API on Android (2D)


OpenGL ES on both platforms (3D)
Image View


Render static images to the screen
LAYOUT STRATEGIES
Common ways to lay out elements on each platform
Android Layout


Linear Layout


Elements stacked together either horizontally or vertically


You can specify how each element stretches to fit


Relative Layout


Elements are located relative to each other or their parent


Table Layout


Elements arranged in a 2-dimensional grid


Rows and columns size to fit contents
iOS
Layout


Similar to Android Relative Layout


Elements are placed relative to their parent


You can specify how each element stretches to fit


No support for Linear or Table Layout
Scroll View


Available on both platforms


Allows content to scroll either vertically or horizontally*


*Horizontal not available on Android, need a Gallery


More powerful on
iOS
- pages
FULL SCREEN
ELEMENTS
Pre-packaged elements that provide rich user interaction
Web View


Places a web browser inside the app
Map View


Places a (Google) view inside the app
WORKFLOW
CONTROLS
Things that allow the user to move through
the application and perform work
Action Bar / Toolbar


Horizontal, linear arrangement of buttons and labels
Tab Host / Tab Bar


Switches contents of the rest of the screen
List View / Table View


Vertical list of items