Generowanie interfejsu z załącznikami w postaci obrazów

Agent AI jest wyjątkowo dobrze przygotowany, aby pomóc Ci zrealizować Twoją wizję interfejsu aplikacji na Androida. Wykorzystuje Jetpack Compose i najlepsze praktyki dotyczące Androida. Na tej stronie dowiesz się, jak tworzyć i ulepszać interfejs aplikacji za pomocą AI.

Aby wygenerować interfejs za pomocą AI, wykonaj te ogólne czynności:

  1. Utwórz makietę interfejsu aplikacji. Możesz wyeksportować plik PNG z narzędzia do projektowania lub nawet użyć odręcznego rysunku.

    Ręcznie narysowany szkielet interfejsu aplikacji
    Rysunek 1. Szkic interfejsu aplikacji.
  2. Dołącz obraz do zapytania, klikając przycisk Dołącz plik obrazu Ikona załączania pliku obrazu. Możesz też kliknąć Wygeneruj kod na podstawie zrzutu ekranu bezpośrednio w panelu Podgląd w pliku bez istniejącego podglądu.

    Rysunek 2. Generowanie kodu na podstawie zrzutu ekranu w pustym panelu podglądu.
  3. W polu czatu poproś agenta AI o wygenerowanie kodu interfejsu, np. „Wygeneruj kod Jetpack Compose dla podanego obrazu”. Gdy prześlesz zapytanie i obraz, agent AI zaproponuje kod do utworzenia proponowanego interfejsu. Agent AI zwykle udostępnia też kod do podglądu Compose, dzięki czemu możesz szybko zobaczyć interfejs po zaimportowaniu go do projektu. Jeśli tak się nie stanie, poproś go o wygenerowanie podglądów Compose.

    Interfejs Gemini Chat z wygenerowanym kodem Jetpack Compose na podstawie obrazu.
    Rysunek 2. Gemini generuje kod Jetpack Compose na podstawie dołączonego obrazu.
  4. Gdy zaimportujesz kod i zobaczysz podgląd Compose w panelu podglądu , możesz ulepszyć interfejs, klikając bezpośrednio podgląd i prosząc Gemini o jego przekształcenie. Jeśli masz obraz tego, co chcesz uzyskać, możesz też ulepszyć interfejs, klikając prawym przyciskiem myszy podgląd i wybierając Działania AI > Dopasuj interfejs do obrazu docelowego.

    Android Studio z podglądem Compose z wybranym elementem interfejsu i czatem Gemini.
    Rysunek 5. Używanie Gemini do przekształcania elementów interfejsu bezpośrednio z podglądu Compose.
    Rysunek 6. Przykład użycia opcji „Dopasuj interfejs do obrazu docelowego”.

Znajdowanie i naprawianie problemów z jakością interfejsu

Agent AI może też pomóc Ci zadbać o wysoką jakość i dostępność interfejsu. Kliknij prawym przyciskiem myszy podgląd Compose i wybierz Działania AI > Napraw wszystkie problemy z kontrolą interfejsu. Agent sprawdzi interfejs pod kątem typowych problemów, takich jak problemy z dostępnością, i zaproponuje poprawki kodu, które je rozwiążą.

Rysunek 7. Naprawianie problemów z interfejsem za pomocą AI.
Rysunek 8. Przykład interfejsu po zastosowaniu poprawek.