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




Thực hành

4


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


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


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




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




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




Thực hành

24

Thực hành > TabLayout

Một activity / tab

25


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


Chuẩn bị 3 icons,

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

Copy icons vào ./res/drawable

27


<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:drawable="@drawable/ic_tab_artists_grey" android:state_selected="true" />  <item android:drawable="@drawable/ic_tab_artists_white" /> </selector>

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

28


<?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


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


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)

bai 3 - giao dien nguoi dung

Documents