+ All Categories
Transcript
Page 1: User Interface Clasfses

Romain  Chiappinelli  

Page 2: User Interface Clasfses
Page 3: User Interface Clasfses
Page 4: User Interface Clasfses

Views & View Events View Groups, AdapterViews & Layouts Menus & ActionBar Dialogs

Page 5: User Interface Clasfses

Activities usually display a user interface Android provides many classes for constructing user interfaces

Page 6: User Interface Clasfses

Key building block for UI components Occupy a rectangular space on screen Responsible for drawing themselves and for handling events

Page 7: User Interface Clasfses

Button ToggleButton Checkbox RatingBar AutoCompleteTextView

Page 8: User Interface Clasfses

View that can be clicked on to perform an action

Page 9: User Interface Clasfses

UIButton

Page 10: User Interface Clasfses

UIButton

Page 11: User Interface Clasfses

A 2-state Button checked/not checked state Light indicator showing state

Page 12: User Interface Clasfses

UIToggleButton

Page 13: User Interface Clasfses

UIToggleButton

Page 14: User Interface Clasfses

Another kind of 2-state button Checked/not checked

Page 15: User Interface Clasfses

UICheckbox

Page 16: User Interface Clasfses

UICheckbox

Page 17: User Interface Clasfses

A view comprising a row of stars the user can click or drag the stars to highlight some number of them

Page 18: User Interface Clasfses

UIRatingBar

Page 19: User Interface Clasfses

UIRatingBar

Page 20: User Interface Clasfses

An editable text field that provides completion suggestions as the user types in text

Page 21: User Interface Clasfses

UIAutoComplete TextView

Page 22: User Interface Clasfses

UIAutoComplete

Page 23: User Interface Clasfses

Set visibility: show or hide view Set Checked state Set Listeners: Code that should be executed when specific events occur Set properties: opacity, background, rotation Manage input focus: allow view to take focus, request focus

Page 24: User Interface Clasfses

User interaction Touch Keyboard/trackball/D-pad

System control Lifecycle changes

Page 25: User Interface Clasfses

Often handle events with listeners Numerous Listener interfaces defined by the View class

Page 26: User Interface Clasfses

OnClickListener.onClick() View has been clicked

OnLongClickListener.onLongClick() View has been pressed & held

Page 27: User Interface Clasfses

OnFocusChangeListener.� onFocusChange()

View has received or lost focus

OnKeyListener.onKey() View about to receive a hardware key press

Page 28: User Interface Clasfses

Views are organized in a Tree Displaying has multiple steps Measure – get dimensions of each View Layout – Position each View Draw – Draw each view

Page 29: User Interface Clasfses

Custom View subclasses can override various View methods

Page 30: User Interface Clasfses

onMeasure() Determine the size of this View and its children

onLayout() View must assign a size and position to all its children

onDraw() View should render its content

Page 31: User Interface Clasfses

onFocusChanged() View’s focus state has changed

onKeyUp(), onKeyDown() A hardware key event has occurred

onWindowVisibilityChanged() Window containing view has changed its visibility status

Page 32: User Interface Clasfses

An invisible View that contains other views Used for grouping & organizing a set of views Base class for view containers & layouts

Page 33: User Interface Clasfses

RadioGroup TimePicker DatePicker WebView MapView Gallery Spinner

Page 34: User Interface Clasfses

A ViewGroup containing a set of Radio Buttons (CheckBoxes) Only one button can be selected at any one instant

Page 35: User Interface Clasfses

UIRadioGroup

Page 36: User Interface Clasfses

UIRadioGroup

Page 37: User Interface Clasfses

UIRadioGroup

Page 38: User Interface Clasfses

A ViewGroup that allows the user to select a time

Page 39: User Interface Clasfses

UITimePicker

Page 40: User Interface Clasfses

UITimePicker

Page 41: User Interface Clasfses

UITimePicker

Page 42: User Interface Clasfses

A ViewGroup that allows the user to select a date

Page 43: User Interface Clasfses

UIDatePicker

Page 44: User Interface Clasfses

UIDatePicker

Page 45: User Interface Clasfses

UIDatePicker

Page 46: User Interface Clasfses

A ViewGroup that displays a web page

Page 47: User Interface Clasfses

UIWebView

Page 48: User Interface Clasfses

UIWebView

