Android Chapter04 User Interfaces

  • View
    142

  • Download
    2

Embed Size (px)

Text of Android Chapter04 User Interfaces

Part 4

Android User Interfaces Using XML LayoutsNotes are based on:The Busy Coder's Guide to Android Development by Mark L. Murphy Copyright 2008-2009 CommonsWare, LLC. ISBN: 978-0-9816780-0-9 & Android Developers http://developer.android.com/index.html

4. Android UI - User Interfaces

The View Class

Lp View i din cho khi c bn cho cc thnh phn giao din ngi dng. Mi View chim mt vng hnh ch nht trn mn hnh v chu trch nhim cho drawing (v) v event handling (x l s kin).

View l lp c s cho cc widget, dng to cc component tng tc ca UI (buttons, text fields, etc.).Lp con ViewGroup l lp c s cho cc layout (b cc), l cc container v hnh cha cc View (hoc cc ViewGroup) khc v quy nh cc c im b cc ca chng.

2

4. Android UI - User Interfaces

S dng View

Tt c cc view trong mt ca s c t chc trong mt cu trc cy.Ta c th b sung cc view t m ngun hoc nh ngha cu trc cy ca cc view trong mt hoc vi file layout XML. Sau khi to mt cy view, c mt s thao tc c th cn thc hin:1. 2. 3. Set properties: v d gn sn dng text trong mt TextView. Cc property bit t trc c th c t sn trong cc file layout XML. Set focus: c ch di chuyn focus p ng input ca ngi dng. yu cu focus cho mt view c th, gi hm requestFocus(). Set up listeners: View cho php t cc listener, cc listener ny c gi khi c s kin xy ra i vi view. V d, mt Button dng mt listener nghe s kin button c click. Set visibility: Ta c th che hoc hin view bng setVisibility(int).3

4.

4. Android UI - User Interfaces

A brief sample of UI componentsLayouts

Linear LayoutA LinearLayout is a GroupView that will lay child View elements vertically or horizontally.

Relative LayoutA RelativeLayout is a ViewGroup that allows you to layout child elements in positions relative to the parent or siblings elements.

Table LayoutA TableLayout is a ViewGroup that will lay child View elements into rows and columns.4

4. Android UI - User Interfaces

A brief sample of UI componentsWidgets GalleryView TabWidget

Spinner

DatePickerA DatePicke is a widget that allows the user to select a month, day and year.

Form ControlsIncludes a variety of typical form widgets, like: image buttons, text fields, checkboxes and radio buttons.

5

4. Android UI - User Interfaces

A brief sample of UI componentsWebView

MapView

AutoCompleteTextViewIt is a version of the EditText widget that will provide auto-complete suggestions as the user types. The suggestions are extracted from a collection of strings.

ListViewA ListView is a View that shows items in a vertically scrolling list. The items are acquired from a ListAdapter.6

4. Android UI - User Interfaces

What is an XML Layout?

XML-based layout l mt c t v cc UI component (widget), quan h gia chng vi nhau v vi container cha chng tt c c vit theo nh dng XML.Android coi cc XML-based layout l cc resource (ti nguyn), v cc file layout c lu trong th mc res/layout trong project ca ta.

7

4. Android UI - User Interfaces

What is an XML Layout?

Mi file XML cha mt cu trc phn cp dng cy, c t layout ca cc widget v cc container thnh phn ca mt View. Cc thuc tnh ca mi phn t XML l cc tnh cht, m t b ngoi ca widget hoc hot ng ca mt container. Example: Nu mt phn t Button c mt thuc tnh c gi tr android:textStyle = "bold" Ngha l phn text hin trn mt nt cn c v bng font ch m (bold).

8

4. Android UI - User Interfaces

An exampleimport import import import import import java.util.Date; android.app.Activity; android.os.Bundle; android.view.View; android.view.View.OnClickListener; android.widget.Button;

ng dng c mt nt bm chim ton b mn hnh. Khi nhn nt, phn text ca nt cho bit thi gian hin hnh.

public class AndDemo extends Activity { Button btn; @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.main); btn = (Button) findViewById(R.id.myButton); btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { updateTime(); } }); }// onCreate // private void updateTime() { btn.setText(new Date().toString()); } }

9

4. Android UI - User Interfaces

An exampleThis is the XML-Layout definition

