Giao diện người dùng

Giới thiệu các View View là lớp cơ bản cho tất cả các thành phần giao diện  Gồm các UI control và các layout  ViewGroup là lớp mở rộng của View  Chứa nhiều View  Được dùng để tạo cá

Công nghệ mới trong phát triển hệ thống thông tin

Chuyên đề: Phát triển ứng dụng

trên môi trường Android

Bài 4: Giao diện người dùng

TS Trần Minh Triết Khoa Công nghệ Thông tin

Trường ĐH Khoa học Tự nhiên

Tham khảo

 Nội dung của bài giảng có sử dụng:

 Tài liệu, bài giảng của ThS Nguyễn Trung Hiếu, Trung tâm Tin học trường ĐH Khoa học Tự

Phát triển UI trong Android

 UI trong Java

4

Phát triển UI trong Android

 UI trong XML

5

Giới thiệu các View

 View là lớp cơ bản cho tất cả các thành phần giao diện

 Gồm các UI control và các layout

 ViewGroup là lớp mở rộng của View

 Chứa nhiều View

 Được dùng để tạo các thành phần giao diện

 Hoặc dùng để tạo layout quản lý các View con

6

Giới thiệu các View

 Sử dụng hàm setContentView() để đặt layout cho Activity

setContentView( R.layout.main );

 Sử dụng hàm findViewById() để lấy các View được khai báo trong layout

< ListView android:id =" @+id/myListView "/>

( ListView )findViewById(R.id.myListView );

7

Giới thiệu các View

 Sử dụng Linkify để mở một trang web/ gọi điện thoại/ gửi email

10

 autoText = true | false

 capitalize

 none | characters | words | sentences

 phoneNumber = true | false

 password = true | false

 singleLine = true | false

11

 Xử lý event onKey

12

13

14

16

17

18

19

20

21

List Control

 ListView

22

List Control

 ListActivity

23

Grid Control

 GridView

24

Grid Control

25

Date Time Control

26

Date Time Control

 Analog Clock

 Digital Clock

27

Các View đáng quan tâm

 ViewFlipper

 Cho phép định nghĩa một tập hợp các View

 Chỉ có 1 View hiển thị tại một thời điểm

 Có hiệu ứng chuyển đổi giữa các View

 QuickContactBage

 Hiển thị hình ảnh gắn liền với một contact

 Contact bao gồm số điện thoại, tên, email

 Hỗ trợ việc gọi, nhắn tin sms, email hay tin nhắn tức thời (IM – instant message)

28

Các View đáng quan tâm

 MapView

 Là control của package com.google.android.maps được dùng để hiển thị bản đồ

 Có thể định nghĩa từ XML file hoặc Java code, Activity được sử dụng phải là MapActivity

 Để sử dụng MapView phải chứa apiKey được đăng ký với Google

 http://code.google.com/android/toolbox/apis/mapkey.html

29

Các View đáng quan tâm

 Gallery

 Là layout được sử dụng để biểu diễn những Item trong danh sách theo chiều ngang và vị trí

của Item hiện thời luôn ở trung tâm của View

 Cơ chế làm việc giống với GridView widget

30

Các View đáng quan tâm

 WebView

 Là View được sử dụng hiển thị trang Web,

 là class cơ bản dựa vào nó có thể đưa vào trình duyệt Web, hoặc hiển thị vài nội dụng online trong Activity

 Cung cấp quyền sử dụng Internet trong Manifest file

 <uses-permission android:name="android.permission.INTERNET" />

 XML code:

31

Sử dụng Layout

 Layout là mở rộng của lớp ViewGroup được dùng để đặt các controls cho giao diện.

 Các loại layout trong Android SDK

36

38

40

42

public boolean onKeyDown (int keyCode, KeyEvent keyEvent) {

// Return true if the event was handled.

return true;

}

public boolean onKeyUp (int keyCode, KeyEvent keyEvent) {

// Return true if the event was handled.

return true;

}

public boolean onTrackballEvent (MotionEvent event) {

// Get the type of action this event represents

int actionPerformed = event.getAction();

// Return true if the event was handled.

return true;

}

