​

Buổi 05 — Thực hành: Khung Điều Hướng GreenShop

Kết thúc buổi: app có 4 tab hoạt động, chuyển màn hình mượt, nút quay lại đúng, giữ được vị trí cuộn.

​

Lab 5.1 — Vẽ sơ đồ màn hình trên giấy (15 phút)

• Vẽ 4 ô tab: Trang chủ, Danh mục, Giỏ hàng, Tài khoản
• Vẽ mũi tên: từ Trang chủ → Chi tiết sản phẩm
• Vẽ mũi tên: từ Danh mục → Danh sách theo danh mục
• Ghi chú chỗ nào có nút quay lại

​

Lab 5.2 — Dựng khung 4 tab

[BỐI CẢNH] App GreenShop, dựng khung điều hướng chính.
[YÊU CẦU]  Thêm thanh 4 tab dưới đáy màn hình:
           Trang chủ, Danh mục, Giỏ hàng, Tài khoản
[CHI TIẾT] - Mỗi tab có icon và tên
           - Tab đang chọn được tô màu xanh lá đậm
           - Trang chủ dùng màn hình đã làm ở buổi 4
           - 3 tab kia tạm để màn hình trống có tiêu đề
           - Chuyển tab KHÔNG được mất vị trí đang cuộn
[GIỚI HẠN] Chỉ dựng khung tab, nội dung chi tiết làm sau.

​

Lab 5.3 — Nối Trang chủ vào Chi tiết sản phẩm

Từ Trang chủ, khi bấm vào một sản phẩm bất kỳ → mở trang Chi tiết sản phẩm
(tạm hiện tên + ảnh + giá của đúng sản phẩm đó), có nút quay lại. Bấm quay
lại phải về Trang chủ ở đúng vị trí đã cuộn trước đó.

​

Lab 5.4 — Làm tab Danh mục

Tab Danh mục: hiện danh sách các nhóm rau củ (Rau ăn lá, Củ quả, Trái cây...).
Bấm một nhóm → mở danh sách sản phẩm thuộc nhóm đó, có nút quay lại.

​

Lab 5.5 — Thêm ngăn kéo (drawer) cho mục phụ

Thêm ngăn kéo trượt từ cạnh trái (mở bằng icon 3 gạch góc trái trên),
chứa các mục: Giới thiệu cửa hàng, Chính sách giao hàng, Liên hệ.
Mỗi mục tạm mở một màn hình trống có tiêu đề.

​

Lab 5.6 — Kiểm thử điều hướng theo checklist QA

• Bấm từng tab: đúng màn hình, tab đúng được tô đậm
• Vào chi tiết sản phẩm → quay lại → về đúng vị trí cuộn cũ
• Nút back vật lý Android hoạt động đúng
• Mở chi tiết sản phẩm A rồi B: hiển thị đúng từng sản phẩm
• Drawer mở/đóng mượt, các mục bấm được

​

Lab 5.7 — Lưu mốc

Lưu mốc với ghi chú: "Xong khung điều hướng 4 tab + drawer".

​

Checklist hoàn thành

• Có sơ đồ màn hình vẽ tay
• 4 tab hoạt động, giữ vị trí cuộn
• Nối được Trang chủ → Chi tiết sản phẩm đúng món
• Tab Danh mục lọc theo nhóm
• Drawer hoạt động
• Đã lưu mốc Git

App của bạn giờ đã có “bộ xương” hoàn chỉnh — di chuyển được khắp nơi. Các buổi sau chỉ việc thêm “thịt” vào từng phòng!