›
›

Bài giảng Lập trình cho thiết bị di động - Chương 2: Xử lý giao diện người dùng - Trần Duy Thanh

Download
DONG NAI UNIVERSITY OF TECHNOLOGY  
1. XML layout – XML container  
2. Types of event programming  
3. Toast & Alert Dialog  
4. Common controls  
5. Advanced controls  
6. Custom layout  
7. Webkit  
8. Intent & Intent filters  
9. Touch & Multi touch  
10. Multi language in Android  
1
DONG NAI UNIVERSITY OF TECHNOLOGY  
1. XML layout – XML container  
1.1 Android Layouts  
1.2 View class  
1.3 Sample UI components  
1.4 XML layout and attaching  
1.5 UI Hierarchy  
1.6 Common layouts  
2
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.1 Android Layouts  
Each element in the XML Layout is either a View  
or ViewGroup object  
Displaying the Application‘s View  
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.  
3
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.2 View class  
The View class represents the basic building block  
for user interface components.  
a rectangular area on the screen  
responsible for drawing and event handling.  
is the base class for widgets  
The ViewGroup subclass is the base class for  
layouts  
invisible containers that hold other Views  
and define inside views layout properties.  
4
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.3 Sample UI components  
5
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.4 XML layout and attaching  
What is an XML layout?  
An XML-based layout is a specification of the various UI  
components (widgets) and the relationships to each other  
–and to their containers –all written I  
Android considers XML-based layouts to be resources,  
and as such layout files are stored in the res/layout  
directory inside your Android project XML format.  
You could create Layout XML files using UI tools such  
as:  
Eclipse ADT UI Designer (getting better but still…)  
DroidDraw (to be phased out soon???)  
Asset Studio (probably the best option, not available yet)  
6
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.4 XML layout and attaching  
Attaching Layouts to java code  
You must “connect” the XML elements with equivalent  
objects in your Java activity. This allows you to manipulate  
the UI with code.  
setContentView(R.layout.main);  
Demo: Button is content view  
7
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.4 XML layout and attaching  
Demo  
8
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.5 UI Hierarchy  
In SDK folder / Tools/ monitor.bat  
HierarchyViewer displays the UI structure of the current  
screen shown on the emulator or device.  
9
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.6 Common layouts  
There are five basic types of Layouts:  
Frame, Linear, Relative, Table, and Absolute.  
FrameLayout:  
simplest type of layout object: a blank space on your  
screen that you can later fill with a single object  
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).  
10  
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.6 Common layouts  
FrameLayout:  
<?xml version="1.0" encoding="utf-8"?>  
<FrameLayout android:id="@+id/mainlayout"  
android:layout_height="fill_parent" android:layout_width="fill_parent"  
android:orientation="vertical"  
xmlns:android="http://schemas.android.com/apk/res/android">  
<ImageView android:layout_height="wrap_content"  
android:layout_width="wrap_content" android:padding="5px"  
android:src="@drawable/blue"/>  
<ImageView android:layout_height="wrap_content"  
android:layout_width="wrap_content" android:padding="5px"  
android:src="@drawable/red"/>  
</FrameLayout>  
11  
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.6 Common layouts  
LinearLayout:  
is a box model –widgets or child containers are lined  
up in a column or row, one after the next. To configure  
a LinearLayout, you have five main areas of control  
besides the container's contents:  
orientation,  
fill model,  
weight,  
gravity,  
padding ,  
margin  
12  
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.6 Common layouts  
LinearLayout:  
aligns all children in a single direction —vertically or  
horizontally depending on the android:orientation  
attribute.  
All children are stacked one after the other, (vertical  
list will only have one child per row, 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.  
You may attribute a weight to children of a  
LinearLayout (wrap_content)  
13  
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.6 Common layouts  
LinearLayout:  
LinearLayout Orientation indicates whether the  
LinearLayout represents a row or a column.  
Add the android:orientation property to your  
LinearLayout element in your XML layout, setting the  
value to be horizontal for a row or vertical for a column.  
The orientation can be modified at runtime by  
invoking setOrientation()  
14  
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.6 Common layouts  
LinearLayout:  
Linear Layout: Orientation indicates whether the  
LinearLayoutr epresents a row(HORIZONTAL) or a  
v
column (VERTICAL).  
e
r
t
i
c
a
l
Horizontal  
15  
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.6 Common layouts  
LinearLayout: Fill Model  
Widgets have a "natural"  
size based on their  
accompanying text.  
When their combined  
sizes does not exactly  
match the width of the  
Android device's screen,  
we may have the issue of  
what to do with the  
remaining space.  
16  
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.6 Common layouts  
LinearLayout: Fill Model  
All widgets inside a LinearLayout must supply dimensional  
attributes android:layout_width and android:layout_height to  
help address the issue of empty space. Values used in  
defining height and width are:  
1.Specific a particular dimension, such as 125dip (device  
independent pixels)  
2.Provide wrap_content, which means the widget should  
fill up its natural space, unless that is too big, in which  
case Android can use word-wrap as needed to make it fit.  
3.Provide fill_parent, which means the widget should fill  
up all available space in its enclosing container, after all  
other widgets are taken care of.  
17  
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.6 Common layouts  
LinearLayout: Fill Model  
18  
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.6 Common layouts  
LinearLayout: Weight  
It is used to proportionally assign  
space to widgets in a view.  
You set android:layout_weight to  
a value (1, 2, 3, …) to indicates  
what proportion of the free space  
should go to that widget.  
Example Both the TextView and  
the Button widgets have been set  
as in the previous example. Both  
have the additional property  
android:layout_weight="1"  
whereas the EditTextcontrol has  
android:layout_weight="2"  
Default value is 0  
19  
DONG NAI UNIVERSITY OF TECHNOLOGY  
1.6 Common layouts  
LinearLayout: Gravity  
It is used to indicate how a  
control will align on the screen.  
By default, widgets are left-and  
top-aligned.  
You may use the XML property  
android:layout_gravity=“…” to  
set other possible  
arrangements: left, center, right,  
top, bottom, etc.  
20  
Tải về để xem bản đầy đủ
pptx 220 trang baolam 22880 Free
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình cho thiết bị di động - Chương 2: Xử lý giao diện người dùng - Trần Duy Thanh", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pptxbai_giang_lap_trinh_cho_thiet_bi_di_dong_chuong_2_xu_ly_giao.pptx