Building User Interface for Android Mobile Applications II

Transcription

1 Building User Interface for Android Mobile Applications II Mobile App Development

2 1 MVC 2

3 MVC 1 MVC 2

4 MVC Android redraw View invalidate Controller tap, key pressed update Model

5 MVC MVC in Android View The View is the application s feedback to the user and is a portion of application that is responsible for rendering the display. Graphically, it represents a rectangular area on the screen that is completely within the rectangular area represented by its parent in the tree. The root of this tree is the application window.

6 MVC MVC in Android Controller The Controller is the portion of an application that responds to external actions: a keystroke, a screen tap, an incoming call, etc. System maintains a queue of events and removes events in order and dispatches them. View event Queue event event event Controller1 Controller2 Controller3

7 MVC MVC in Android Model Controller as a reaction to the event notifies the Model. The Model is updated and sends the information to the View to refresh (invalidate) View event event update Controller Queue Model invalidate

8 MVC

9 1 MVC 2

10 Chapter 4 Building UI Using and layouts Understanding Optimizing layouts Creating resolution-independent user interfaces Extending, grouping, creating, and using Using to bind data to

11 TextView and EditText TextView TextView is for display only. It can be used as a label or as a way to present text without option to edit it. EditText EditText is a predefined subclass of TextView that includes rich editing capabilities.

12 TextView properties Outline You can change its height, width, font, text color, background color, etc. Interesting non-standard properties autolink if set to true, finds URLs in the displayed text and automatically converts them to clickable links. autotext if set to true, finds and corrects simple spelling errors in the text. editable if set to true, indicates that the program has defined an input method to receive input text. inputmethod Identifies the input method inputtype specifies a type of input e.g. phone no, , password. a a

13 Button and ImageButton Button The Button View is just a button, printed with some text to identify it, that the user can click to invoke some action. ImageButton ImageButton View is a button with an image on it rather than one with text

14 ImageButton Example Outline In main.xml 1 <ImageButton 2 a n d r o i d : i d / btndone 3 a n d r o i d : l a y o u t w i d t h= w r a p c o n t e n t 4 a n d r o i d : l a y o u t h e i g h t= w r a p c o n t e n t 5 /> in activity s oncreate // Get p o i n t e r s to t h e d e f i n e d i n main. xml 3 btn1 = ( ImageButton ) f i n d V i e w B y I d (R. i d. btndone ) ; // Set t h e image f o r t h e Done b u t t o n 6 btn1. s e t I m a g e R e s o u r c e (R. d r a w a b l e. l o g ) ;

15 and Adapter The Adapter has two responsibilities: find the data object that corresponds to a particular index supply a view through which the data at a particular index can be displayed. Adapter The AdapterView is a generic, list-oriented view of data. Any collection of data objects that can be ordered in some relatively stable way can be displayed through an AdapterView.

16 CheckBoxes, RadioButtons, and Spinners Check-Boxes are typically used when you want to offer multiple selections RadioButtons are used when only one choice is allowed at a time Spinners are similar to combo boxes, displays the currently selected option, along with a pull-down list from which the user can click on another option to select it. All above are optimized in Android to serve better in touchscreen environment

17 CheckBox The CheckBox View takes care of flipping its state back and forth and displaying the appropriate checkmark when the state is true. All you have to do is create an OnClickListener to catch click events, and you can add whatever code you want to react.

18 RadioGroup RadioGroup View is really a ViewGroup that contains any number of RadioButton. The user can select only one of the buttons at a time, and you capture the selections by setting OnClickListeners for each RadioButton. Note that clicking on one of the RadioButtons does not fire a click event for the RadioGroup.

19 Spinner Spinners require the most work of these three, but can also provide the best use of scarce screen real estate. To make it work you have to: Create a list of the selections (can be dynamic) Create an ArrayAdapter from the list that the Spinner can use for its drop-down list. Create an onitemselectedlistener for the Spinner to capture select events. Note If you declared values in XML then Adapter is implicit!

20 WebView Outline WebView A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more. To enable zoom Set WebSettings.setBuiltInZoomControls

21

22 1 MVC 2

23 ViewGroup Outline are that contain child.

24 ListView and ListActivity ListView ListView is similar to Gallery, the difference is in scrolling. Gallery provides horizontal while ListView vertical scrolling capabilities. ListActivity Is used to create a ListView that takes up the entire screen. Simple implementation can use a simple String array containing data, an ArrayAdapter that contains a reference to this list of strings and ListActivity using Adapter. See the example in the Hallo Android for more details.

25 ScrollView Outline A ScrollView is a container for another View that lets the user scroll that View vertically ScrollView vs. ListView ListView is designed to display a set of similar things (e.g. makes of cars). The ScrollView, on the other hand, allows an arbitrary View to scroll vertically.

26 TabHost Outline Three different approaches for setting the tab s content Set the content of a tab to an Intent Use a TabContentFactory to create the tab s content on-the-fly Retrieve the content from an XML layout file, much like that of a regular Activity

