Thiết kế giao diện trên Android

MultiUni Trần Vũ Tất Bình

Tổng quan
• Trong Android, dùng Activity để hiển thị màn hình. • Mỗi activity sẽ chứa các View theo dạng cấu trúc cây, nghĩa là một Layout gốc chứa các view/layout con bên trong hoặc chỉ có 1 view duy nhất. (lưu ý Layout cũng là một view nhé) • Có thể thiết kế giao diện trong code java hoặc trong file xml trong thư mục layout.

Tree view .

com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent”> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text=“@string/hello“ /> </LinearLayout> .0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.Layout mẫu của helloworld <?xml version="1.android.

ta khai báo orientation để chọn sắp theo kiểu nào (horizontal/vertical) . layout_height: chiều rộng của view (fill_parent là to bằng kích thước của layout chứa view này.Một số thuộc tính cơ bản • Layout_width. wrap_content là vừa đủ nội dung cần hiển thị của view) • Orientation: với LinearLayout. việc sắp xếp các view là nằm kề nhau theo hàng ngang hoặc hàng dọc.

trên dưới…) • Weight: để các view phan chia tỉ lệ diện tích hiển thị trên màn hình (tỉ lệ tính theo weight của từng view trên tổng số weight.Một số thuộc tính cơ bản • Gravity: thuộc tính này qui định các view nằm bên trong layout sẽ đặt theo vị trí nào so với layout(trung tâm. các view ko khai báo weight thì sẽ xem qua width và height) . phải. trái .

com/resources/tutorial s/views/hello-linearlayout. lưu ý đọc thêm các dòng giải thích tiếng Anh nhé http://developer.android.html .Ví dụ cơ bản • Các bạn vào link này lấy code cho vào ứng dụng.

Giao diện với LinearLayout • Giả sử bạn cần thiết kế một màn hình như sau: .

một bên lại là 1 LL chứa 3 TextView theo hàng dọc. – Phần bên trên lại chia thành 2 nữa theo hàng ngang  là một LL dạng ngang.  . sau đó chia đôi ra và phân tích tiếp. lại chia đôi: một bên là 1 ImageView (vì chỉ có 1 view nên ko cần bỏ vào trong LL).Giao diện với LinearLayout • Với LinearLayout (LL). – Nửa bên dưới ta thấy rõ ràng chứa 3 TextView kề nhau theo hàng ngang  cho vào 1 LL dạng ngang là xong. ta thấy cách phân tích như sau: – Nguyên tắc chủ yếu là phân nhóm các View liên tiếp kề nhau (như 3 TextView kề nhau theo hàng dọc hoặc hàng ngang trong ví dụ trên) vào trong một LL. các view bên trong nó được đặt kề nhau theo hàng ngang hoặc hàng dọc (cần lưu ý đặc điểm này) • Với ví dự vừa rồi. – Như vậy màn hình gồm 1 LL lớn bao bên ngoài. phân rã từ lớn đến nhỏ. nhìn thấy bên trong chia thanh 2 phần trên dưới rõ ràng vậy thuộc tính của LL này là dạng dọc.

Giao diện với LinearLayout • Xem cây: .

Thực hành tại chỗ • Làm một layout hiển thị như trong hình: • Các bước như sau: – Phân tích thành phần layout trên giấy (thảo luận) – Phân tích đặc điểm các view – Add thêm resource ảnh – Thử trước với với tab layout (khi view file xml trong eclipse) – Đưa vào thực thi trên máy. . đánh giá.

• RelativeLayout: các view được thiết kế dựa trên quan hệ giứa chúng với nhau và với layout chứa chúng. các view có thể đè lên nhau. nhưng ko khuyến khích với Android nhé. • AbsoluteLayout: dành cho bạn nào làm nhiều với C#.Một số loại layout khác • FrameLayout: các view bên trong được qui định vị trí bằng khoảng cách so với biên trái và trên so với layout. … .

bấm “android:” rồi đợi suggestion sổ ra xem. nhưng xong rồi thì nhớ xóa dữ liệu tạm đi. đừng dùng RelativeLayout • Nên chèn vào dữ liệu tạm để xem trước layout hiển thị ra sao bên tab layout (trong eclipse).Lưu ý khi thiết kế giao diện • Hạn chế độ sau của cây • Với các Layout phức tạp. . • FrameLayout có vấn đề với background • Muốn tìm thuộc tính gì.

html .android.Code nhanh một số ví dụ • Thử cùng nhau ngồi code nhanh nhé (khi đã hiểu rồi thì làm sẽ rất nhanh thôi) http://developer.android.com/resources/tutorials/vie ws/hello-webview.com/resources/tutorials/vie ws/hello-formstuff.html http://developer.

. Đặc biệt các ứng dụng cần lưu trữ và hiển thị nhiều dữ liệu.List • Rất hay dùng trong Android. • List là một danh sách các view thông thường có cùng dạng layout đặt liền nhau.

example.apis. – Mở thư mục project trong eclipse  src  mở com.view  mở file List1.android.6  samples  ApiDemos  OK  Finish.java .ApiDemos • Mở ứng dụng ApiDemos đã có sẵn: – New android project  Create project from existing source  Browse  mở thư mục SDK  platforms  android-1.

layout. • Adapter dùng để kết nối dữ liệu cần đưa vào list với layout hiển thị và cung cấp cho ListView hiển thị. setListAdapter(adapter). mStrings).List1 • Trong code của List1. truyền vào cho list hiển thị (dòng code bên dưới) . các bạn tách bạch phần tạo mới ArrayAdapter ra nhé ArrayAdapter adapter = new ArrayAdapter<String>(this. android.R.simple_list_item_1. • Sau khi tạo xong adapter.

ta phân tích ra: – this: context.List1 • Với đoạn tạo một adapter. dùng layout simple_list_item_1 để hiển thị mỗi item trong list.layout. dữ liệu đưa vào lấy từ mảng các chuỗi mStrings .R. ở đây chỉ có một TextView – mStrings: mảng các chuỗi kí tự. lúc nào làm view cũng cần rồi – android.simple_list_item_1: layout để hiển thị mỗi item trong list. là dữ liệu cần hiển thị • Giải thích đoạn tạo adapter như sau: tạo một adapter mới với context của activity hiện tại.

(tìm xem có cái constructor nào giúp chỉ chính xác đến cái TextView trong layout hay ko) Dạng này: ArrayAdapter(Context context. int textViewResourceId. copy code List1 bỏ qua. rồi làm thêm các thao tác sau: – Tạo 1 file layout có 1 TextView và 1 ImageView – Trong TextView thêm dòng này android:id=“@+id/text” – Sửa lại đoạn tạo mới adapter cho nó dùng cái layout vừa tạo. int resource.List1 • Tạo một project mới. T[] objects) – Chạy ứng dụng .

List1 • Giải thích: – Với code mẫu ban đầu.id.text) để adapter có thể hiểu bạn muốn dữ liệu của bạn được truyền vào view nào trong layout. – Với yêu cầu sau này. layout chỉ có một view duy nhất là TextView nên bạn ko cần khai báo gì khác ngoài layout và đưa dữ liệu dạng mảng String vào. bạn cần truyền thêm id của TextView vào (ở đây là R. adapter sẽ tự hiểu và xử lý. . layout của bạ có nhiều hơn 1 view.

List14 • Mở List14 ra. đọc và chạy thử. .

 .Với mục đích giúp cho các bạn không đến tham dự lớp vẫn có thể hiểu được bài giảng kỹ càng nên trong slide sẽ có nhiều đoạn chú thích hơi dài.

4:9 92 .7.04 30.

: .3992923K33.30.4/3..7.8.4:9 W 8-3.

90433..9.3 ..J/97H3 ..J/.: 3..33. 29-H32. .8.3-.773.: :H39.34.4 974329 53793 33 .:  .3. %09'03. 7.%09'03...933.7.4/3.4:9  .539J.:90433.3/.3 29/3 3.4.7.E.35397H3/.%09'09043 /.. 9 3.23K323-. 23 W '.39743.3/3 /.30..'0H3953.... 8.4.9J3.:533O2.O.03H34 .4-H334 3K39-H39743 . .: O.3 .K.9..9.4:9 W '30.7 9.E..3.9773.0-H397433O .49743 29-H3.539J..95 !3-H397H3.:9043 3.9:.0'0 .:9043/.-H3/..343  .4/33.E.

. .30.7.4/3.4:9 W 02.

E.39.997H32E  E3E .9353. W 229....4:9393.9.9743K3 W E.580 l.. .-.-.03 %97.. 2..4:997H3 94:3 !39J.%.4:9 .3.0102 97430.0 //9H27084:7.: !39J.49.8..

W 7. 97J -3 43 .. 3/74/ 3F .E. .3  .4:9/3 .E.: W #0.: . 84. 3.0-H3 9743 . .4 -3 34 2 3: .  3.3 4 :3 J. 97H3 84..4:9.E.4:9.9. . 6: 3 .0. .984.0 ..20. 99  /. .O 9 G H3 3.3 . .4:9 . .4:9E.3 W -84:90. 97H3 6:.4:9 .E.0. . -H3 97E . .

8.20.-./:92  W 7.3/74/ 7  8:0894387.. 8.95  3/3 #0..0.4:9 97430.4/3 W 3.O.G3.3 .: 99.9.9J3K -2 .-.4/:92 0297.4:95...4:9 397.4-H39..02 .74:3/ W :39K29:.E..:.34379K3O.4:9 W H3..4:9.580  3. W '.

33F   :79K28793.39 995.4/03.J/ W %.:3.3298.4/03.33.

.

3/74/ ./0.42.04507 .

08.7084:7.

9:947.8.

0 8..

04 147289:11 92 995.

.

3/74/ .42./0.04507 .

08.7084:7.

8.9:947.

.0 8.

0 92 .04 0-.

O..:97.E..E.: .3 .3./397433/74/ l.38E.89 W #9.-9.3 /3.4:9 933.3/3.0939.393:/: W 8929/.

42 0.0 210 89 .917420893 84:7.580 87.2. 2 .914728 .O83 0.3/74/   8. .2..58 .$ 5.905740.997430.3/74/ .50248 W 3/350248 .0 7480 29..9 70.2508 50248  38 9.3/74/5740.250 .5740.

5907 .5907/3  9 3 / : .4:93 9 .5907$973 98 ..4 .89 W %743 .5907  W /.4 89'0 3 9 W $. -3 9E.3 .4/0-H3 /./. -.59073077.4/0.4:9 8250*89*902* 2$9738  80989/. 53 94 2 77.E.5 . . 3F 77./. . .4 89 3 9 /3 .5907 ./..4 89.5907 7././.:  94 43 .3/74/ # .5907 97:3 . 89 .:3 ./. .

3/74/ # .E./.89 W ' 43 94 29 .9.5907 9../. 8.3 3 9 W  9J.4:9 8250*89*902*. 98. 53 9J. 7.93 9 /3 ..: 2$9738 .O 29 %09'0 2$973823 .3 7 .59073. 43 94 .43909 . .59072 . .0. . . . ..:94 29 .3 ./.4:98250*89*902*  3 9 2 9029743 89 / : .4:9  3 9 2 9029743 89   . 34 2 .43909.: J 9  / : .E.4  9 23 .

0'0 %743 %09'0 9H2 /3 3 .4 9E.3/74//  /.4:9. 9.O %09'0 .89 W %4 29 5740. 8. 2.92 .4/089- 6:.E.45.: %4 10.  7 2 9H2 .

98  3 /3 .4:9./.4:9 .E .J3 E.43909 39 7084:7.909 $.4 3O /3 .  43 94 2 .5907.. 94  9K2 02 .E %09'0 9743 . .0/ %(4-0.E .43897:.4  3 377./.O . 3 .0 39 909'0#084:7.5907 43909 .94734 5 .

-3 .4 .0/: 39  %09'0 3H3 -3 4 .4:9.4    # / 909   . 97:3 .4:9.4  . - .   ' H: . -E4 K E.4:9...3 .4/02: -.: 3 ./.034 9743 .59078 9 : . %09'0 .3 97:3 9H2 /.4:9 .5907..3 : . 34 .89 W  9J.0 -3 .O 29 ..: 8.O 3: .O 9 : -3 2:3 / : . / : /3 23 $973./. . ' .. .3  .

 ...89 W 897.9 .

.2/5.3./ . J.-3.'2.O3: 43.33H3 97438/08..4.5.O9 : .-3 3 39. 9J.E.

Sign up to vote on this title
UsefulNot useful