Programowanie iteracyjne

Jako deweloper aplikacji mobilnych często tworzysz interfejs aplikacji krok po kroku, a nie wszystko naraz. Android Studio wykorzystuje to podejście w przypadku Jetpack Compose, udostępniając narzędzia, które nie wymagają pełnej kompilacji do sprawdzania i modyfikowania wartości oraz weryfikowania ostatecznego wyniku.

Iteracja interfejsu wspomagana przez AI

W Android Studio możesz używać agenta AI do iteracyjnego ulepszania i przekształcania interfejsu Compose bezpośrednio w podglądzie projektu. Kliknij prawym przyciskiem myszy podgląd kompozycji i wybierz jedną z tych działań AI:

  • Dopasuj interfejs do obrazu docelowego: wybierz, aby przesłać makietę projektu referencyjnego. Następnie agent proponuje zmiany w kodzie, aby wdrożenie jak najdokładniej odpowiadało projektowi.
Rysunek 1. Zaktualizuj interfejs, aby pasował do obrazu docelowego.
  • Przekształcanie interfejsu: używaj promptów w języku naturalnym (np. „zmień kolor przycisku na niebieski”), aby opisać konkretne modyfikacje, które chcesz wprowadzić w interfejsie.
Rysunek 2. Poproś agenta o przekształcenie interfejsu.

Edycja na żywo

Edycja na żywo to funkcja, która umożliwia aktualizowanie funkcji kompozycyjnych na emulatorach i urządzeniach fizycznych w czasie rzeczywistym. Ta funkcja minimalizuje przełączanie kontekstu między pisaniem a tworzeniem aplikacji, dzięki czemu możesz dłużej skupiać się na pisaniu kodu bez przerw.

Edycja na żywo ma 3 tryby:

  • Ręcznie: zmiany w kodzie są stosowane, gdy zostaną ręcznie przesłane za pomocą kombinacji klawiszy Ctrl+' (Command+' na macOS).
  • Ręczne zapisywanie: zmiany w kodzie są stosowane, gdy zostaną ręcznie zapisane za pomocą skrótu Ctrl+S (Command+S w systemie macOS).
  • Automatycznie: zmiany są stosowane na urządzeniu lub emulatorze po zaktualizowaniu funkcji typu „composable”.

Edycja na żywo koncentruje się na zmianach w kodzie związanych z interfejsem i UX. Edycja na żywo nie obsługuje zmian takich jak aktualizacje sygnatury metody, dodawanie nowych metod czy zmiany hierarchii klas. Więcej informacji znajdziesz na liście ograniczeń funkcji edycji na żywo.

Ta funkcja nie zastępuje tworzenia i uruchamiania aplikacji ani stosowania zmian. Został on zaprojektowany tak, aby optymalizować przepływ pracy podczas tworzenia, wdrażania i ulepszania interfejsu Compose.

Zalecany proces wygląda tak:

  1. Skonfiguruj aplikację, aby można było ją uruchomić.
  2. Korzystaj z funkcji Edycja na żywo tak często, jak to możliwe, dopóki nie będziesz musieć wprowadzić zmiany, której nie obsługuje, np. dodania nowych metod podczas działania aplikacji.
  3. Po wprowadzeniu nieobsługiwanej zmiany kliknij Uruchom Uruchom
ikonę, aby ponownie uruchomić aplikację i wznowić edycję na żywo.

Pierwsze kroki z funkcją Edycja na żywo

Aby rozpocząć, wykonaj te czynności: utwórz pustą aktywność Compose, włącz Edycję na żywo w projekcie i wprowadź zmiany za pomocą Edycji na żywo.

