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

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ự nhiên, ĐHQG- HCM  Tài liệu, bài giảng của ThS. Bùi Tấn Lộc, Khoa Công nghệ Thông tin, trường ĐH Khoa học Tự nhiên, ĐHQG-HCM  Website: 2 Nội dung  Giới thiệu các View  Sử dụng Layout  Xử lý các Event  Giao diện người dùng trong To-do List  Tạo và sử dụng Menus  Menus trong To-do List  Notification  Dialog 3 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)findViewById(R.id.myListView); 7 Giới thiệu các View  Các controls thông dụng:  TextView  EditText  ListView  Spinner  Button  CheckBox  RadioButton 8 Text Controls  TextView  EditText  AutoCompleteTextView  MultiCompleteTextView 9 TextView  Sử dụng Linkify để mở một trang web/ gọi điện thoại/ gửi email 10 EditText  autoText = true | false  capitalize  none | characters | words | sentences  phoneNumber = true | false  password = true | false  singleLine = true | false 11 EditText  Xử lý event onKey 12 AutoCompleteTextView 13 MultiAutoCompleteTextView 14 Button Controls  Button  ImageButton  ToggleButton  CheckBox  RadioButton 15 Button 16 ImageButton 17 ToggleButton 18 CheckBox 19 RadioButton 20 RatingBar 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  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 Nội Dung  Giới thiệu các View  Sử dụng Layout  Xử lý các Event  Giao diện người dùng trong To-do List  Tạo và sử dụng Menus  Menus trong To-do List  Notification  Dialogs 32 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  FrameLayout  LinearLayout  RelativeLayout  TableLayout 33 Sử dụng Layout  Hằng số cho độ cao và rộng trong layout  wrap_content  Đặt kích thước của View đủ lớn để chứa nội dung mà nó hiển thị  fill_parent  Cho phép View hiển thị theo kích thước của màn hình  Ví dụ: android:layout_width = “fill_parent” android:layout_height = “wrap_content” 34 LinearLayout  Linear layout  Cho phép đặt các control theo chiều ngang hay chiều dọc android:orientation android:layout_width android:layout_height 35 LinearLayout 36 RelativeLayout  Relative layout  Cho phép định nghĩa vị trí của mỗi view theo các view khác hay biên của màn hình android:layout_width android:layout_height 37 RelativeLayout 38 TableLayout  Table layout  Cho phép đặt các View vào lưới được tạo bởi các dòng và cột. 39 TableLayout 40 TabLayout  TabLayout  Cho phép hiển thị các view theo dạng tab  TabHost  TabWidget  FrameLayout 41 TabLayout 42 Nội Dung  Giới thiệu các View  Sử dụng Layout  Xử lý các Event  Giao diện người dùng trong To-do List  Tạo và sử dụng Menus  Menus trong To-do List  Notification  Dialogs 43 Xử lý các Event  onKeyDown  Được xử lý khi thực hiện thao tác nhấn phím: Dpad, keyboard, back, camera 44 @Override public boolean onKeyDown(int keyCode, KeyEvent keyEvent) { // Return true if the event was handled. return true; } Xử lý các Event  onKeyUp  Được xử lý khi thực hiện thao tác nhả phím 45 @Override public boolean onKeyUp (int keyCode, KeyEvent keyEvent) { // Return true if the event was handled. return true; } Xử lý các Event  onTrackBallEvent  Được xử lý khi thực hiện thao tác di chuyển track ball 46 @Override 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; } Xử lý các Event  onTouchEvent  Được xử lý khi thực hiện thao tác chạm màn hình 47 @Override 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 Nội Dung  Giới thiệu các View  Sử dụng Layout  Xử lý các Event  Giao diện người dùng trong To-do List  Tạo và sử dụng Menus  Menus trong To-do List  Notification  Dialogs 50 Giao diện người dùng – Todo List  Mục tiêu:  Thay đổi giao diện của ListView trong Todo List  Cách thức:  Mở rộng TextView và  thay đổi phương thức onDraw() 51 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  Bước 7:  Trong lớp ToDoList thay đổi android.R.layout.simple_list_item_1  R.layout.todolist_item 58 Giao diện người dùng – Todo List 59 Nội Dung  Giới thiệu các View  Sử dụng Layout  Xử lý các Event  Giao diện người dùng trong To-do List  Tạo và sử dụng Menus  Menus trong To-do List  Notification  Dialogs 60 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 Tạo và sử dụng Menus  Menu trong java code  onCreateOptionsMenu(); onOptionsItemSelected()  onCreateContextMenu(); onContextItemSelected() 63 Nội Dung  Giới thiệu các View  Sử dụng Layout  Xử lý các Event  Giao diện người dùng trong To-do List  Thao tác với Drawable Resources  Tạo và sử dụng Menus  Menus trong To-do List  Notification  Dialogs 64 Menus trong To-do List 65 Menu trong To-do List 66 Dialogs Nội Dung  Giới thiệu các View  Sử dụng Layout  Xử lý các Event  Giao diện người dùng trong To-do List  Thao tác với Drawable Resources  Tạo và sử dụng Menus  Menus trong To-do List  Notification  Dialogs 67 Notification 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  Tạo Toast 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  Message mở rộng  Pending Intent cần được gọi khi notification được lựa chọn  Các thành phần bổ sung  Ticker message  Âm thanh  Độ rung động  Ánh sáng 73 Status Bar Notification  Sử dụng âm thanh  Default notification.defaults |= Notification.DEFAULT_SOUND;  Sử dụng độ rung động  Default notification.defaults |= Notification.DEFAULT_VIBRATE;  Sử dụng ánh sáng  Default notification.defaults |= Notification.DEFAULT_LIGHTS; 74 Nội Dung  Giới thiệu các View  Sử dụng Layout  Xử lý các Event  Giao diện người dùng trong To-do List  Thao tác với Drawable Resources  Tạo và sử dụng Menus  Menus trong To-do List  Notification  Dialogs 75 Dialogs  AlertDialog  Mang tính thông báo (notification) 76 Dialogs  AlertDialog  Mang tính xác nhận (confirmation) 77 Dialogs  Progress Dialog 78 Dialogs  Progress Dialog 79 Dialogs  DatePickerDialog TimePickerDialog 80 Dialogs  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"> Dialogs  Thay đổi vị trí của Activity dạng Dialog  Thay đổi vị trí hiển thị của Dialog 82 WindowManager.LayoutParams params = getWindow().getAttributes(); params.x = 0; params.y = -250; this.getWindow().setAttributes(params); AlertDialog exitDialog = (AlertDialog) dialog; exitDialog.getWindow().getAttributes().x = -20; exitDialog.getWindow().getAttributes().y = -40; Dialogs 83  Demo TestDialog