27 1 MVC 2

28 Outline Why? Android supplies a set of that can pump data from common data sources (including arrays and Cursors) into the native controls that extend Adapter View. Responsibilities are responsible both for supplying the data and for creating the that represent each item, can radically modify the appearance and functionality of the controls they are bound to.

29 Two useful adapters Outline ArrayAdapter It uses generics to bind an Adapter View to an array of objects of the specified class. By default, it uses the tostring value of each object in the array to create and populate Text. SimpleCursorAdapter It enables you to bind the within a layout to specific columns contained within a Cursor (returned from a Content Provider). The adapter will create a new View for each Cursor entry and inflate the layout into it, populating each View within the layout using the Cursor s corresponding column value.

30 Creating and applying an Adapter ArrayList<String> mystringarray = new ArrayList<String>(); int layoutid = android.r.layout.simple_list_item_1; ArrayAdapter<String> myadapterinstance; myadapterinstance = new ArrayAdapter<String>(this, layoutid, mystringarray); mylistview.setadapter(myadapterinstance);

31

32 1 MVC 2

33 Frame Layout Outline Frame Layout The Frame Layout is sort of a null layout specification. It reserves space on the screen for a single View to be drawn, and the View is always located at the upper left of the space. There is no way to specify a different location for the View, and there can be only one View in the Layout. Note! If more than one View is defined in the layout file, they are just drawn on top of each other, all pinned to the upper-left corner.

34 LinearLayout and TableLayout LinearLayout The most popular layout in Android. are laid out as either a series of rows (vertical LinearLayout) or a series of columns (horizontal LinearLayout). TableLayout It lays out the included in the form of a table (similar to an HTML table).

35 AbsoluteLayout and RelativeLayout AbsoluteLayout An AbsoluteLayout puts views on the screen wherever you tell it to. No resizing, nor alignment is done. It just puts things where it s told so be careful! RelativeLayout It allows you to express the relative positioning of the in the screen, and the layout manager will do its best to fit them all on the screen in the proper relations. Properties such as android:layout below, android:layout torightof etc are used to express relative position

36

37 1 MVC 2

38 were introduced to Android as part of the Android 3.0 Honeycomb (API level 11) release. They are now also available as part of the Android support library, making it possible to take advantage of on platforms from Android 1.6 (API level 4) onward.

39 Why? enable you to divide your Activities into fully encapsulated reusable components, each with its own lifecycle and UI. What? Each Fragment is an independent module that is tightly bound to the Activity into which it is placed. can be reused within multiple activities, as well as laid out in a variety of combinations to suit multipane tablet UIs and added to, removed from, and exchanged within a running Activity to help build dynamic UIs.

40 Building framgents Outline 1 Extend the Fragment class to create a new Fragment, (optionally) defining the UI and implementing the functionality it encapsulates. 2 Assign a UI to your Fragment (It is possible to create a Fragment that doesn t include a UI but instead provides background behaviour for an Activity) 3 Override the oncreateview handler to in ate and return the required View hierarchy

41 1 You must call back to the superclass when overriding most of these event handlers. 1 Source: Professional Android 4 Application Development

42 Creating and Destroying fragments (1) Create The onattach event is triggered before the Fragment s UI has been created, before the Fragment itself or its parent Activity have nished their initialization. Typically, the onattach event is used to gain a reference to the parent Activity in preparation for further initialization tasks. As with Activities, you should use the oncreate method to initialize your Fragment. It s good practice to create any class scoped objects here to ensure they re created only once in the Fragment s lifetime. Note Unlike Activities, the UI is not initialized within oncreate.

43 Creating and Destroying fragments (2) Destroy The created lifetime of your Fragment occurs between the first call to oncreate and the nal call to ondestroy. As it s not uncommon for an Activity s process to be terminated without the corresponding ondestroy method being called, so a Fragment can st rely on its ondestroy handler being triggered.

44 Fragment Manager Outline Each Activity includes a Fragment Manager to manage the it contains. You can access the Fragment Manager using the getfragmentmanager method. It provides the methods used to access the currently added to the Activity, and to perform Fragment Transaction to add, remove, and replace. FragmentManager fragmentmanager = getfragmentmanager();

45 FragmentTransaction Outline Fragment Transactions Fragment Transactions can be used to add, remove, and replace within an Activity at run time. Using Fragment Transactions, you can make your layouts dynamic that is, they will adapt and change based on user interactions and application state. FragmentTransaction fragmenttransaction = fragmentmanager.begintransaction(); // Add, remove, and/or replace. // Specify animations. // Add to back stack if required. fragmenttransaction.commit();

46 Android Fragment Classes DialogFragment A Fragment that you can use to display a floating Dialog over the parent Activity. ListFragment A wrapper class for that feature a ListView bound to a data source as the primary UI metaphor. It provides methods to set the Adapter to use and exposes the event handlers for list item selection. WebViewFragment A wrapper class that encapsulates a WebView within a Fragment. The child WebView will be paused and resumed when the Fragment is paused and resumed.