bai 3 - giao dien nguoi dung

LẬP TRÌNH ANDROID

BÀI 3: GIAO DIỆN NGƯỜI DÙNG

Khóa đào tạo Lập trình di động đa nền tảng HNPT – 04/2013

Trung tâm Tính toán Hiệu năng cao, ĐH Bách Khoa Hà Nội

2

Nội dung

 Giao diện người dùng

 View  Text, Button, List, Grid, …

 Layout  LinearLayout, AbsolutLayout, TableLayout, …

 Thực hành

3

Nội dung

 Giao diện người dùng

 View  Text, Button, List, Grid, …

 Layout  LinearLayout, AbsolutLayout, TableLayout, …

 Thực hành

4

Giao diện người dùng

 GUI trong Java: AWT, Swing, SWT, LWUIT, … và Android GUI.

 Mô hình: Model-View-Control  Model: database, contacts, etc. Một

model có thể được sử dụng cho nhiều View-Control

 View: hình ảnh hóa của Model. Android tổ chức View dưới dạng cây để quản lý

 Controller: đáp lại các thao tác bên ngoài như phím nhấn, chạm vuốt, cuộc gọi đến, v.v. Được biểu diễn dưới dạng hàng đợi sự kiện.

5

Giao diện người dùng

 Việc lấy event từ hàng đợi và gọi callback của Controller là đơn luồng (single-threaded)  Đảm bảo mỗi event trong hàng đợi được xử lý hoàn toàn và theo đúng thứ tự như trong hàng đợi

 Giao diện sẽ bị đóng băng nếu quá trình xử lý lâu, Android có thể sẽ đề nghị đợi hoặc đóng ứng dụng.

6

Giao diện người dùng

 Android sử dụng lớp View và ViewGroup  Widgets, kế thừa từ View: thiết kế các đối tượng trên giao diện.  Layout, kế thừa từ ViewGroup: chứa các layout và view khác.

 Một giao diện cho Activity có cấu trúc dạng cây

7

Nội dung

 Giao diện người dùng

 View  Text, Button, List, Grid, …

 Layout  LinearLayout, AbsolutLayout, TableLayout, …

 Thực hành

8

View

 Lớp View cung cấp các khối cơ bản cho các thành phần giao diện người dùng.

 Một View là một vùng chữ nhật trên màn hình, có thể vẽ lên và tương tác.

 View là lớp cơ bản cho widgets tạo ra các đối tượng giao diện (text, button, etc.)

9

View > Sử dụng View

 Các View trong 1 cửa sổ được thiết kế dưới dạng 1 cây duy nhất, mô tả dưới định dạng XML.

 Khởi tạo View:  Trong tệp tin Layout  Trong code khi chạy chương trình.

 Các thao tác thông thường trên View  Set properties: thiết lập thuộc tính. Ví dụ: text, ID, căn chỉnh v.v…  Set focus: chuyển tập trung sang đối tượng.  Set up listeners: đặt listener cho đối tượng và xử lý khi có tương tác.

Ví dụ: setOnFocusChangeListener(..)  Set visibility: Ẩn hiện đối tượng View.

 Chú ý: Android chịu trách nhiệm căn chỉnh, sắp xếp và vẽ các đối tượng, ta không cần tự gọi các method này.

10

View > Widgets

 Lớp con của View  TextView  EditText  Button  RadioButton  etc…

 UI events  onSomethingListener

– OnClickListener – OnTouchListener – OnKeyListener – …

11

View > Ví dụ

setContentView(R.layout.hello_activity); //will load the XML UI file

12

View > ListView

 Tạo ra danh sách đối tượng có thể kéo  Các đối tượng tự động thêm vào list qua một ListAdapter.  Danh sách có thể đặt trước trong 1 mảng.

13

View > Một số View khác

TabView GridView FrameLayout

14

View > Một số View khác

WebView MapView SurfaceView

15

Nội dung

 Giao diện người dùng

 View  Text, Button, List, Grid, …

 Layout  LinearLayout, AbsolutLayout, TableLayout, …

 Thực hành

16

