hit3328 - chapter0601 - menus and lists
DESCRIPTION
TRANSCRIPT
HIT3328 / HIT8328 Software Development for Mobile DevicesDr. Rajesh Vasa, 2011
1
Twitter: @rvasa Blog: http://rvasa.blogspot.com
Lecture 06Menus and Lists
R. Vasa, 20112
Lecture Overview
•Working with Menus
•Using Frame Layout
•Adapters and Working with Simple Lists
R. Vasa, 20113
Menus
•Android offers a ‘Menu’ button, iOS does not
•Menus’ can be customised per activity
Menus have a label and an icon
Icon is strongly recommended by the Android UI guidelines
Menu
Icons at different resolutions should be provided (ideally)
R. Vasa, 20114
Creating a MenuName App (from Lecture
5)
Menus are defined as a resource
We can use icons provided by Android SDK (recommended)
We can use icons provided by Android SDK (recommended)
R. Vasa, 20115
Menus are Resources
Convention is to place it in ‘menu’ folder
R. Vasa, 20116
Wiring up a Menu to Show
Call back method that we have to write
Resource Identifier
XML Resource file is converted (inflated) into a Menu object that will be rendered
(shown) on screen
XML Resource file is converted (inflated) into a Menu object that will be rendered
(shown) on screen
R. Vasa, 20117
Handling Menu Click
Call back method that we have to write
R. Vasa, 20118
Toasting a Message
•There is often a need to show a message for a short period and then fade on mobile devices
•Android offers this via the Toast utility
R. Vasa, 20119
Toasting a Message
On Click
Message displayed for a
second
R. Vasa, 201110
Creating a Toast
Duration can be customisedAndroid offers Toast.LENGTH_LONG,
Toast.LENGTH_SHORT as built in defaults
Duration can be customisedAndroid offers Toast.LENGTH_LONG,
Toast.LENGTH_SHORT as built in defaults
R. Vasa, 201111
Lecture Roadmap - Where are we?•Working with Menus
•Using Frame Layout
•Adapters and Working with Simple Lists
R. Vasa, 201112
Frame Layout Offers Overlays
•We often need a way to overlay multiple views (or layouts) on top of each other
• Often with variation in transparency
• Frame Layout offers us this feature
• Frame Layout is also used to help create Tab Panes in Android
R. Vasa, 201113
Simple Frame Layout (Light Bulb)
Button is placed on top of Image View On / Off Images are also placed on top of each other
R. Vasa, 201114
Frame Layout - Code
2 Image Views and 1 Button in the same layout
R. Vasa, 201115
Frame Layout - Code
We control visibility explicitlyWe control visibility explicitly
R. Vasa, 201116
Light Bulb Logic
We flip the visibility of the images
Method is triggered onClickMethod is triggered onClick
R. Vasa, 201117
Lecture Roadmap - Where are we?•Working with Menus
•Using Frame Layout
•Adapters and Working with Simple Lists
R. Vasa, 201118
A Simple List App.
Displays Latitude and Longitude of a location
R. Vasa, 201119
Constituents of a List based screen
ListView
Text Views
R. Vasa, 201120
Lists get data via an Adapter
ListView
Data Source
Adapter
R. Vasa, 201121
Adapter Formats Data for Display
ListView
Data Source
Adapter
Data is formatted for display via customised layout attached to the
Adapter
Data is formatted for display via customised layout attached to the
Adapter
R. Vasa, 201122
List Views are very flexible
We specify the layout for each line
item of a list
Layout can be provided as a resource file (XML)
R. Vasa, 201123
Adapter Feeds data to List View
ListView
Data Source
Adapter
Data Source feeds data to the Adapter for
formatting
Data Source feeds data to the Adapter for
formatting
R. Vasa, 201124
Adapter Offers Separation of Concerns
ListView
Data Source
Adapter
Data Source can be an array, collection object, external database, or an
external server
Data Source can be an array, collection object, external database, or an
external server
R. Vasa, 201125
Simple List App.
ListView
Data Source
Adapter
Domain Model: HashMap (Cities, Location)
(Cities names)
(Simple Item Layout)
R. Vasa, 201126
Domain Model
Ideally, you read an external resource(Above data is hard-coded to illustrate concept)
R. Vasa, 201127
Wiring up Data - Adapter - ListView
Activity extends ListActivity
We are using an Array Adapter (others are available / you can
provide your own)
R. Vasa, 201128
Wiring up Data - Adapter - ListView
We are using SDK provided layout style(we can also write our own as an Layout XML)
R. Vasa, 201129
Wiring up Data - Adapter - ListView
We are setting the data source to use
R. Vasa, 201130
Wiring up Data - Adapter - ListView
Tell the List View to display from adapter
R. Vasa, 201131
Wiring up Data - Adapter - ListView
Only one ListView can receive data via the default
setListAdapter in an Activity
R. Vasa, 201132
Activity Layout
ListView that will receive data provided via setListAdapter
R. Vasa, 201133
Activity Layout
ListView that will receive data provided via setListAdapter
Special built-in
identifier
Special built-in
identifier
R. Vasa, 201134
Handling List Click Event
This call back is provided by the parent (List Activity) class -- we
override it
This call back is provided by the parent (List Activity) class -- we
override it
R. Vasa, 201135
But, what about complex lists?
Key concepts are the same
We will cover it later in depth
(if you are curious, look at examples online)
R. Vasa, 201136
Lecture Summary
•Working with Menus
•Using Frame Layout
•Adapters and Working with Simple Lists