Projektowanie aplikacji mobilnych

3. Znajdź pliki projektu

W tej sekcji będziesz nadal badać Android Studio, zapoznając się ze strukturą pliku.

1. W Android Studio spójrz na zakładkę Project. Zakładka Projekt pokazuje pliki i foldery Twojego projektu. Kiedy konfigurowano swój projekt, nazwa pakietu to com.example.greetingcard. Możesz zobaczyć ten pakiet tutaj, w zakładce Projekt. Pakiet to w zasadzie folder, w którym znajduje się kod. Android Studio organizuje projekt w strukturze katalogowej składającej się z zestawu pakietów.
2. W razie potrzeby wybierz pozycję Android z rozwijanego menu w zakładce Projekt.

Jest to standardowy widok i organizacja plików, których używasz. Jest to przydatne podczas pisania kodu do projektu, ponieważ możesz łatwo uzyskać dostęp do plików, nad którymi będziesz pracować w aplikacji. Jeśli jednak spojrzysz na pliki w przeglądarce plików, takich jak Finder lub Eksplorator Windows, hierarchia plików jest zorganizowana bardzo różnie.

3. Wybierz pliki źródłowe projektu z rozwijanego menu. Możesz teraz przeglądać pliki w taki sam sposób, jak w dowolnej przeglądarce plików.

4. Wybierz Androida ponownie, aby przejść z powrotem do poprzedniego widoku. Do tego kursu korzystasz z widoku Androida. Jeśli Twoja struktura pliku kiedykolwiek wygląda dziwnie, sprawdź, czy nadal jesteś w Androidzie.

4. Zaktualizuj tekst

Teraz, gdy poznałeś Android Studio, nadszedł czas, aby zacząć robić swoją kartkę z życzeniami!

Spójrz na widok kodu MainActivity.kt- , - I Zauważ, że w tym kodzie są automatycznie generowane funkcje, w szczególności onCreate()I o. setContent()Funkcje.

classMainActivity:ComponentActivity(){
    overridefunonCreate(savedInstanceState:Bundle?){
        super.onCreate(savedInstanceState)
        setContent{
            GreetingCardTheme{
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier=Modifier.fillMaxSize(),
                    color=MaterialTheme.colorScheme.background
                ){
                    Greeting("Android")
                }
            }
        }
    }
}

W tym w poty, pot w tym, po tym, w, w, w, w pot- wt pot. w pot. w pot. w pot onCreate()Funkcja jest punktem wyjścia do tej aplikacji na Androida i wywołuje inne funkcje w celu zbudowania interfejsu użytkownika. W programach Kotlin, w programach main()Funkcja to punkt wejścia/punkt realizacji. W aplikacjach na Androida, onCreate()Funkcja wypełnia tę rolę.

W tym w poty, pot w tym, po tym, w, w, w, w pot- wt pot. w pot. w pot. w pot. w tym, po tym, a w pot w, w setContent()Funkcje w obrębie onCreate()Funkcja jest używana do definiowania układu poprzez funkcje komponujące. Wszystkie funkcje oznaczone @ComposableNiedozowanie można wywołać z setContent()Funkcja lub z innych funkcji Kompozytowych. Opatrzenie mówi kompilatorowi Kotlin, że ta funkcja jest używana przez Jetpack Compose do generowania interfejsu użytkownika.

