1 / 22

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

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 .

hea
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Thiếtkếgiaodiệntrên Android MultiUni TrầnVũTấtBình

  2. Tổngquan • Trong Android, dùng Activity đểhiểnthịmànhình. • Mỗi activity sẽchứacác View theodạngcấutrúccây, nghĩalàmột Layout gốcchứacác view/layout con bêntronghoặcchỉcó 1 view duynhất. (lưu ý Layout cũnglàmột view nhé) • Cóthểthiếtkếgiaodiệntrong code java hoặctrong file xml trongthưmục layout.

  3. Tree view

  4. Layout mẫucủahelloworld <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.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>

  5. Mộtsốthuộctínhcơbản • Layout_width, layout_height: chiềurộngcủa view (fill_parentlà to bằngkíchthướccủa layout chứa view này, wrap_contentlàvừađủnội dung cầnhiểnthịcủa view) • Orientation: vớiLinearLayout, việcsắpxếpcác view lànằmkềnhautheohàngnganghoặchàngdọc, takhaibáo orientation đểchọnsắptheokiểunào (horizontal/vertical)

  6. Mộtsốthuộctínhcơbản • Gravity: thuộctínhnày qui địnhcác view nằmbêntrong layout sẽđặttheovịtrínào so với layout(trungtâm, trái , phải, trêndưới…) • Weight: đểcác view phanchiatỉlệdiệntíchhiểnthịtrênmànhình (tỉlệtínhtheo weight củatừng view trêntổngsố weight, các view kokhaibáo weight thìsẽxem qua width và height)

  7. Vídụcơbản • Cácbạnvào link nàylấy code chovàoứngdụng, lưu ý đọcthêmcácdònggiảithíchtiếngAnhnhéhttp://developer.android.com/resources/tutorials/views/hello-linearlayout.html

  8. GiaodiệnvớiLinearLayout • Giảsửbạncầnthiếtkếmộtmànhìnhnhưsau:

  9. GiaodiệnvớiLinearLayout • VớiLinearLayout (LL), các view bêntrongnóđượcđặtkềnhautheohàngnganghoặchàngdọc (cầnlưu ý đặcđiểmnày) • Vớivídựvừarồi, tathấycáchphântíchnhưsau: • Nguyêntắcchủyếulàphânnhómcác View liêntiếpkềnhau (như 3 TextViewkềnhautheohàngdọchoặchàngngangtrongvídụtrên) vàotrongmột LL, phânrãtừlớnđếnnhỏ. • Nhưvậymànhìnhgồm 1 LL lớnbaobênngoài, nhìnthấybêntrongchiathanh 2 phầntrêndướirõràngvậythuộctínhcủa LL nàylàdạngdọc, sauđóchiađôiravàphântíchtiếp. • Phầnbêntrênlạichiathành 2 nữatheohàngngang làmột LL dạngngang, lạichiađôi:mộtbênlà 1 ImageView (vìchỉcó 1 view nênkocầnbỏvàotrong LL), mộtbênlạilà 1 LL chứa 3 TextViewtheohàngdọc. • Nửabêndướitathấyrõràngchứa 3 TextViewkềnhautheohàngngang  chovào 1 LL dạngnganglàxong. 

  10. GiaodiệnvớiLinearLayout • Xemcây:

  11. Thựchànhtạichỗ • Làmmột layout hiểnthịnhưtronghình: • Cácbướcnhưsau: • Phântíchthànhphần layout trêngiấy (thảoluận) • Phântíchđặcđiểmcác view • Add thêm resource ảnh • Thửtrướcvớivới tab layout (khi view file xml trong eclipse) • Đưavàothựcthitrênmáy, đánhgiá.

  12. Mộtsốloại layout khác • FrameLayout: các view bêntrongđược qui địnhvịtríbằngkhoảngcách so vớibiêntráivàtrên so với layout, các view cóthểđèlênnhau. • RelativeLayout: các view đượcthiếtkếdựatrênquanhệgiứachúngvớinhauvàvới layout chứachúng. • AbsoluteLayout: dànhchobạnnàolàmnhiềuvới C#, nhưngkokhuyếnkhíchvới Android nhé. …

  13. Lưu ý khithiếtkếgiaodiện • Hạnchếđộsaucủacây • Vớicác Layout phứctạp, đừngdùngRelativeLayout • Nênchènvàodữliệutạmđểxemtrước layout hiểnthịrasaobên tab layout (trong eclipse), nhưngxongrồithìnhớxóadữliệutạmđi. • FrameLayoutcóvấnđềvới background • Muốntìmthuộctínhgì, bấm “android:” rồiđợi suggestion sổraxem.

  14. Code nhanhmộtsốvídụ • Thửcùngnhaungồi code nhanhnhé (khiđãhiểurồithìlàmsẽrấtnhanhthôi) http://developer.android.com/resources/tutorials/views/hello-formstuff.html http://developer.android.com/resources/tutorials/views/hello-webview.html

  15. List • Rất hay dùngtrong Android. Đặcbiệtcácứngdụngcầnlưutrữvàhiểnthịnhiềudữliệu. • List làmộtdanhsáchcác view thôngthườngcócùngdạng layout đặtliềnnhau.

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

  17. List1 • Trong code của List1, cácbạntáchbạchphầntạomớiArrayAdapterranhé ArrayAdapter adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, mStrings); setListAdapter(adapter); • Adapter dùngđểkếtnốidữliệucầnđưavào list với layout hiểnthịvàcungcấpchoListViewhiểnthị. • Saukhitạoxong adapter, truyềnvàocho list hiểnthị (dòng code bêndưới)

  18. List1 • Vớiđoạntạomột adapter, taphântíchra: • this: context, lúcnàolàm view cũngcầnrồi • android.R.layout.simple_list_item_1: layout đểhiểnthịmỗi item trong list, ở đâychỉcómộtTextView • mStrings: mảngcácchuỗikítự, làdữliệucầnhiểnthị • Giảithíchđoạntạo adapter nhưsau: tạomột adapter mớivới context của activity hiệntại, dùng layout simple_list_item_1đểhiểnthịmỗi item trong list, dữliệuđưavàolấytừmảngcácchuỗimStrings

  19. List1 • Tạomột project mới, copy code List1 bỏ qua, rồilàmthêmcácthaotácsau: • Tạo 1 file layout có 1 TextViewvà 1 ImageView • TrongTextViewthêmdòngnày android:id=“@+id/text” • Sửalạiđoạntạomới adapter chonódùngcái layout vừatạo. (tìmxemcócái constructor nàogiúpchỉchínhxácđếncáiTextViewtrong layout hay ko) Dạngnày: ArrayAdapter(Context context, intresource, inttextViewResourceId, T[] objects) • Chạyứngdụng

  20. List1 • Giảithích: • Với code mẫu ban đầu, layout chỉcómột view duynhấtlàTextViewnênbạnkocầnkhaibáogìkhácngoài layout vàđưadữliệudạngmảng String vào, adapter sẽtựhiểuvàxửlý. • Vớiyêucầusaunày, layout củabạcónhiềuhơn 1 view, bạncầntruyềnthêm id củaTextViewvào (ở đâylàR.id.text) để adapter cóthểhiểubạnmuốndữliệucủabạnđượctruyềnvào view nàotrong layout.

  21. List14 • Mở List14 ra, đọcvàchạythử.

  22. Vớimụcđíchgiúpchocácbạnkhôngđếnthamdựlớpvẫncóthểhiểuđượcbàigiảngkỹcàngnêntrong slide sẽcónhiềuđoạnchúthíchhơidài.

More Related