Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
Ths. Lương Trần Hy Hiến
Khoa Công Nghệ Thông Tin
Trường Đại học Sư phạm TP.HCM1
I. Layout
1. Cách tạo một Layout mới.
2. Kết nối layout vào Activity.
3. HierarchyViewer.
4. Các kiểu Layout cơ bản.
II. Các điều khiển cơ bản
2
Chọn File New Android XML File Linear Layout (layout bạn muốn tạo –
bạn có thể chọn Relative Layout, Table Layout, …).
3
Code kết nối Layout vào Activity
4
Một Layout phải được kết nối vào Activity nào đó thông qua hàm
setContentView, Android sẽ có cơ chế dịch XML thành Java code.
HierarchyViewer dùng để hiển thị cấu trúc UI của màn hình hiện tại trên
emulator hoặc thiết bị thật.
5
FrameLayout
TableLinearLayout
Layout
RelativeLayout
AbsoluteLayout
6
7
Required attributes
● layout_width
● layout_height
=> layout knows how to size a view
android:layout_height="wrap_content"
android:layout_width="match_parent" (previously
"fill_parent“)
*can be specified in a measurement unit
Other common attributes
Id (e.g., android:id=“@+id/startButton”)
layout_marginTop
layout_marginBottom
layout_marginLeft
layout_marginRight
layout_gravity (alignment: i.e., left, center, right)
layout_weight
...
8
Concern: devices with different densities (dpi,
dot per inch)
Screen densities for Android
Low density (ldpi): 120 dpi
Medium density (mdpi): 160 dpi
High density (hdpi): 240 dpi
Extra high density (xhdpi): 320 dpi
Extra extra high density (xxhdpi): 480 dpi
Extra extra extra high density (xxxhdpi): 640 dpi
9
dp: density-independent pixel
160dp = 1" of physical screen size
dp to screen pixels (px): px = dp x (dpi / 160)
Same ratio on different devices; recommended
sp: scale-independent pixel
Similar to dp for specifying font size; recommended
pt: point
1 pt = 1/72" of physical screen size; not recommended
px: pixel
Actual pixel of screen; not recommended
10
Layout thường sử dụng:
RelativeLayout
LinearLayout
TableLayout
GridLayout
FrameLayout
11
12
Sử dụng trong các trường hợp xây dựng bố cục tổ chức hiển
thị một đối tượng duy nhất.
Đối tượng mặc định vị trí top-left trên FrameLayout, có thể sử
dụng thuộc tính Gravity để thiết lập lại vị trí.
Ví dụ khai báo:<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent” >
</FrameLayout>
13
Các đối tượng kế thừa phổ biến:
ViewFlipper: đối tượng cho phép thực hiện hiển thị các đối tượng ở chế độ phân trang, chỉ hiển thị một đối tượng ở một thời điểm.
▪ Ví dụ khai báo:<ViewFlipper
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent” >
</ViewFlipper>
▪ Các phương thức sử dụng:▪startFlipping
▪setAutoStart
▪showNext
▪showPrevious
14
Các đối tượng kế thừa phổ biến:
ScrollView: đối tượng cho phép thực hiện hiển thị các đối tượng ở chế độ cuộn màn hình, chỉ cho phép chứa một đối tượng ở một thời điểm.
▪ Ví dụ khai báo:<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent” >
</ScrollView>
▪ Các phương thức sử dụng:▪setFillViewPort
▪scrollBy
▪scrollTo
▪smoothScrollBy
▪smoothScrollTo
15
Sử dụng trong các trường hợp xây dựng bố cục tổ chức hiển
thị các đối tượng theo một chiều duy nhất (chiều dọc hoặc
ngang, android:orientation="horizontal" or "vertical")
Đối tượng mặc định vị trí top left trên LinearLayout, có thể sử
dụng thuộc tính Gravity để thiết lập lại vị trí.
Ví dụ khai báo:<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent”
android:orientation=“vertical” >
</LinearLayout>
16
17
TableLayout: đối tượng layout kế thừa từ LinearLayout, cho
phép hiển thị các đối tượng theo nhiều dòng (TableRow).
Mỗi dòng có thể chứa nhiều View, mỗi View được xem là một
cột.
Ví dụ khai báo:<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent” >
<Tablerow>
<Button/>
</Tablerow>
</TableLayout>
18
19
TableRow sẽ tự động
được tạo ra (nếu dòng
đó chưa có) khi bạn
kéo thả các View con
vào các ô của bảng.
Sử dụng trong các trường hợp xây dựng bố cục tổ chức hiển
thị các đối tượng theo mối quan hệ vị trí.
Đối tượng được đặt vào RelativeLayout đầu tiên sẽ xác định
vị trí cho các đối tượng sau đó.
Ví dụ khai báo:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent”>
</RelativeLayout>
20
Types of relationships: To the left, right, above or below the specified element
(layout_toLeftOf, layout_toRightOf, layout_above,
layout_below)
Aligned by the left, right, top or bottom edge of the
specified element (layout_alignLeft, layout_alignRight,
layout_alignTop, layout_alignBottom)
Aligned by the left, right, top or bottom edge of a parent
(layout_alignParentLeft, layout_alignParentRight,
layout_alignParentTop, layout_alignParentBottom)
Centered vertically, centered horizontally, centered
vertically and horizontally relative to its parent
(layout_centerVertical, layout_centerHorizontal,
layout_centerInParent)21
22
android:layout_alignParentTop=“true”android:layout_alignParentLeft=“true”android:layout_alignParentStart=“true”
android:layout_below=“@id/text1”android:layout_alignLeft=“@id/text1”android:layout_alignStart=“@id/text1”
android:layout_toRightOf=“@id/text2”android:layout_alignBottom=“@id/text2”
android:layout_below=“@id/button”android:layout_alignLeft=“@id/button”android:layout_alignStart=“@id/button”
Places its children in a rectangular grid
Can place children quickly without requiring a table
Can place children in a controlled way by specifying a
row-and-column location or using layout_row and
layout_column attribute
Horizontal vs vertical orientation
23
<GridLayout ...
android:columnCount=“2”
android:rowCount=“2”
android:orientation=“horizontal”>
<TextView ../> <TextView.../> <TextView…/> </TextVIew …/>
</GridLayout>
Placeholder on screen that can be used to
display a single view.
Multiple views stacked in a frame layout, i.e.,
position children on top of each other.
24
Xem thêm:http://developer.android.com/guide/topics/ui/declaring-
layout.html
25
I. Layout
II. Các điều khiển cơ bản
1. Button
2. TextView
3. EditText
4. RadioButton – RadioGroup
5. ListView
26
Các điều khiển là các thành phần giao diện của ứng dụng.
Làm nhiệm vụ chuyển tải thông tin hoặc tiếp nhận thông tin từ
người dùng cuối.
Ví dụ: Button, TextView, ImageView, EditText, CheckBox,
RadioButton, RadioGroup, ToggleButton, ProgressBar, …
27http://developer.android.com/guide/topics/ui/controls.html
TextView: primarily for text output
EditText: text input and editing by the user using
(soft) keyboard
TextView
EditText
View
Button được xây dựng từ TextView. Button cho phép nhận và
phản hồi tương tác nhấn từ người dùng.
Các dạng Button:
• Button
• CompoundButton: CheckBox, RadioButton, ToggleButton,
Switch.
29
Cách lấy button theo Id của Button
Cách thiết lập sự kiện cho Button
30
TextView là đối tượng cho phép hiển thị các nội dung văn
bản ở 4 dạng:
Normal: dạng văn bản kích thước font chữ mặc đinh.
SmallText: dạng văn bản kích thước font chữ nhỏ.
MediumText: dạng văn bản kích thước font chữ vừa.
LargeText: dạng văn bản kích thước font chữ to.
31
Text Field inputType Property Value
Plain text none
Person name textPersonName
Password textPassword
Password (Numeric) numberPassword
E-mail textEmailAddress
Phone phone
Postal address textPostalAddress
32
<EditText ...
androd:hint=“email address”
android:inputType=“textEmailAddress” />
Many different views and widgets
Basic views: simple, commonly used views,
e.g., TextView, EditText, and Button
Picker views: views for selecting from a list, e.g.,
TimePicker and DatePicker
List views: views for displaying a long list of
items, e.g., Spinner and ListView
Container views: views containing other views,
e.g., RadioGroup, GridView, ScrollView, and
VideoView.
33
34
A radio button is specifically used when a single item
from a collection of items must be made.
If a radio button is already selected, it will be de-
selected when another radio button in the collection is
selected.
35
Containers (view group) for other views, e.g.,
ListView: items displayed in a vertically scrolling list
GridView: items displayed in a two-dimensional scrolling grid.
ExpandableListView: extension of a ListView to support two
levels
…
36
Challenge
Many different data sources, e.g., arrays, collections, and
database
Many different ways of displaying them, e.g., Spinner, ListView,
and GridView
Q: How to bind them together?
Q: Any design pattern for this?
37
Array
List
Database
…
Bind a data source to an container view (AdapterView)
Provides a common interface to the data model behind an
AdapterView such as ListView
Responsible for accessing the data to be supplied to a container
widget and converting the individual elements of data into a specific
view
Behaves as a middleman between the data source and the
adapterView.
38
ArrayAdapter
AdapterView <<interface>>Adapter
ListView array
Display a list of items in a vertically scrolling list Providing a list of data to displaysetAdaper(ListAdapter)
ListAdapter: subinterface of Adapter with many subclasses including: ArrayAdapter<T>
BaseAdapter (abstract)
CursorAdapter (abstract)
SimpleBaseAdapter
SimpleCursorAdapter
…
Listener: OnItemSelectedListener
39
Customization
setChoiceMode(int): none
(ListView.CHOICE_MODE_NONE), single, multiple
setTextFilterEnabled(boolean): let the view filter to
match what is typed on the keypad
setItemChecked(int, boolean)
Storing and retrieving items from strings.xml
getResources().getStringArray(R.array.my_array)
40
Bước 1: Đưa dữ liệu cần hiển thị lên ListView vào một mảng hoặc
danh sách (ArrayList, mảng thông thường, mảng đối tượng,…).
Bước 2: Tạo một ListView trên giao diện.
Bước 3: Tạo một đối tượng ArrayAdapter để liên kết giữ ListView và
mảng hoặc danh sách dữ liệu.
ArrayAdapter là gì?
ArrayAdapter được hiểu như cái modem mạng. Nó giúp ListView có
thể “đọc và hiểu” dữ liệu từ mảng dữ liệu để hiện lên giao diện.
Lấy ListView thông qua Id của ListView
ListView lvTenLV = (ListView) findViewById(R.id.idcuaListView);
Tạo ArrayAdapter
ArrayAdapter<[Kiểu mảng]>[Tên mảng adapter];
Đưa dữ liệu từ mảng vào ArrayAdapter
[Tên mảng adapter] = new ArrayAdapter<Kiểu mảng>
(this,android.R.layout.simple_list_item_1,[tenMangDuLieu]);
Cách đổ dữ liệu lên ListView
lvTenLV.setAdapter(tenMangAdapter);
43