Konfigurowanie nowego projektu

  1. Zanim zaczniesz, upewnij się, że masz zainstalowaną wersję Android Studio Giraffe lub nowszą oraz że poziom API na urządzeniu fizycznym lub emulatorze wynosi co najmniej 30.

  2. Otwórz Android Studio i w oknie Witamy w Android Studio kliknij Nowy projekt. Jeśli masz już otwarty projekt, możesz utworzyć nowy, klikając Plik > Nowy > Nowy projekt.

  3. Wybierz szablon Empty Compose Activity (Pusta aktywność tworzenia) dla Phone and Tablet (Telefon i tablet), a następnie kliknij Next (Dalej).

    Wybór szablonu w Android Studio
    Rysunek 3. Szablony do wyboru. W przypadku edycji na żywo wybierz Empty Compose Activity.
  4. W oknie Nowy projekt podaj wymagane informacje: nazwę, nazwę pakietu, lokalizację zapisu, minimalny pakiet SDK i język konfiguracji kompilacji.

    Przykładowe ustawienia projektu z kroku 4 wprowadzone w Android Studio
    Rysunek 4. Przykładowe ustawienia projektu.
  5. Kliknij Zakończ.

Włączanie edycji na żywo

  1. Aby włączyć edycję na żywo, otwórz ustawienia.

    • W systemie Windows lub Linux kliknij Plik > Ustawienia > Edytor > Edycja na żywo.
    • Na macOS otwórz Android Studio > Ustawienia > Edytor > Edycja na żywo.
  2. Wybierz opcję Edycja na żywo i tryb, który chcesz uruchomić, w ustawieniach.

    W trybie ręcznym zmiany w kodzie są przesyłane za każdym razem, gdy naciśniesz Ctrl+' (Cmd+' w systemie macOS). W trybie ręcznym zmiany kodu są zapisywane za każdym razem, gdy ręcznie zapiszesz zmiany, używając skrótu Ctrl+S (Command+S w systemie macOS). W trybie automatycznym zmiany kodu są stosowane na urządzeniu lub emulatorze w miarę ich wprowadzania.

    Interfejs pola wyboru Edycja na żywo w ustawieniach Android Studio
    Rysunek 5. Ustawienia edycji na żywo.
  3. W edytorze otwórz plik MainActivity, który jest punktem wejścia do aplikacji.

  4. Aby wdrożyć aplikację, kliknij Uruchom Przycisk interfejsu.

  5. Po włączeniu funkcji Edycja na żywo w prawym górnym rogu okna narzędzia Uruchomione urządzenia pojawi się zielona ikona potwierdzenia Aktualne:

    Interfejs edycji na żywo z zielonym znacznikiem wyboru

Wprowadzanie i sprawdzanie zmian

Gdy w edytorze wprowadzisz obsługiwane zmiany, wirtualne lub fizyczne urządzenie testowe automatycznie się zaktualizuje.

Na przykład zmień istniejącą metodę GreetingMainActivity na tę:

@Composable
fun Greeting(name: String) {
    Text(
        text = "Hello $name!",
        Modifier
            .padding(80.dp) // Outer padding; outside background
            .background(color = Color.Cyan) // Solid element background color
            .padding(16.dp) // Inner padding; inside background, around text)
    )
}

Zmiany pojawią się natychmiast na urządzeniu testowym, jak pokazano na rysunku 6.

Zmiany w metodzie powitania zastosowane na urządzeniu
Rysunek 6. Urządzenie testowe wyświetlające zmiany wprowadzone w ramach funkcji Edycja na żywo w metodzie Greeting.

Rozwiązywanie problemów z edycją na żywo

Jeśli nie widzisz zmian na urządzeniu testowym, być może Android Studio nie zaktualizowało zmian. Sprawdź, czy wskaźnik Edycji na żywo ma stan Out Of Date (Nieaktualny), jak pokazano na rysunku 7. Oznacza to błąd kompilacji. Aby uzyskać informacje o błędzie i sugestie dotyczące jego rozwiązania, kliknij wskaźnik.

Ikona nieaktualnej edycji na żywo
Rysunek 7. Wskaźnik stanu Edycji na żywo.

Ograniczenia edycji na żywo