Page 49: User Interface Clasfses

UIWebView

Page 50: User Interface Clasfses

A ViewGroup that displays a Map

Page 51: User Interface Clasfses

UIGoogleMaps

Page 52: User Interface Clasfses

UIGoogleMaps

Page 53: User Interface Clasfses

AdapterViews are views whose children and data are managed by an Adapter Adapter manages the data and provides data views to AdapterView AdapterView displays the data Views

Page 54: User Interface Clasfses

AdapterView displaying a scrollable list of selectable items Items managed by a ListAdapter ListView can filter the list of items based on text input

Page 55: User Interface Clasfses

UIListView

Page 56: User Interface Clasfses

UIListView

Page 57: User Interface Clasfses

An AdapterView that provides a scrollable list of items User can select one item from the list Items managed by a SpinnerAdapter

Page 58: User Interface Clasfses

UISpinner

Page 59: User Interface Clasfses

UISpinner

Page 60: User Interface Clasfses

A ViewGroup showing a horizontally scrolling list Items managed by a SpinnerAdapter

Page 61: User Interface Clasfses

UIGallery

Page 62: User Interface Clasfses

UIGallery

Page 63: User Interface Clasfses

UIGallery

Page 64: User Interface Clasfses

UIGallery

Page 65: User Interface Clasfses

A generic Viewgroup that defines a structure for the Views it contains

Page 66: User Interface Clasfses

Child views arranged in a single horizontal or vertical row

Page 67: User Interface Clasfses

UILinearLayout

Page 68: User Interface Clasfses

UILinearLayout

Page 69: User Interface Clasfses

Child views are positioned relative to each other and to parent view

Page 70: User Interface Clasfses

UIRelativeLayout

Page 71: User Interface Clasfses

UIRelativeLayout

Page 72: User Interface Clasfses

Child views arranged into rows & columns

Page 73: User Interface Clasfses

UITableLayout

Page 74: User Interface Clasfses

UITableLayout

Page 75: User Interface Clasfses

Child views arranged in a two-dimensional, scrollable grid

Page 76: User Interface Clasfses

UIGridView

Page 77: User Interface Clasfses

UIGridView

Page 78: User Interface Clasfses

Activities support menus Activities can

Add items to a menu handle clicks on the menu items

Page 79: User Interface Clasfses

Options menu shown when user presses the menu button

Context View-specific menu shown when user touches and holds the view

Submenu A menu activated when user touches a visible menu item

Page 80: User Interface Clasfses

Options Menus

Page 81: User Interface Clasfses

Context Menus

Page 82: User Interface Clasfses

SubMenus

Page 83: User Interface Clasfses

Define menu resource in XML file Store in res/menu/filename.xml

Page 84: User Interface Clasfses

Inflate menu resource using Menu Inflater in onCreate…Menu() methods Handling item selection in appropriate on…ItemsSelected() methods

Page 85: User Interface Clasfses

HelloAndroid WithMenus

Page 86: User Interface Clasfses

HelloAndroidWithMenus

Page 87: User Interface Clasfses

HelloAndroidWithMenus

Page 88: User Interface Clasfses

Many other features supported Grouping menu items Binding shortcut keys to menu items Binding Intents to menu items

Page 89: User Interface Clasfses

Similar to Application Bar in many desktop applications Enables quick Access to common operations

Page 90: User Interface Clasfses

Shows play titles and one quote from the selected play Provides actions for the ActionBar Three main objects

QuoteViewerActivity TitleFragment QuoteFragment

Page 91: User Interface Clasfses

Screen is divided into tab & content areas Allows multiple Fragments to share single content area

Page 92: User Interface Clasfses

Each tab is associated with one Fragment Exactly one tab is selected at any given time Fragment corresponding to the selected tab is visible in the content area

Page 93: User Interface Clasfses

UITabLayout

Page 94: User Interface Clasfses

UITabLayout

Page 95: User Interface Clasfses

UITabLayout

Page 96: User Interface Clasfses

Independent subwindows used by Activities to communicate with user

Page 97: User Interface Clasfses

AlertDialog ProgressDialog DatePickerDialog TimePickerDialog

Page 98: User Interface Clasfses

UIAlertDialog ProgressDialog

Page 99: User Interface Clasfses

UIAlertDialog

Page 100: User Interface Clasfses

User Notifications


Top Related