CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG
4.3. Giao diện chương trình
Hình 4.3.1. Giao diện chính ứng dụng Checklists
Đây là giao diện chính của ứng dụng Checklists khi ứng dụng mới khởi động. Trên màn hình ứng dụng sẽ không có các mục và cũng không có danh sách công việc nào do ứng dụng mới khởi chạy chưa thêm bất cứ dữ liệu nào.
Trên thanh điều hướng có một tiêu đề Title ở giữa là Checklists và một Button hình dấu cộng + biểu thị nút này thực hiện hành động thêm mới một mục công việc.
Hình 4.3.2 Giao thêm mục công việc của ứng dụng
Từ giao diện chính của ứng dụng bên trên, ta chạm vào button hình dấu cộng + trên thanh điều hướng, ứng dụng sẽ chuyển sang screen này. Trên screen này sẽ có một textField để người dùng nhập tên của mục lớn cho danh sách công việc nhỏ có liên quan bên trong.
Trên thanh điều hướng có hai button, một button là Cancel để người dùng hủy việc thêm mục công việc, một button còn lại là Done để lưu lại tên mục công việc. Ngoài hai button trên thì thanh điều hướng còn tiêu đề ở giữa là Add Checklist giúp người dùng hiểu hơn về chức năng của screen này.
Hình 4.3.3. Giao diện chọn icon cho mục công việc
Ngoài ra ngay bên dưới texField có một lựa chọn để người dùng chọn Icon thích hợp cho mục công việc hiện tại. Ở đây có một số icon đã được thiết kế sẵn cho các mục công việc để giúp cho các mục trông trực quan, dễ nhìn, dễ hiểu hơn.
Hình 4.3.4. Giao diện sau khi thêm mục công việc
Đây là giao diện chính của ứng dụng sau khi thêm một mục công việc, nếu như bạn đã chọn một icon trước đó trong screen Add Checklist thì sẽ có icon bên trái tên của mục công việc, nếu bạn chưa chọn thì phần này sẽ hiển thị trong suốt, không có icon nào cả.
Ở phía bên phải của mục công việc có biểu tượng màu xanh, khi bấm vào biểu tượng này thì ứng dụng sẽ được chuyển đến một screen để chỉnh sửa lại tên và icon của ứng dụng.
Hình 4.3.5. Giao diện chỉnh sửa mục công việc
Ở phía bên phải của mục công việc của màn hình chính ứng dụng có biểu tượng màu xanh, khi bấm vào biểu tượng này thì ứng dụng sẽ được chuyển đến một screen để chỉnh sửa lại tên và icon của ứng dụng.
Ở screen này phần textField và chọn Icon vẫn giữa nguyên như ở Add screen nhưng ở phần title của navigation bar đã có sự thay đổi, thay vì Add Checklist như trước thì giờ đã thay đổi thành Edit Checklist.
Hình 4.3.5 Giao diện trong mục công việc
Sau khi thêm một mục công việc ở màn hình chính, ta tiến hành chạm vào mục công việc này thì ứng dụng sẽ chuyển đến một screen khác. Đây chính là screen bên trong mục công việc để ta có thể thêm các danh sách công việc nhỏ có liên quan với mục lớn ở screen trên trong mục này.
Ở screen này danh sách công việc vẫn còn trống. Trên thanh navigation bar có title ở giữa chính là tiêu đề của mục công việc chính ở screen ngoài cùng. Phía bên phải ngoài cùng là một button hình dấu cộng dùng đê thêm một công việc vào bên trong mục và phía trái ngoài cùng có chữ
checklists dùng để quay trở về screen chính.
Hình 4.3.6 Giao diện thêm công việc trong mục
Đây chính là giao diện thêm một công việc nhỏ trong mục công việc của screen ngoài cùng. Trên screen này sẽ có một textField để nhập tên công việc, một Switch có tên Remind Me để thiết lập on hoặc off việc nhắc nhở thông báo và cuối cùng là object
Due Date dùng để chọn thời gian ngày giờ nhắc nhở công việc.
Hình 4.3.7. Giao diện sau khi thêm công việc
Bên trái chính là giao diện ứng dụng sau khi đã thêm một công việc trong mục công việc chính. Tương tự như screen ở ngoài cùng, công việc sau khi đã thêm sẽ có
một biểu tượng màu xanh, khi ta chạm vào biểu tượng này thì ứng dụng sẽ chuyển sang một screen khác dùng để chỉnh sửa lại mục công việc đã tạo.
Bên phải chính là màn hình chỉnh sửa lại mục công việc, trên thanh navigation bar ở giữa là tiêu đề Edit Item biểu thị screen này dùng để chỉnh sửa lại công việc đã thêm.
Ta có thể chỉnh sửa tên công việc, hẹn lịch thời gian giờ ngày tháng.
Hình 4.3.8 Giao diện sau khi thêm công việc
Đây là giao diện ứng dụng sau khi thêm một số công việc trong mục công việc. Bên trái là screen các công việc trong mục công việc Sinh Nhat, trong công việc Sinh nhat Nam có một dấu tích bên trái dùng để đánh dấu các công việc đã hoàn thành, còn những công việc không có đánh dấu tức là chưa hoàn thành.
Screen bên phải là mục công việc ở screen ngoài cùng, do bên trong của mục công việc có 2 đối tượng công việc nhỏ mà có một công việc chưa được đánh dấu tích nên ở screen ngoài cùng dưới
tên mục công việc Sinh Nhat sẽ có dòng chữ 1 Remaining để nhắc nhở người dùng là trong mục này vẫn còn một công việc chưa hoàn thành.
Thông báo của ứng dụng sau khi đặt lịch hẹn
Đây chính là màn hình của thiết bị sau khi thiết lập thông báo Due Date trong ứng dụng Checklists. Sau khi thiết lập đặt lịch hẹn thời gian trong ứng dụng thì khi đến giờ ứng dụng sẽ gửi một thông báo lên notificenter của thiết bị như hình ảnh trên.
KẾT LUẬN