Được trang bị những tính năng độc đáo, AI Agent có thể giúp bạn biến tầm nhìn về giao diện người dùng của ứng dụng Android thành hiện thực, bằng cách sử dụng Jetpack Compose và tuân theo các phương pháp hay nhất của Android. Trang này mô tả cách tạo và lặp lại giao diện người dùng ứng dụng bằng AI.
Để tạo giao diện người dùng bằng AI, hãy làm theo các bước chung sau:
Tạo bản mô phỏng giao diện người dùng của ứng dụng mà bạn muốn. Bạn có thể xuất tệp PNG từ một công cụ thiết kế hoặc thậm chí sử dụng hình ảnh vẽ tay.
Hình 1: Khung hình của giao diện người dùng ứng dụng. Đính kèm hình ảnh vào câu hỏi của bạn bằng cách nhấp vào nút Đính kèm tệp hình ảnh
. Bạn cũng có thể nhấp vào Tạo mã từ ảnh chụp màn hình ngay trên bảng Xem trước trong một tệp không có bản xem trước hiện tại.
Hình 2: Tạo mã từ ảnh chụp màn hình trong một bảng điều khiển Xem trước trống. Trong trường trò chuyện, hãy yêu cầu tác nhân AI tạo mã giao diện người dùng, ví dụ: "Tạo mã Jetpack Compose cho hình ảnh được cung cấp". Khi bạn gửi câu hỏi và hình ảnh, tác nhân AI sẽ đề xuất mã để tạo giao diện người dùng được đề xuất. Tác nhân AI thường cung cấp mã cho Bản xem trước Compose, vì vậy, bạn có thể nhanh chóng hình dung giao diện người dùng sau khi nhập giao diện đó vào dự án của mình. Nếu không, hãy yêu cầu tác nhân tạo bản xem trước Compose.
Hình 2: Gemini tạo mã Jetpack Compose từ một hình ảnh được đính kèm. Sau khi nhập mã và có thể xem bản xem trước Compose trong bảng xem trước, bạn có thể lặp lại giao diện người dùng bằng cách nhấp trực tiếp vào bản xem trước và yêu cầu Gemini chuyển đổi giao diện người dùng đó. Nếu có hình ảnh về nội dung bạn muốn, bạn cũng có thể lặp lại trên giao diện người dùng bằng cách nhấp chuột phải vào bản xem trước rồi chọn Thao tác AI > So khớp giao diện người dùng với hình ảnh mục tiêu.
Hình 5: Sử dụng Gemini để chuyển đổi các phần tử giao diện người dùng ngay trong bản xem trước Compose.
Hình 6: Ví dụ về cách sử dụng "Match UI to Target Image" (So khớp giao diện người dùng với hình ảnh mục tiêu)
Tìm và khắc phục các vấn đề về chất lượng giao diện người dùng
Tác nhân AI cũng có thể giúp bạn đảm bảo giao diện người dùng có chất lượng cao và dễ sử dụng. Nhấp chuột phải vào bản xem trước Compose rồi chọn AI Actions (Hành động của AI) > Fix all UI check issues (Khắc phục tất cả vấn đề kiểm tra giao diện người dùng). Tác nhân sẽ kiểm tra giao diện người dùng của bạn để tìm các vấn đề thường gặp, chẳng hạn như vấn đề về khả năng hỗ trợ tiếp cận, đồng thời đề xuất các bản sửa lỗi mã để giải quyết những vấn đề đó.