Đang tải... (xem toàn văn)
Tài liệu lập trình android, lập trình android cơ bản, Phần 2 Giao diện người dùng tài liêu cần thiết để lập trình android, tài liệu đầy đủ để bạn có thể viết được ứng dụng android, Tài liệu lập trình android, lập trình android cơ bản, Phần 2 Giao diện người dùng tài liêu cần thiết để lập trình android, tài liệu đầy đủ để bạn có thể viết được ứng dụng android,
Phát triển ứng dụng Smartphone Tài liệu lưu hành nội Đây tài liệu tham khảo sử dụng mơn học Lập trình ứng dụng Smartphone – Android tổng hợp, biên soạn từ nhiều nguồn thành viên Nhóm nghiên cứu ứng dụng cơng nghệ A106-Đại học Hoa Sen Nhóm A106-http://profiles.hoasen.edu.vn/groups/584/ Phát triển ứng dụng Smartphone – Android Phát triển ứng dụng Smartphone Phần 02: Giao diện người dùng Lê Đức Huy Email: leduchuy89vn@gmail.com Phát triển ứng dụng Smartphone – Android Mục lục ViewGroup 1.1 1.2 AbsoluteLayout 12 1.3 TableLayout 14 1.4 RelativeLayout 16 1.5 FrameLayout 19 1.6 LinearLayout ScrollView 21 View 24 2.1 Basic Views 24 2.1.1 ProgressBar View 35 2.1.2 AutoComplete TextView 42 2.2 PickerView 46 2.2.1 TimePicker 46 2.2.2 DatePicker 50 2.2.3 List Views 54 2.2.4 Spinner View 57 2.3 Display Views 62 2.3.1 Gallery and ImageView 62 2.3.2 ImageSwitcher 69 2.3.3 GridView 74 2.4 Menus 77 2.5 Additional View 87 2.5.1 AnalogClock DigitalClock 87 2.5.2 WebView 89 Phát triển ứng dụng Smartphone – Android Tại thời điểm này, bạn thấy thành phần ứng dụng android Activity Activity thành phần t i qu n trọng củ bất k ứng dụng ndroid Thuật ng ctivity ch việc mà người d ng c thể th c ứng dụng ndroid Do gần ctivity tương t c v i người d ng nên l p ctivity đảm nhận việc tạo r cử sổ window để người lập trình đ t lên đ giao diện người dùng phương thức setContentView(View) Ta xem Activity cửa sổ ứng dụng Một ctivity c thể m ng nhiều dạng kh c nh u cử sổ toàn hình (full screen window), cử sổ flo ting v i windowsIsFlo ting h y nằm lồng bên ctivity kh c v i ActivityGroup) Cửa sổ ứng dụng mà Activity tạo chứa widgets button, l ble, text boxex Thông thường, để xây d ng giao diện người dùng ta sử dụng file xml forder res/l yout để định nghĩ c c đ i tượng đồ họa mu n thể lên giao diện người dùng v i thuộc tính tương ứng định cách thức thể đ i tượng đồ họ đ cửa sổ ứng dụng Dư i ví dụ file xml định nghĩ c c đ i tượng đồ họa thể giao diện người dùng ứng dụng: Khi chương trình th c thi, giao diện đồ họ nạp từ file xml phương thức onCreate() cách sử dụng phương thức setContentView() Activity để ch định file xml mong mu n Ví dụ: @Override publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } Khi mã code củ chương trình biên dịch, phần tử file xml biên dịch thành nh ng đ i tượng đồ họ tương ứng v i thuộc tính cung cấp kèm theo phần tử thẻ xml ndroid s u đ tạo thể củ c c đ i tượng đồ họ người dùng cung cấp cho ctivity n nạp Việc xây d ng giao diện người dùng cách sử dụng file xml đơn giản, nhiên t n nhiều thời gian nhà lập trình cần phải xây d ng giao diện đồ họ người dùng linh Phát triển ứng dụng Smartphone – Android hoạt lúc th c thi (Ví dụ: Khi xây d ng game) Tuy nhiên nhà phát triển ứng dụng xây d ng giao diện đồ họ người dùng cách sử dụng câu lệnh Views and ViewGroups Một Activity c c đ i tượng View c c đ i tượng ViewGroup Một đ i tượng View đ i tượng đồ hoạ dùng hiển thị nội dung lên hình Ví dụ: Button, l blel, text boxes … Một View dẫn suất từ class: android.view.View.Một ho c nhiều View nhóm lại bên ViewGroup Một ViewGroup cung cấp khả cho phép b trí c c đ i tượng đồ hoạ chứa cách phù hợp Có thể sử dụng c c ViewGroup để b trị c c đ i tượng đồ hoạ theo dòng, theo cột, theo dạng bảng hay theo s ch định toạ độ cụ thể Mỗi ViewGroup dẫn xuất từ class android.view.ViewGroup Android hỗ trợ ViewGroup s u LinearLayout AbsoluteLayout TableLayout RelativeLayout FrameLayout ScrollView Dư i chuỗi học nói rõ loại ViewGroup cách chi tiết Chú ý rằng, th c hành dư i thường xuyên lồng loại ViewGroup v i nh u để xây d ng giao diện người dùng ViewGroup Tạo Project đơn giản Trong hư ng dẫn này, tạo project android v i thông s s u Project name: UIExample Build target: Android 2.3.3 Application name: UI Example Package name: android.uiexample Create Activity: main Phát triển ứng dụng Smartphone – Android 1.1 LinearLayout LinearLayout loại ViewGroup cho phép xếp c c đ i tượng View (chứa nó) cột đơn h y hàng đơn Để thấy cách LinearLauout làm việc nào, bổ sung vào file main.xml forder l yout s u Trong file main.xml này, ta quan sát thấy phần tử g c có chứa thành phần Phần tử đ x c định cách hiển thị đ i tượng View chứa thơng qua thuộc tính View ViewGroup có tập thuộc tính hay sử dụng liệt kê qua bảng sau: Thuộc tính Đặc tả layout_width X c định chiều rộng View ho c ViewGroup layout_height X c định chiều cao View ho c ViewGroup layout_marginTop X c định phần mở rộng phía bên View ho c ViewGroup layout_marginBottom X c định phần mở rộng phí bên dư i View ho c ViewGroup layout_marginLeft X c định phần mở rộng phía bên trái View ho c ViewGroup layout_marginRight X c định phần mở rộng phía bên phải View ho c ViewGroup layout_gravity X c định c ch đ t c c đ i tượng View layout_weight X c định phần kích thư c thể View ho c ViewGroup (Sử dụng v i thuộc tính layout_width ho c l yout_height gán giá trị “fill_parent” “wrap_content” ho c giá trị c định: 100px) layout_x X c định toạ độ x the View ho c ViewGroup layout_y X c định toạ độ y the View ho c ViewGroup Phát triển ứng dụng Smartphone – Android Chú ý vài thuộc tính ch sử dụng View định nghĩ rõ ràng ViewGroup cụ thể Ví dụ: - Hai thuộc tính layout_weight layout_gravity ch sử dụng View nằm LinearLayout ho c TableLayout Xem xét phần code xml sau: - Phần tử TextView có chiều rộng v i chiều rộng phần tử cha (fill_parent- Trong trường hợp v i chiều rộng hình) Chiều cao trường hợp này, bạn khai báo wrap_content chiều cao chiều cao cần thiết mà nội dụng TextView dùng để hiển thị đoạn text Còn trường hợp dư i đây, chiều rộng TextView đ t 105 pixels Khi phần code giao diện nạp lên Activity giao diện s u: Phát triển ứng dụng Smartphone – Android M c định LinearLayout xếp c c đ i tượng đồ hoạ (View) theo chiều ngang, bạn mu n th y đổi thành chiều dọc bạn sửa phần code phần tử g c LinearLayout lại s u Phát triển ứng dụng Smartphone – Android Bằng c ch th y đổi thuộc tính android:orientation=“vertical” t th y đổi cách LinearLayout xếp c c đ i tượng đồ hoạ bên Thuộc tính android:orientation gán hai giá trị tương ứng sau: - vertical D ng để x c định c c đ i tượng đồ hoạ chứa LinearLayout xếp theo chiều dọc - horizontal D ng để x c định c c đ i tượng đồ hoạ chứa LinearLayout xếp theo chiều ngang Giá trị thuộc tính kích thư c đ i tượng đồ hoạ ndroid phân thành hai loại: - Giá trị c định X c định cụ thể giá trị kích thư c Ví dụ: 150px) - Giá trị linh hoạt Giá trị phụ thuộc vào hai yếu t : o Nội dung mà đ i tượng đồ hoạ mu n thị.V i View nội dung đoạn text,… V i ViewGroup phần tử mà chứa Phát triển ứng dụng Smartphone – Android o Phần không gi n mà đ i tượng cha cịn tr ng Trong LinearLayout bạn áp dụng thuộc tính layout_weight layout_gravity sau: Hình sau hiển thị Button gán vào bên phải phần tử cha củ n Trong trường hơp LinearLayout) sử dụng thuộc tính layout_gravity, sử dụng thuộc tính layout_weight cho Button, EditText (tổng giá trị layout_weight 1) Sau nạp phần giao diện vào Activity ta giao diện s u Phát triển ứng dụng Smartphone – Android Để thấy rỏ cách thức sử dụng menu Android, ta tiến hành thêm file menu.xml thư mục res/layout v i nội dung s u 79 Phát triển ứng dụng Smartphone – Android Bổ sung file AndroidManifest.xml v i nội dung s u Tiến hành tạo m i file MenuExampleActivity.java tạo 02 phương thức hỗ trợ createMenu menuChoice v i nội dung s u: package android.uiexample; import android.app.Activity; import android.os.Bundle; import android.view.Menu; 80 Phát triển ứng dụng Smartphone – Android import import import import android.view.MenuItem; android.view.View.OnCreateContextMenuListener; android.widget.Button; android.widget.Toast; publicclass MenuExampleActivity extends Activity implements OnCreateContextMenuListener{ @Override publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.menu); } privatevoidcreateMenu(Menu menu) { menu.setQwertyMode(true); MenuItem mnu1 = menu.add(0, 0, 0, "Item { mnu1.setAlphabeticShortcut('a'); mnu1.setIcon(R.drawable.icon); } MenuItem mnu2 = menu.add(0, 1, 1, "Item { mnu2.setAlphabeticShortcut('b'); mnu2.setIcon(R.drawable.icon); } MenuItem mnu3 = menu.add(0, 2, 2, "Item { mnu3.setAlphabeticShortcut('c'); mnu3.setIcon(R.drawable.icon); } MenuItem mnu4 = menu.add(0, 3, 3, "Item { mnu4.setAlphabeticShortcut('d'); } menu.add(0, 3, 3, "Item 5"); menu.add(0, 3, 3, "Item 6"); menu.add(0, 3, 3, "Item 7"); } 1"); 2"); 3"); 4"); privatebooleanmenuChoice(MenuItem item) { 81 Phát triển ứng dụng Smartphone – Android switch (item.getItemId()) { case 0: Toast.makeText(this, "You clicked Toast.LENGTH_LONG).show(); returntrue; case 1: Toast.makeText(this, "You clicked Toast.LENGTH_LONG).show(); returntrue; case 2: Toast.makeText(this, "You clicked Toast.LENGTH_LONG).show(); returntrue; case 3: Toast.makeText(this, "You clicked Toast.LENGTH_LONG).show(); returntrue; case 4: Toast.makeText(this, "You clicked Toast.LENGTH_LONG).show(); returntrue; case 5: Toast.makeText(this, "You clicked Toast.LENGTH_LONG).show(); returntrue; case 6: Toast.makeText(this, "You clicked Toast.LENGTH_LONG).show(); returntrue; } returnfalse; } on Item 1", on Item 2", on Item 3", on Item 4", on Item 5", on Item 6", on Item 7", } Phương thức createMenu() tác dụng tạo danh sách menu item Phương thức publicMenuItemadd(int groupId, int itemId, int order, CharSequence title)sẽ thêm menu item menu v i thông s x c định thuộc tính menu item thêm vào Phương thức public MenuItemsetAlphabeticShortcut(char alphaChar)sẽ gán phím tắt bàn phím để mở nhanh menu item Phương thức public MenuItemsetIcon(int iconRes)sẽ gán hình ảnh dùng làm biểu tưởng cho menu item m i thêm vào Tiếp theo thêm hai file hìnhreminder.png warning.pngtrong thư mục res/drawable sau: 82 Phát triển ứng dụng Smartphone – Android 2.4.1.1 Option menu Để thịOption menu Activity, ta cần orverride h i phương thức onCre teOptionsMenu onOptionsItemSelected Phương thức onCreateOptionsMenu() gọi người dùng nhấn lên phím Menu thiết bị Tại phương thức ta gọi phương thức cre teMenu t kh i b o để khởi tạo menu cho Option menu Phương thức onOptionsItemSelected() gọi người dùng nhấn chọn menu item Option menu Tại phương thức ta tiến hành gọi phương thức menuChoice t định nghĩ để xử lý s kiện người dùng nhấn chọn menu item Th y đổi file MenuExampleActivity.java v i nội dung s u package android.uiexample; import import import import import import import android.app.Activity; android.os.Bundle; android.view.Menu; android.view.MenuItem; android.view.View.OnCreateContextMenuListener; android.widget.Button; android.widget.Toast; publicclass MenuExampleActivity extends Activity implements OnCreateContextMenuListener{ @Override publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.menu); } privatevoid createMenu(Menu menu) { // Xem mục } privateboolean menuChoice(MenuItem item) 83 Phát triển ứng dụng Smartphone – Android { // Xem mục } @Override publicboolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); createMenu(menu); returntrue; } @Override publicboolean onOptionsItemSelected(MenuItem item) { return menuChoice(item); } } Th c thi chương trình, nhấn nút Menu thiết bị để nhận kết s u 84 Phát triển ứng dụng Smartphone – Android 2.4.1.2 Context menu Nếu mu n gắn Menu lên đ i tượng View ta cần gọi phương thức setOnCreateContextMenuListener()để g n đ i tượng nhận nhiệm vụ tạo ContextMenu Th y đổi file MenuExampleActivity v i nội dung s u package android.uiexample; import import import import import import import import android.app.Activity; android.os.Bundle; android.view.ContextMenu; android.view.ContextMenu.ContextMenuInfo; android.view.Menu; android.view.MenuItem; android.view.View; android.view.View.OnCreateContextMenuListener; 85 Phát triển ứng dụng Smartphone – Android import android.widget.Button; import android.widget.Toast; publicclass MenuExampleActivity extends Activity implements OnCreateContextMenuListener{ @Override publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.menu); Button btn = (Button) findViewById(R.id.btn1); btn.setOnCreateContextMenuListener(this); } privatevoidcreateMenu(Menu menu) { // Xem phần } privateboolean menuChoice(MenuItem item) { // Xem phần } @Override publicvoid onCreateContextMenu(ContextMenu menu, View view, ContextMenuInfo menuInfo) { super.onCreateContextMenu(menu, view, menuInfo); createMenu(menu); } @Override publicboolean onContextItemSelected(MenuItem item) { return menuChoice(item); } } Th c thi chương trình để nhận kết s u 86 Phát triển ứng dụng Smartphone – Android 2.5 Additional View 2.5.1 AnalogClock DigitalClock Th y đổi file main.xml v i nội dung s u Th y đổi nội dung file main.java v i nội dung s u package android.uiexample; import android.app.Activity; import android.os.Bundle; publicclass main extends Activity { /** Called when the activity is first created */ @Override publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } } Th c thi chương trình để nhận kết s u 88 Phát triển ứng dụng Smartphone – Android 2.5.2 WebView WebView loại View cho phép hiển thị nội dung HTML giao diện ứng dụng Để tìm hiểu cách hoạt động WebView ta tiến hành thêm file webview xml vào thư mục res/layout v i nội dung s u Thêm file WebViewExampleActivity j v thư mục src/android/uiexample v i nội dung s u package android.uiexample; import android.app.Activity; import android.os.Bundle; import android.webkit.WebView; publicclass WebViewExampleActivity extends Activity{ /** Called when the activity is first created */ @Override publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.webview); WebView wv = (WebView) findViewById(R.id.webview1); wv.loadUrl("http://www.hoasen.edu.vn"); } } Đăng kí m i Activity file AndroidManifest.xml gán quyền truy cập Internet cho ứng dụng: 90 Phát triển ứng dụng Smartphone – Android Th y đổi nội dung file main.java để bật Activity WebViewExampleActivity: package android.uiexample; import android.app.Activity; import android.content.Intent; import android.os.Bundle; publicclass main extends Activity { /** Called when the activity is first created */ @Override publicvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Intent intent = new WebViewExampleActivity.class); startActivity(intent); } Intent(this, } Th c thi chương trình để nhận kết s u 91 Phát triển ứng dụng Smartphone – Android Ngoài cách hiển thị nội dung HTML lấy từ internet t c thể hiển thị nội dung HTML cách tạo chuổi có nội dung s u: WebView wv = (WebView) findViewById(R.id.webview1); final String mimeType = "text/html"; final String encoding = "UTF-8"; String html = "Đây trang web đơn giản" + "Bạn tạo nội dung HTML cách này
"; Và nạp lên WebView s u wv.loadDataWithBaseURL("", html, mimeType, encoding, ""); Hơn n t c thể soạn file HTML tên Index.html để thư mục assets project Android v i nội dung s u Đây file HTML đơn giản 92 Phát triển ứng dụng Smartphone – AndroidChào mừng bạn đến với giới Android
nạp lên WebView: WebView wv = (WebView) findViewById(R.id.webview1); wv.loadUrl("file:///android_asset/Index.html"); 93 ... 24 2. 1.1 ProgressBar View 35 2. 1 .2 AutoComplete TextView 42 2 .2 PickerView 46 2. 2.1 TimePicker 46 2. 2 .2 DatePicker 50 2. 2.3 List... xây d ng giao diện người dùng cách sử dụng file xml đơn giản, nhiên t n nhiều thời gian nhà lập trình cần phải xây d ng giao diện đồ họ người dùng linh Phát triển ứng dụng Smartphone – Android. .. 54 2. 2.4 Spinner View 57 2. 3 Display Views 62 2.3.1 Gallery and ImageView 62 2.3 .2 ImageSwitcher 69 2. 3.3 GridView 74 2. 4 Menus