Post on 28-Jan-2021
More About Views(part 1)
CSE4443 – Mobile User Interfaces
Scott MacKenzieYork University
© Scott MacKenzie
Map• Views, Sizes, and Display Properties• Drawing• Custom Components• Image View• Video View• ListView• GridView• Web View• Map View• Surface View
© Scott MacKenzie2
Review
© Scott MacKenzie3
View• Most uses of the View class are UI Widgets,
etc., that are subclasses of View (next slide)• The View class can also be used directly as a
general purpose area for drawing, etc.– This is somewhat like the JPanel class in
Java/Swing
© Scott MacKenzie4
Example Sub-classes of View
© Scott MacKenzie5
Display Properties• Display properties include
– Physical size (inches, cm)– Resolution– Pixel density– Natural Orientation– Current Orientation– Rotation (angle from
natural orientation)
© Scott MacKenzie6
Demo_Display
ESC
Map• Views, Sizes, and Display Properties• Drawing• Custom Components• Image View• Video View• ListView• GridView• Web View• Map View• Surface View
© Scott MacKenzie7
Example - PaintPanel
© Scott MacKenzie8
ESC
Demo_Ink
Map• Views, Sizes, and Display Properties• Drawing• Custom Components• Image View• Video View• ListView• GridView• Web View• Map View• Surface View
© Scott MacKenzie9
Custom Components
© Scott MacKenzie10
Example - MyButton
© Scott MacKenzie11
ESC
Demo_CustomButton
Example - TouchModeButton
© Scott MacKenzie12
Demo_Ink
ESC
Example - ViewMeter
© Scott MacKenzie13
Demo_Sensors
ESC
Example - ButtonPad
© Scott MacKenzie14
ESC
Demo_LunarLanderPlus
Map• Views, Sizes, and Display Properties• Drawing• Custom Components• Image View• Video View• ListView• GridView• Web View• Map View• Surface View
© Scott MacKenzie15
Example
© Scott MacKenzie16
Demo_Camera
ESC
Example
© Scott MacKenzie17
Demo_InternetDownload
ESC
Map• Views, Sizes, and Display Properties• Drawing• Custom Components• Image View• Video View• ListView• GridView• Web View• Map View• Surface View
© Scott MacKenzie18
Example
© Scott MacKenzie19
Demo_Camera
ESC
Map• Views, Sizes, and Display Properties• Drawing• Custom Components• Image View• Video View• ListView• GridView• Web View• Map View• Surface View
© Scott MacKenzie20
Example
© Scott MacKenzie21
Demo_ListView_1 Demo_ListView_2 Demo_ListView_3
Strings (TextView) Images (ImageView) Images (ImageView)
(from Device's memory card) (from Internet web page)
Map• Views, Sizes, and Display Properties• Drawing• Custom Components• Image View• Video View• ListView• GridView• Web View• Map View• Surface View
© Scott MacKenzie22
Example
© Scott MacKenzie23
Demo_GridView
ESC
Homework• Download all the “demo” programs from
earlier slides• Import into Android projects• Connect your device and click “Run”• Observe UI behaviour• Ready the APIs (and links within)• Study source code
© Scott MacKenzie24
Thank You
© Scott MacKenzie25
Slide Number 1MapReviewViewExample Sub-classes of ViewDisplay PropertiesMapExample - PaintPanelMapCustom ComponentsExample - MyButtonExample - TouchModeButtonExample - ViewMeterExample - ButtonPadMapExample Example MapExample MapExampleMapExampleHomeworkThank You