Phn t gc(root) cn khai bo Android XML namespace: xmlns:android="http://schemas.android.com/apk/res/android" Tt c cc phn t khc s l con ca root v s tha k khai bo namespace . V ta mun gi n nt t bn trong m Java, ta cn cho n mt id qua thuc tnh android:id .10

4. Android UI - User Interfaces

An example cont.

Cc thuc tnh cn li ca thc th Button ny l: android:text gi tr khi to ca chui text cn hin trn mt nt ( y l xu rng) android:layout_width v android:layout_height bo cho Android rng chiu rng v chiu cao ca nt chim ton b container (parent), y l ton b mn hnh.11

4. Android UI - User Interfaces

Look for your SDK folder, usually: C:/your_sdk_path/android_sdk_windows/tools

UI Hierarchy

UI Tree

The utility HierarchyViewer displays the UI structure of the current screen shown on the emulator or device. ( Execute app on emulator, execute HierarchyViewer, click on Emulator > Refresh Screenshot )12

4. Android UI - User Interfaces

Android Layouts

Each element in the XML Layout is either a View or ViewGroup object

13

4. Android UI - User Interfaces

Android Layouts

Displaying the Applications ViewThe Android UI Framework paints the screen by walking the View tree by asking each component to draw itself in a pre-order traversal way.

Each component draws itself and then asks each of its children to do the same.

See: Android Application Development, by R. Rogers et al. OReilly Pub. 2009, ISBN 978-0-596-52147-0

14

4. Android UI - User Interfaces

Android LayoutsUsing SDK older than r8.

Example: Display UI Hierarchy

vertical

Horizontal 1 Horizontal 2

See: Android Application Development, by R. Rogers et al. OReilly Pub. 2009, ISBN 978-0-596-52147-0

15

4. Android UI - User Interfaces

Android Layouts

Example: Display UI Hierarchy (Using SDK Revision 8)

UI TreeHorizontal 1 Horizontal 2

vertical

16

4. Android UI - User Interfaces

Example: Display UI Hierarchy

See: Android Application Development, by R. Rogers et al. OReilly Pub. 2009, ISBN 978-0-596-52147-0 17

4. Android UI - User Interfaces

Common Layouts

There are five basic types of Layouts: Frame, Linear, Relative, Table, and Absolute.

1. FrameLayoutFrameLayout is the simplest type of layout object. It's basically a blank space on your screen that you can later fill with a single object for example, a picture that you'll swap in and out.All child elements of the FrameLayout are pinned to the top left corner of the screen; you cannot specify a different location for a child view. Subsequent child views will simply be drawn over previous ones, partially or totally obscuring them (unless the newer object is transparent).18

4. Android UI - User Interfaces

Common Layouts

2. LinearLayoutLinearLayout aligns all children in a single direction vertically or horizontally depending on the android:orientation attribute.

All children are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding).A LinearLayout respects margins between children and the gravity (right, center, or left alignment) of each child.19

4. Android UI - User Interfaces

Common Layouts

2. LinearLayoutYou may attribute a weight to children of a LinearLayout. Weight gives an "importance" value to a view, and allows it to expand to fill any remaining space in the parent view.Example:The following two forms represent a LinearLayout with a set of elements: a button, some labels and text boxes. The text boxes have their width set to fill_parent; other elements are set to wrap_content. The gravity, by default, is left. The difference between the two versions of the form is that the form on the left has weight values unset (0 by default), while the form on the right has the comments text box weight set to 1. If the Name textbox had also been set to 1, the Name and Comments text boxes would be the same height.20

4. Android UI - User Interfaces

Common Layouts

3. TableLayout1. 2. 3. 4. 5. 6. 7. TableLayout positions its children into rows and columns. TableLayout containers do not display border lines. The table will have as many columns as the row with the most cells. A cell could be empty, but cannot span columns, as they can in HTML. A TableRow object defines a single row in the table. A row has zero or more cells, each cell is defined by any kind of other View. A cell may also be a ViewGroup object.

21

4. Android UI - User Interfaces

Common LayoutsTableLayout Example The following sample layout has two rows and two cells in each. The accompanying screenshot shows the result, with cell borders displayed as dotted lines (added for visual effect).

22

4. Android UI - User Interfaces

Common Layouts

4. RelativeLayout1. RelativeLayout lets child views specify their position relative to the parent view or to each other (specified by ID).You can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. Elements are rendered in the order given, so if the first element is centered in the screen, other elements aligning themselves to that element will be aligned relative to screen center. Also, because of this ordering, i