Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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