Poniżej znajdziesz listę aktualnych ograniczeń.

  • [Dotyczy tylko Androida Studio Giraffe i nowszych wersji] Edycja na żywo wymaga Compose Runtime w wersji 1.3.0 lub nowszej. Jeśli Twój projekt korzysta z niższej wersji Compose, funkcja Edycja na żywo jest wyłączona.

  • [Dotyczy tylko Androida Studio Giraffe i nowszych wersji] Edycja na żywo wymaga wtyczki Androida do obsługi Gradle w wersji 8.1.0-alpha05 lub nowszej. Jeśli Twój projekt korzysta z niższej wersji AGP, funkcja Edycja na żywo jest wyłączona.

  • Edycja na żywo wymaga urządzenia fizycznego lub emulatora z interfejsem API na poziomie 30 lub wyższym.

  • Edycja na żywo umożliwia tylko edytowanie treści funkcji, co oznacza, że nie możesz zmieniać nazwy ani sygnatury funkcji, dodawać ani usuwać funkcji ani zmieniać pól innych niż funkcje.

  • Edycja na żywo resetuje stan aplikacji, gdy po raz pierwszy zmienisz funkcję Compose w pliku. Dzieje się to tylko po pierwszej zmianie kodu – stan aplikacji nie jest resetowany przez kolejne zmiany kodu wprowadzane w funkcjach Compose w tym pliku.

  • Klasy zmodyfikowane za pomocą funkcji Live Edit mogą wiązać się z pewnym spadkiem wydajności. Uruchom aplikację i użyj czystej kompilacji do publikacji, jeśli oceniasz jej wydajność.

  • Aby debuger działał w przypadku klas zmodyfikowanych za pomocą funkcji Edycja na żywo, musisz przeprowadzić pełne uruchomienie.

  • Podczas edytowania uruchomionej aplikacji za pomocą funkcji Edycja na żywo może ona ulec awarii. W takiej sytuacji możesz ponownie wdrożyć aplikację, klikając przycisk Uruchom UI
button.

  • Edycja na żywo nie wykonuje żadnych manipulacji kodem bajtowym zdefiniowanych w pliku kompilacji projektu, np. manipulacji kodem bajtowym, które byłyby stosowane podczas kompilowania projektu za pomocą opcji w menu Kompilacja lub po kliknięciu przycisków Kompilacja lub Uruchom.

  • Funkcje niekomponowalne są aktualizowane na żywo na urządzeniu lub emulatorze i wywoływane jest pełne ponowne komponowanie. Pełna rekompozycja może nie wywołać zaktualizowanej funkcji. W przypadku funkcji, które nie są funkcjami kompozycyjnymi, musisz wywołać nowo zaktualizowane funkcje lub ponownie uruchomić aplikację.

  • Edycja na żywo nie jest wznawiana po ponownym uruchomieniu aplikacji. Musisz ponownie uruchomić aplikację.

  • Edycja na żywo obsługuje tylko procesy z możliwością debugowania.

  • Edycja na żywo nie obsługuje projektów, które używają wartości niestandardowych dla moduleName w sekcji kotlinOptions w konfiguracji kompilacji.

  • Edycja na żywo nie działa w przypadku wdrożeń wielokrotnych. Oznacza to, że nie możesz wdrożyć aplikacji na jednym urządzeniu, a potem na innym. Edycja na żywo jest aktywna tylko na ostatnim zestawie urządzeń, na których wdrożono aplikację.

  • Edycja na żywo działa w przypadku wdrożeń na wielu urządzeniach (wdrożeń na wielu urządzeniach utworzonych za pomocą opcji Wybierz wiele urządzeń w menu docelowego urządzenia). Nie jest to jednak oficjalnie obsługiwane i mogą wystąpić problemy. Jeśli napotkasz problemy, zgłoś je.

  • Zastosuj zmiany/Zastosuj zmiany w kodzie nie są zgodne z funkcją edycji na żywo i wymagają ponownego uruchomienia aplikacji.

  • Edycja na żywo nie obsługuje obecnie projektów Androida Automotive.