public boolean onTouchEvent (MotionEvent event) {

// Get the type of action this event represents

int actionPerformed = event.getAction();

// Return true if the event was handled.

return true;

}

Xử lý các Event

 Minh họa chương trình TestViewFlipper

48

Xử lý các Event

 ViewFlipper

 Hàm xử lý event onClick

49

Giao diện người dùng – Todo List

Giao diện người dùng – Todo List

 Bước 1:

 Tạo lớp TodoListItemView kế thừa TextView

52

Giao diện người dùng – Todo List

 Bước 2:

 Tạo colors.xml trong res/values

 Tạo màu cho paper, margin, line và text

53

Giao diện người dùng – Todo List

 Bước 3:

 Tạo file resource dimens.xml

 Thêm giá trị mới cho margin

54

Giao diện người dùng – Todo List

 Bước 4:

 Sử dụng đối tượng Paint để vẽ nền và biên

 Khởi tạo và gán giá trị cho các biến trong hàm init()

55

Giao diện người dùng – Todo List

 Bước 5:

 Sử dụng các đối tượng Paint để vẽ trong hàm onDraw()

56

Giao diện người dùng – Todo List

 Bước 6:

 Tạo todolist_item.xml trong res/layout để mô tả cách hiển thị các item

57

Giao diện người dùng – Todo List

Giao diện người dùng – Todo List

59

Tạo và sử dụng Menus

 Hệ thống menu ba giai đoạn của Android

 Icon menu  Expanded menu  Sub menu

61

Tạo và sử dụng Menus

 Menu trong xml file

62

Nội Dung

Menus trong To-do List

65

Menu trong To-do List

66

Dialogs

Nội Dung

Các loại thông báo trong Android

 Toast Notification

 Thông báo dưới dạng thông điệp ngắn

 Status Bar Notification

 Thông báo dưới dạng reminder và yêu cầu người dùng phản hồi

 Dialog Notification

 Thông báo liên quan đến Activity

68

Toast Notification

 Là Message được hiển thị trên bề mặt của màn hình

 Tự động xuất hiện và ẩn đi, không tương tác với người dùng

 Toast có thể được tạo từ Background, nên có thể xuất hiện thậm chí ứng dụng không có giao

diện

69

Toast Notification

Context context = getApplicationContext();

CharSequence text = "Hello toast!";

int duration = Toast.LENGTH_SHORT;

Toast toast = Toast.makeText(context, text, duration);

toast.show();

 Không tạo đối tượng Toast

Toast.makeText(context, text, duration).show();

 Vị trí của Toast

toast.setGravity(Gravity.TOP|Gravity.LEFT, 0, 0);

70

Toast Notification

 Toast có thể được thay đổi giao diện bằng cách

 Tạo layout riêng cho toast

 Khởi tạo đối tượng Toast và setView

71

Status Bar Notification

 Được sử dụng cho trường hợp Service cần thông báo cho người dùng về những sự kiện mà

cần người dùng tương tác

 Cần thêm icon và message mở rộng trong cửa sổ notification

 Cấu hình notification để thông báo người dùng sử dụng âm thanh, độ rung động, ánh sáng trong

thiết bị

72

Status Bar Notification

 Đòi hỏi những thành phần sau

 Icon cho status bar

Status Bar Notification

Nội Dung

 AlertDialog

 Mang tính thông báo (notification)

76

 AlertDialog

 Mang tính xác nhận (confirmation)

77

 Progress Dialog

78

 Progress

Dialog

79

 DatePickerDialog TimePickerDialog

80

 Sử dụng Activity như một Dialog

 Quản lý và hiển thị các Dialog

 public Dialog onCreateDialog(int id);

 public void onPrepareDialog(int id, Dialog dialog) ;

 showDialog(int dialog_name);

81

<activity android:name="MyDialogActivity"

android:theme="@android:style/Theme.Dialog">

</activity>

 Thay đổi vị trí của Activity dạng Dialog

 Thay đổi vị trí hiển thị của Dialog

83

 Demo TestDialog