Bài giảng Lập trình Android: Bố cục giao diện - ThS.Bùi Trung Úy

Bài giảng Lập trình Android: Bố cục giao diện cung cấp cho người học những kiến thức như: Các cách tạo giao diện; Bố cục giao diện (layout); Một số các view cơ bản (tt). Mời các bạn cùng tham khảo!

Bố cục giao diện (Layout) ThS.Bùi Trung Úy Giao diện Android  Android tổ chức giao diện thành View ViewGroup lồng vào tạo thành giao diện RelativeLayout LinearLayout (vertical) TextView EditText TextView EditText LinearLayout (horizontal) Button 10/2/2019 Lập trình di động Android Button Nội dung học    Các cách tạo giao diện Bố cục giao diện (layout) Một số view (tt) 10/2/2019 Lập trình di động Android Các cách tạo giao diện    Tạo giao diện mã nguồn (Java) Tạo giao diện XML Tạo giao diện công cụ trực quan (kéo-thả) 10/2/2019 Lập trình di động Android Tạo giao diện mã nguồn    Mỗi phần tử (View/ViewGroup) giao diện, thuộc lớp Java Android SDK Việc tạo view giao diện tạo thể (instance) lớp View tương ứng  ViewGroup hiển thị đến người dùng nhờ phương thức setContentView()  Các View khác thêm đến ViewGroup gốc nhờ phương thức addView() Như vậy, ta viết code để tạo giao diện thay đỗi thuộc tính vị trí View giao diện 10/2/2019 Lập trình di động Android Tạo giao diện mã nguồn 10/2/2019 Lập trình di động Android Tạo giao diện XML    XML gì? XML (Extensible Markup Language - ngơn ngữ đánh dấu mở rộng) file dạng văn (text) dùng để đặc tả lưu liệu  Các giá trị liệu lưu thành phần tử (node)  Mỗi phần tử bắt đầu thẻ (tag) mở kết thúc thẻ đóng Android dùng cú pháp XML để đặc tả giao diện sau gắn vào Activity Sử dụng XML để mô tả giao diện cách thông dụng lập trình Android (kết hợp với giao diện kéo-thả) 10/2/2019 Lập trình di động Android Tạo giao diện XML 10/2/2019 Lập trình di động Android Tạo giao diện trực quan kéo-thả 10/2/2019 Lập trình di động Android Tạo giao diện trực quan kéo-thả  Các vị trí kéo-thả view  Điểm neo (anchor points): nút hình trịn cạnh view, dùng để tạo ràng buộc cho view  Điểm resize: nút hình vng góc view, dùng để thay đỗi kích thước view 10/2/2019 Lập trình di động Android 10 Thực hành  Tạo giao diện ứng dụng với nút nhấn hình ảnh Khi click vào nút nhấn hiển thị hình ảnh city 10/2/2019 Lập trình di động Android 58 CheckBox    Dạng nút nhấn có trạng thái checked unchecked Các phương thức thường dùng:  chk.isChecked()  chk.setChecked() Ví dụ: 10/2/2019 Lập trình di động Android 59 CheckBox 10/2/2019 Lập trình di động Android 60 CheckBox 10/2/2019 Lập trình di động Android 61 RadioButton - RadioGroup    Nhóm nút cho phép chọn lựa chọn Phương thức thương dùng:  int id = rdGroup.getCheckedRadioButtonId()  rdButon.isChecked() Ví dụ: 10/2/2019 Lập trình di động Android 62 RadioButton - RadioGroup 10/2/2019 Lập trình di động Android 63 Thực hành  Tạo giao diện ứng dụng đơn hàng café, nhấn nút „Pay‟ hiển thị thông tin người dùng chọn 10/2/2019 Lập trình di động Android 64 Thực hành  Thiết kế giao diện kê khai thông tin cá nhân, nhấn nút „Gửi thông tin‟ hiển thị thông tin kê khai Activity khác 10/2/2019 Lập trình di động Android 65 SeekBar  SeekBar điều khiển dùng để kéo chọn giá trị cần gạt Người dùng chạm vào cần gạt kéo sang trái phải để thiết lập giá trị  Thêm SeekBar vào giao diện: 10/2/2019 Lập trình di động Android 66 SeekBar   Tham chiếu code:  SeekBar seekBar1 = (SeekBar) findViewById(R.id.seekBar1); Các phương thức:  getMax() - Trả giá trị lớn SeekBar  getProgress() – Trả giá trị tiến trình  setMax(int max);  setProgress(int progress) 10/2/2019 Lập trình di động Android 67 SeekBar – Sự kiện 10/2/2019 Lập trình di động Android 68 Thực hành – Game settings  Tạo giao diện cho hình thiết lập Game, nút „Save‟ hiển thị giá trị chọn 10/2/2019 Lập trình di động Android 69 Thực hành – Order Food  Thiết kế tạo ứng dụng đặt hàng qua mạng 10/2/2019 Lập trình di động Android 70 Thực hành – Music Player  Thiết kế tạo ứng dụng nghe nhạc! 10/2/2019 Lập trình di động Android 71 Q&A  Cám ơn bạn lắng nghe! 10/2/2019 Lập trình di động Android 72 ... 10/2/2019 Lập trình di động Android Button Nội dung học    Các cách tạo giao diện Bố cục giao diện (layout) Một số view (tt) 10/2/2019 Lập trình di động Android Các cách tạo giao diện    Tạo giao. .. để đặc tả giao diện sau gắn vào Activity Sử dụng XML để mô tả giao diện cách thông dụng lập trình Android (kết hợp với giao diện kéo-thả) 10/2/2019 Lập trình di động Android Tạo giao diện XML... viết code để tạo giao diện thay đỗi thuộc tính vị trí View giao diện 10/2/2019 Lập trình di động Android Tạo giao diện mã nguồn 10/2/2019 Lập trình di động Android Tạo giao diện XML    XML