Najczęstsze pytania dotyczące funkcji Edycja na żywo

  • Jaki jest obecny stan funkcji Edycja na żywo?

    Edycja na żywo jest dostępna w Android Studio Giraffe. Aby włączyć tę funkcję, otwórz kolejno Plik > Ustawienia > Edytor > Edycja na żywo (Android Studio > Ustawienia > Edytor > Edycja na żywo w systemie macOS).

  • Kiedy należy używać edycji na żywo?

    Użyj opcji Edycja na żywo, gdy chcesz szybko sprawdzić, jak aktualizacje elementów UX (takie jak modyfikatory i animacje) wpływają na ogólne wrażenia użytkowników aplikacji.

  • Kiedy należy unikać korzystania z funkcji edycji na żywo?

    Edycja na żywo koncentruje się na zmianach w kodzie związanych z interfejsem i UX. Nie obsługuje zmian takich jak aktualizacje sygnatury metody, dodawanie nowych metod czy zmiany w hierarchii klas. Więcej informacji znajdziesz w sekcji Ograniczenia funkcji Edycja na żywo.

  • Kiedy należy używać podglądu Compose?

    Podglądu Compose używaj podczas tworzenia poszczególnych funkcji kompozycyjnych. Podgląd wyświetla elementy Compose i automatycznie odświeża się, aby pokazać efekt zmian w kodzie. Podgląd umożliwia też wyświetlanie elementów interfejsu w różnych konfiguracjach i stanach, takich jak ciemny motyw, ustawienia regionalne i skala czcionki.

Iteracyjne tworzenie kodu za pomocą Compose

Edycja na żywo i szybkie przeładowywanie w Compose Multiplatform to funkcje, które mogą zaoszczędzić Ci czas i zwiększyć produktywność podczas tworzenia aplikacji za pomocą Compose. Służą jednak różnym typom rozwoju:

  • Edycja na żywo obsługuje iteracyjne tworzenie aplikacji na Androida za pomocą Jetpack Compose. Umożliwia aktualizowanie funkcji kompozycyjnych na emulatorach i urządzeniach fizycznych w czasie rzeczywistym. Ta funkcja minimalizuje przełączanie kontekstu między pisaniem a tworzeniem aplikacji, dzięki czemu możesz dłużej skupiać się na pisaniu kodu bez przerw.

  • Szybkie przeładowanie w Compose spełnia to samo zadanie, ale obsługuje aplikacje na komputery tworzone za pomocą Compose Multiplatform. Umożliwia wprowadzanie zmian w kodzie interfejsu aplikacji Compose Multiplatform i wyświetlanie wyników w czasie rzeczywistym dzięki inteligentnemu ponownemu wczytywaniu kodu po każdej zmianie.

Chociaż te 2 funkcje korzystają z wielu technologii w ramach silnika Compose i obsługują wiele podobnych przypadków użycia, nie mają takich samych możliwości, ponieważ dotyczą różnych typów tworzenia aplikacji w Compose.

Jeśli tworzysz aplikację na Androida, użyj funkcji Edycja na żywo, aby przyspieszyć proces programowania. Jeśli tworzysz aplikację na komputery za pomocą Compose Multiplatform, użyj funkcji Compose Hot Reload.

Edycja na żywo literałów (wycofana)

Android Studio może w czasie rzeczywistym aktualizować niektóre stałe literały używane w funkcjach kompozycyjnych w podglądach, emulatorze i na urządzeniu fizycznym. Oto niektóre z obsługiwanych typów:

  • Int
  • String
  • Color
  • Dp
  • Boolean

Film przedstawiający użytkownika zmieniającego literały w kodzie źródłowym, a podgląd aktualizowany dynamicznie

Stałe literały, które wywołują aktualizacje w czasie rzeczywistym bez etapu kompilacji, możesz wyświetlić, włączając dekoracje literałów za pomocą wskaźnika interfejsu Edycja na żywo literałów:

Włączanie edycji na żywo literałów

Apply Changes

Zastosuj zmiany umożliwia aktualizowanie kodu i zasobów bez konieczności ponownego wdrażania aplikacji na emulatorze lub urządzeniu fizycznym (z pewnymi ograniczeniami).

Za każdym razem, gdy dodasz, zmodyfikujesz lub usuniesz funkcje kompozycyjne, możesz zaktualizować aplikację bez konieczności ponownego wdrażania, klikając przycisk Zastosuj zmiany w kodzie:

Użytkownik klika przycisk „Zastosuj zmiany”.