Layout

 Định nghĩa vị trí các phần tử quan hệ với nhau  cạnh nhau  trên, dưới  bảng, lưới, danh sách  …

17

Layout > Layout và Activity

18

Layout > LinearLayout

 Sắp xếp các đối tượng một cách tuần tự  Hàng ngang  Hàng dọc

19

Layout > Relative Layout

 Sắp xếp vị trí các đối tượng một cách tương đối  Ví dụ: Về bên trái, phía dưới của Layout.  Rất hữu ích trong việc thiết kế các Layout lồng

20

Layout > TableLayout

 Hiển thị các đối tượng View con theo hàng và cột

21

Layout > XML file

Cấu trúc dạng cây!

22

Layout > Khởi tạo đối tượng trong code

23

Nội dung

 Giao diện người dùng

 View  Text, Button, List, Grid, …

 Layout  LinearLayout, AbsolutLayout, TableLayout, …

 Thực hành

24

Thực hành > TabLayout

 Một activity / tab

25

Thực hành > TabLayout

 Tạo 3 activities

public class ArtistsActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

TextView textview = new TextView(this); textview.setText("This is the Artists tab"); setContentView(textview); } }

Tương tự với AlbumsActivity và SongsActivity

Khởi tạo từ code!!!

26

Thực hành > TabLayout

Chuẩn bị 3 icons,

Tạo ./res/drawable (nếu chưa có)

Copy icons vào ./res/drawable

27

Thực hành > TabLayout

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- When selected, use grey --> <item android:drawable="@drawable/ic_tab_artists_grey" android:state_selected="true" /> <!-- When not selected, use white--> <item android:drawable="@drawable/ic_tab_artists_white" /> </selector>

Tương tự với ic_tab_albums.xml và ic_tab_songs.xml

28

Thực hành > TabLayout

  <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5dp"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="5dp" /> </LinearLayout> </TabHost>

29

Thực hành > TabLayout

public void onCreate(Bundle savedInstanceState)

super.onCreate(savedInstanceState); setContentView(R.layout.main);

Resources res = getResources(); // Resource object to get Drawables TabHost tabHost = getTabHost(); // The activity TabHost TabHost.TabSpec spec; // Resusable TabSpec for each tab Intent intent; // Reusable Intent for each tab

// Create an Intent to launch an Activity for the tab (to be reused) intent = new Intent().setClass(this, ArtistsActivity.class);

// Initialize a TabSpec for each tab and add it to the TabHost spec = tabHost.newTabSpec("artists").setIndicator("Artists",

res.getDrawable(R.drawable.ic_tab_artists)) .setContent(intent); tabHost.addTab(spec);

// Do the same for the other tabs [………………………] tabHost.setCurrentTab(2); }

TabActivity là activity chính, có TabHost

Ánh xạ resource vào tab

Chọn Tab 2

30

Thực hành > TabLayout

 Chạy chương trình

31

Thực hành > ListView

 Cho phép cuộn items

 Có thể thừa kế ListActivity!

 Item định nghĩa trong ./res/layout/list_item.xml

<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" android:textSize="20sp" > </TextView>

32

Thực hành > ListView

 OnCreate public class HelloListView extends ListActivity { /** Called when the activity is first created. */

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, COUNTRIES));

ListView lv = getListView(); lv.setTextFilterEnabled(true);

lv.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // When clicked, show a toast with the TextView text Toast.makeText(getApplicationContext(), ((TextView) view).getText(), Toast.LENGTH_SHORT).show(); } }); } }

Hằng mảng chứa tên các nước

Hiển thị 1 message khi 1 item được click

33

THANKS AND QUESTION ?

34

Bài tập

1.  Thực hiện lại 2 ví dụ về tablayout và listview

2.  Viết chương trình hiển thị 1 câu hỏi và 4 đáp án. Khi người dùng nhấn nút trả lời thì hiện thông báo đúng hay sai (Dùng RadioButton và RadioGroup)

3.  Viết chương trình thu nhập thông tin người dùng (tên, tuổi, giới tính, ngày tháng năm sinh), khi nhấn nút submit thì hiển thị lại thông tin vừa nhập (dùng DatePicker cho ngày tháng năm sinh)