Następnie spójrz na Greeting()Funkcja. W tym w poty, powtachnie powt (tj. w potytach po wt. w pot. w potytachach w pot Greeting()Funkcja jest funkcją kompatybilną, zw. @ComposablePodopatrzenie nad nim. Ta funkcja Kompozytowa pobiera pewne dane wejściowe i generuje to, co jest wyświetlane na ekranie.

@Composable
funGreeting(name:String,modifier:Modifier=Modifier){
    Text(
        text="Hello$name!",
        modifier=modifier
    )
}

Dowiedziałeś się już wcześniej o funkcjach (jeśli potrzebujesz odświeżenia, odwiedź CreateandusefunctionsinKotlin codelab), ale istnieje kilka różnic w stosunku do funkcji komponowania.

• 1. Dodajesz @ComposableNazwanie przed funkcją.
• 2. @ComposableNazwy funkcji są kapitalizowane.
• 3. @ComposableFunkcje nie mogą nic zwrócić.

@Composable
funGreeting(name:String,modifier:Modifier=Modifier){
    Text(
        text="Hello$name!",
        modifier=modifier
    )
}

W tej chwili Greeting()Funkcja przyjmuje nazwę i wyświetlacze Hello- To dla tej osoby.

1. Zaktualizuj Greeting()Funkcjonuj, aby przedstawić siebie zamiast powiedzieć "Cześć":

@Composable
funGreeting(name:String,modifier:Modifier=Modifier){
    Text(
        text="Hi,mynameis$name!",
        modifier=modifier
    )
}

2. Android powinien automatycznie aktualizować podgląd.

Wspaniale! Zmieniłeś tekst, ale wprowadza Cię jako Android, który prawdopodobnie nie jest twoim imieniem. Następnie spersonalizujesz go, aby przedstawić Ci swoje imię!

W tym w poty, pot w tym, po tym, w, w, w, w pot- wt pot. w pot. w pot. w pot. w tym, po tym, a w pot w GreetingPreview()Funkcja to fajna funkcja, która pozwala zobaczyć, jak wygląda Twoja komposowat bez konieczności budowania całej aplikacji. Aby umożliwić podgląd komponowania, adnotacja z @ComposableI @Preview.. W tym w poty, pot w tym, po tym, w, w, w, w pot- wt pot. w pot. w pot. w pot. w tym, po tym, a w pot w @PreviewPodopatrzenie informuje Android Studio, że ten kompozytorz powinien być wyświetlany w widoku projektu tego pliku.

Jak widzisz, @PreviewPodatek adnotacyjny przyjmuje parametr o nazwie showBackground.. Jeśli showBackgroundJest ustawiony na true, doda tło do Twojego zgodnego podglądu.

Ponieważ Android domyślnie używa lekkiego motywu dla edytora, może być trudno dostrzec różnicę między showBackground=trueI showBackground=false.. Jest to jednak przykład, jak wygląda różnica. Zauważ białe tło na obrazie ustawiony true..

3. Zaktualizuj GreetingPreview()Funkcjonuj z twoim imieniem. Następnie odbuduj i sprawdź swoją spersonalizowaną kartkę z życzeniami!

@Preview(showBackground=true)
@Composable
funGreetingPreview(){
    GreetingCardTheme{
        Greeting("Meghan")
    }
}

5. Zmień kolor tła

Teraz masz tekst wstępny, ale jest trochę nudny! W tej sekcji nauczysz się zmieniać kolor tła.

Aby ustawić inny kolor tła do wprowadzenia, musisz otoczyć tekst Surface.. A A SurfaceJest to pojemnik, który reprezentuje odcinek interfejsu użytkownika, w którym można zmienić wygląd, na przykład kolor tła lub granica.

1. Aby otoczyć tekst a Surface, podkreśl linię tekstu, naciśnij ( Alt+EnterDla systemu Windows lub Option+EnterNa Mac), a następnie wybierz Surround z widgetem.

2. Wybierz Surround z kontenerem.

Domyślnym kontenerem, który ci da, jest Box, ale możesz to zmienić na inny typ kontenera. Dowiesz się o BoxUkład później w trakcie kursu.

3. Usuń BoxI rodzaj Surface()Zamiast tego.

@Composable
funGreeting(name:String,modifier:Modifier=Modifier){
    Surface(){
        Text(
            text="Hi,mynameis$name!",
            modifier=modifier
        )
    }
}

4. Za SurfaceKontener dodaj colorParametr, ustaw go na Color..

@Composable
funGreeting(name:String,modifier:Modifier=Modifier){
    Surface(color=Color){
        Text(
            text="Hi,mynameis$name!",
            modifier=modifier
        )
    }
}

5. Kiedy piszesz ColorMożesz zauważyć, że jest czerwony, co oznacza, że Android Studio nie jest w stanie tego rozwiązać. Aby rozwiązać ten przewijanie do góry pliku, w którym jest napisane, importuj i naciśnij trzy przyciski.

6. Dodaj to oświadczenie do dolnej części listy przywozu.

importandroidx.compose.ui.graphics.Color

Pełna lista importu będzie wyglądać podobnie do tej.

importandroid.os.Bundle
importandroidx.activity.ComponentActivity
importandroidx.activity.compose.setContent
importandroidx.compose.foundation.layout.Box
importandroidx.compose.foundation.layout.fillMaxSize
importandroidx.compose.material3.MaterialTheme
importandroidx.compose.material3.Surface
importandroidx.compose.material3.Text
importandroidx.compose.runtime.Composable
importandroidx.compose.ui.Modifier
importandroidx.compose.ui.tooling.preview.Preview
importcom.example.greetingcard.ui.theme.GreetingCardTheme
importandroidx.compose.ui.graphics.Color

7. W Twoim kodzie najlepszą praktyką jest utrzymanie w wykazie wpisanym na listę alfabetycznie i usunięcie nieużywanego importu. Aby to zrobić, naciśnij przycisk Pomoc na górnym pasku narzędzi, wpisz w optymalizacji importu i kliknij Optimize Imports.

Możesz otworzyć Optimize Imports bezpośrednio z menu: Kod > Optymalizuj import. Korzystanie z opcji wyszukiwania Help pomoże Ci znaleźć element menu, jeśli nie pamiętasz, gdzie jest.

Pełna lista importu będzie wyglądać teraz tak:

importandroid.os.Bundle
importandroidx.activity.ComponentActivity
importandroidx.activity.compose.setContent
importandroidx.compose.foundation.layout.fillMaxSize
importandroidx.compose.material3.MaterialTheme
importandroidx.compose.material3.Surface
importandroidx.compose.material3.Text
importandroidx.compose.runtime.Composable
importandroidx.compose.ui.Modifier
importandroidx.compose.ui.graphics.Color
importandroidx.compose.ui.tooling.preview.Preview
importcom.example.greetingcard.ui.theme.GreetingCardTheme

8. Zauważ, że Kolor, który wpisałeś w nawiasach Surface, zmienił się z czerwonego na podkreślenie na czerwono. Aby to naprawić, dodaj okres po nim. Zobaczysz wyskakujące okienko pokazujące różne opcje kolorów.

Jest to jedna z fajnych funkcji w Android Studio, jest inteligentna i pomoże Ci, kiedy tylko może. W tym przypadku wie, że chcesz określić kolor, więc zasugeruje różne kolory.

9. Wybierz kolor dla swojej powierzchni. Ten codelab używa Cyan, ale możesz wybrać swój ulubiony!

@Composable
funGreeting(name:String,modifier:Modifier=Modifier){
   Surface(color=Color.Cyan){
       Text(
           text="Hi,mynameis$name!",
           modifier=modifier
       )
   }
}

10. Zwróć uwagę na zaktualizowany podgląd.

6. Dodaj dodatki

Teraz Twój tekst ma kolor tła, następnie dodasz trochę przestrzeni (padding) wokół tekstu.

A A ModifierJest używany do powiększania lub dekorowania komponowania. Jednym z modyfikatorów, którego możesz użyć, jest paddingModyfikator, który dodaje przestrzeń wokół elementu (w tym przypadku dodawanie przestrzeni wokół tekstu). Osiąga się to poprzez użycie Modifier.padding()Funkcja.

Każda komposowalna powinna mieć opcjonalny parametr typu Modifier.. To powinien być pierwszy opcjonalny parametr.

1. Dodaj wyściółkę do modifierW przypadku rozmiaru 24.dp..

@Composable
funGreeting(name:String,modifier:Modifier=Modifier){
    Surface(color=Color.Cyan){
        Text(
            text="Hi,mynameis$name!",
            modifier=modifier.padding(24.dp)
        )
    }
}

2. Dodaj ten przywóz do sekcji oświadczenia o przywozie.

Upewnij się, że używasz Optimize Imports, aby alfabetyzować nowy import.

importandroidx.compose.ui.unit.dp
importandroidx.compose.foundation.layout.padding

Gratulacje - zbudowałeś swoją pierwszą aplikację na Androida w Compose! To dość ogromne osiągnięcie. Poświęć trochę czasu, aby pobawić się różnymi kolorami i tekstem, zrobić to własne!

7. Przejrzyj kod rozwiązania

Code snip do recenzji

packagecom.example.greetingcard

importandroid.os.Bundle
importandroidx.activity.ComponentActivity
importandroidx.activity.compose.setContent
importandroidx.compose.foundation.layout.fillMaxSize
importandroidx.compose.foundation.layout.padding
importandroidx.compose.material3.MaterialTheme
importandroidx.compose.material3.Surface
importandroidx.compose.material3.Text
importandroidx.compose.runtime.Composable
importandroidx.compose.ui.Modifier
importandroidx.compose.ui.graphics.Color
importandroidx.compose.ui.tooling.preview.Preview
importandroidx.compose.ui.unit.dp
importcom.example.greetingcard.ui.theme.GreetingCardTheme

classMainActivity:ComponentActivity(){
    overridefunonCreate(savedInstanceState:Bundle?){
        super.onCreate(savedInstanceState)
        setContent{
            GreetingCardTheme{
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier=Modifier.fillMaxSize(),
                    color=MaterialTheme.colorScheme.background
                ){
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
funGreeting(name:String,modifier:Modifier=Modifier){
    Surface(color=Color.Cyan){
        Text(
            text="Hi,mynameis$name!",
            modifier=modifier.padding(24.dp)
        )
    }
}

@Preview(showBackground=true)
@Composable
funGreetingPreview(){
    GreetingCardTheme{
        Greeting("Meghan")
    }
}


8. Wniosek

Dowiedziałeś się o Android Studio i zbudowałeś swoją pierwszą aplikację na Androida z Compose, świetną pracą!

Ten codelab jest częścią kursu Android Basics with Compose. Aby dowiedzieć się, jak uruchomić aplikację na emulatorze lub urządzeniu fizycznym, sprawdź kolejne płyty kodowe w tej ścieżce.

Podsumowanie

• Aby utworzyć nowy projekt: Otwórz Android Studio, kliknij przycisk Nowy projekt > Puste działanie > Następne, wprowadź nazwę swojego projektu, a następnie skonfiguruj jego ustawienia.
• Aby zobaczyć, jak wygląda Twoja aplikacja, użyj panelu Podgląd.
• Funkcje Kompozytowe są jak regularne funkcje z kilkoma różnicami: nazwy funkcji są kapitalizowane, dodajesz @Composableadnotacja przed pełnieniem funkcji, @ComposableFunkcje nie mogą nic zwrócić.
• A A ModifierJest używany do powiększania lub dekorowania swojego komposable.