Download More About Layouts

15/01/2015
EECS 4443 – Mobile User Interfaces
More About Layouts
Scott MacKenzie
York University
© Scott MacKenzie
Overview (Review)
• A layout defines the visual structure for a user interface, such as the UI for an activity or app widget • Two ways to declare a layout:
1. XML vocabulary. Android provides a straightforward XML vocabulary that organizes the View classes and subclasses, such as those for widgets and layouts.
2. Java code. Instantiate layout elements at runtime. Create and configure View and ViewGroup objects programmatically.
© Scott MacKenzie
2
1
15/01/2015
XML vs. Code
• XML advantage:
– Better separation of the presentation of an application from the code that controls its behaviour
– UI descriptions are external to the application code (simplifies modifications, promotes re‐use)
– Easier to visualize the UI structure
– Easier to debug
© Scott MacKenzie
3
XML (main.xml)
Demo Android
© Scott MacKenzie
4
2
15/01/2015
XML (main.xml)
Demo Android
“Elements”
“Attributes”
5
© Scott MacKenzie
ID Attribute
main.xml
@  The string is expanded as an XML resource
+  A new resource to create and add to R.java
• XML 
• Code 
• gen 
DemoAndroidActivity.java
R.java
© Scott MacKenzie
6
3
15/01/2015
Load the XML Resource
DemoAndroidActivity.java
7
© Scott MacKenzie
Layout Parameters (1)
• Layout attributes take the form…
layout_something
• Define layout parameters for the views in the view group
• Parent class…
ViewGroup.LayoutParams
• All ViewGroup classes implement a nested class that extends ViewGroup.LayoutParams
• Examples:
– LinearLayout
 LinearLayout.LayoutParams
– RelativeLayout  RelativeLayout.LayoutParams
Next slide
© Scott MacKenzie
8
4
15/01/2015
Layout Parameters (2)
© Scott MacKenzie
9
Common Layouts
© Scott MacKenzie
10
5
15/01/2015
LinearLayout (1)
Demo Android
© Scott MacKenzie
11
LinearLayout (2)
Supports “Layout Weight” for child views
Weights assign importance to views
Sets relative space a view occupies
Larger weight (e.g., “3”)  more space
Smaller weight (e.g., “1”)  less space
Default is “0” (space provided as necessary) Specified weights will fill available space in proportion to the values
• Example (next slide)
•
•
•
•
•
•
•
© Scott MacKenzie
12
6
15/01/2015
LinearLayout (3)
Demo Scale
main.xml
<LinearLayout ... >
<TextView
android:layout_width="fill_parent“
android:layout_height="wrap_content“
.../>
PaintPanel height fills available space
<...PaintPanel
android:layout_width="fill_parent“
android:layout_height="0dp“
android:layout_weight="1"
.../>
<LinearLayout
android:layout_width="fill_parent“
android:layout_height="wrap_content“
android:orientation="horizontal"
...>
...
</LinearLayout>
</LinearLayout>
13
© Scott MacKenzie
RelativeLayout (1)
Demo Layout
© Scott MacKenzie
14
7
15/01/2015
RelativeLayout (2)
layout-land/main.xml
editText1
<RelativeLayout ...>
<EditText
android:id="@+id/editText1“
android:layout_alignParentTop="true“
.../>
<Button
android:id="@+id/button1“
android:layout_alignLeft="@id/editText1“
android:layout_below="@id/editText1“
.../>
button1
button2
<Button
android:id="@+id/button2"
android:layout_below="@id/editText1"
android:layout_toRightOf="@id/button1“
.../>
...
</RelativeLayout>
© Scott MacKenzie
15
Building Layouts With Adapters
• If…
– The layout is dynamic (not pre‐determined)
• Then…
– Use a layout that subclasses AdapterView to populate the layout with views at runtime (e.g., ListView, GridView)
• AdapterView
– Uses an Adapter to bind data to its layout
– Behaves as a middle‐man between the data source and the AdapterView layout
– The Adapter retrieves the data (from a source such as an array) and converts each entry into a view that is added into the AdapterView
layout
© Scott MacKenzie
16
8
15/01/2015
ListView
Demo ListView
17
© Scott MacKenzie
GridView
Demo GridView
© Scott MacKenzie
18
9
15/01/2015
Filling An Adapter View With Data
• Populate an AdapterView (e.g., ListView) by binding the AdapterView instance to an Adapter
• The Adapter retrieves data from an external source and creates a View for each data entry
• Don’t  use Adapter directly
• Do
 use a subclass of Adapter
• Examples:
– ArrayAdapter (next slide)
– CursorAdapter (no demo yet)
© Scott MacKenzie
19
ArrayAdapter
• Used if the data source is an array
• By default…
– ArrayAdapter creates a view for each array item by calling toString() on each item and placing the contents in a TextView
• Or… – If you want an ImageView (instead of a TextView)
– Extend ArrayAdapter and override getView to return an ImageView
– Examples: Demo ListView, Demo GridView
© Scott MacKenzie
20
10
15/01/2015
Homework
• For the demo programs in these slides…
– Download
– Import into Android projects
– Run on your Android device (use USB debugging mode)
– Read APIs (and links within)
– Study code
© Scott MacKenzie
21
Thank You
© Scott MacKenzie
22
11