Android Kotlin Fundamentals 02.1: układ liniowy w Edytorze układu

Ten moduł Codelab jest częścią kursu Android Kotlin Fundamentals. Najwięcej korzyści przyniesie Ci ukończenie wszystkich ćwiczeń w kolejności. Wszystkie ćwiczenia z tego kursu znajdziesz na stronie docelowej kursu Android Kotlin Fundamentals.

Co warto wiedzieć

  • Tworzenie podstawowej aplikacji na Androida w Kotlinie.
  • uruchamianie aplikacji na Androida w emulatorze lub na urządzeniu;
  • Podstawowe informacje o LinearLayout.
  • Utwórz prostą aplikację, która korzysta z LinearLayout i TextView.

Czego się nauczysz

  • Jak pracować z View i ViewGroup.
  • Jak rozmieszczać widoki w Activity za pomocą LinearLayout.
  • Jak używać elementu ScrollView do wyświetlania treści, które można przewijać.
  • Jak zmienić widoczność View.
  • Jak tworzyć i używać zasobów w postaci ciągów znaków i wymiarów.
  • Jak utworzyć układ liniowy za pomocą edytora układu w Android Studio.

Jakie zadania wykonasz

  • Utwórz aplikację AboutMe.
  • Dodaj TextView do układu, aby wyświetlić swoje imię i nazwisko.
  • Dodaj ImageView.
  • Dodaj ScrollView, aby wyświetlić tekst, który można przewijać.

W aplikacji AboutMe możesz zaprezentować ciekawe fakty o sobie lub dostosować ją do znajomego, członka rodziny lub zwierzaka. Aplikacja wyświetla nazwę, przycisk GOTOWE, obraz gwiazdy i tekst, który można przewijać.

W tym zadaniu utworzysz projekt AboutMe w Android Studio.

  1. Otwórz Android Studio, jeśli nie jest jeszcze otwarte.
  2. Jeśli projekt jest już otwarty w Android Studio, wybierz Plik > Nowy > Nowy projekt.


  3. Jeśli projekt nie jest jeszcze otwarty, w oknie Witamy w Android Studio kliknij + Rozpocznij nowy projekt w Android Studio.


  4. W oknie Create New Project (Utwórz nowy projekt) na karcie Phone and Tablet (Telefony i tablety) wybierz szablon Empty Activity (Puste działanie). Kliknij Dalej.


  5. W następnym oknie Utwórz nowy projekt ustaw te parametry i kliknij Zakończ.

Atrybut

Wartość

Nazwa aplikacji

AboutMe

Nazwa firmy Android

com.android.example.AboutMe (lub własną domenę)

Zapisz lokalizację

Pozostaw domyślną lokalizację lub zmień ją na preferowany katalog.

Język

Kotlin

Minimalny poziom interfejsu API

API 19: Android 4.4 (KitKat)

Ten projekt będzie obsługiwać aplikacje natychmiastowe

Nie zaznaczaj tego pola wyboru.

Korzystanie z artefaktów AndroidX

Zaznacz to pole wyboru.

Wygenerowanie plików projektu w Android Studio zajmie chwilę.

  1. Uruchom aplikację. Na pustym ekranie zobaczysz ciąg znaków „Hello World”.

Szablon Pusta aktywność tworzy pojedynczą pustą aktywność Mainactivity.kt. Szablon tworzy też plik układu o nazwie activity_main.xml. Plik układu ma ConstraintLayout jako element główny ViewGroup i zawiera tylko TextView.

W tym zadaniu zmienisz wygenerowany katalog główny ViewGroup na LinearLayout. Możesz też ułożyć elementy interfejsu w pionie.

Pokaż grupy

ViewGroup to widok, który może zawierać podrzędne widoki, czyli inne widoki i grupy widoków. Widoki tworzące układ są uporządkowane w hierarchię widoków, w której elementem głównym jest grupa widoków.

W grupie widoków LinearLayout elementy interfejsu są rozmieszczone w poziomie lub pionie.

Zmień układ główny, aby używał LinearLayout grupy widoków:

  1. Wybierz panel Projekt > Android. W folderze app/res/layout otwórz plik activity_main.xml.
  2. Wybierz kartę Tekst i zmień grupę widoku głównego z ConstraintLayout na LinearLayout.
  3. Usuń TextView. W elemencie LinearLayout dodaj atrybut android:orientation i ustaw go na vertical.

Przed:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Po:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

Edytor układu to narzędzie do projektowania wizualnego w Android Studio. Zamiast ręcznie pisać kod XML, aby utworzyć układ aplikacji, możesz użyć Edytora układu, aby przeciągać elementy interfejsu do edytora projektu.

Aby wyświetlić edytor układu, kliknij kartę Projekt. Zrzut ekranu poniżej przedstawia części Edytora układu.

Edytor projektu: wyświetla wizualną reprezentację układu ekranu w widoku projektu, widoku schematu lub w obu tych widokach. Edytor projektu to główna część edytora układu.

Pasek narzędzi: zawiera przyciski, które umożliwiają konfigurowanie wyglądu układu w edytorze projektu i zmienianie niektórych atrybutów układu. Aby na przykład zmienić wyświetlanie układu w edytorze projektu, użyj menu Wybierz powierzchnię projektu :

  • Użyj opcji Projekt, aby wyświetlić podgląd układu w rzeczywistych warunkach.
  • Użyj Planu, aby wyświetlić tylko kontury każdego widoku.
  • Użyj opcji Projekt + Plan, aby zobaczyć oba wyświetlacze obok siebie.

Paleta: zawiera listę widoków i grup widoków, które możesz przeciągnąć do układu lub do panelu Drzewo komponentów.

Atrybuty: wyświetla atrybuty dla aktualnie wybranego widoku lub grupy widoków. Aby przełączać się między pełną listą atrybutów a atrybutami używanymi najczęściej, kliknij ikonę  u góry panelu.

Drzewo komponentów: wyświetla hierarchię układu jako drzewo widoków. Drzewo komponentów jest przydatne, gdy masz małe, ukryte lub nakładające się widoki, których nie można wybrać w edytorze projektu.

Krok 1. Dodaj element TextView

  1. Otwórz plik res/layout/activity_main.xml, jeśli nie jest jeszcze otwarty.
  2. Przejdź na kartę Tekst  i sprawdź kod. Kod ma LinearLayout jako grupę widoku głównego. (Widoki grup to widoki, które zawierają inne widoki).

    LinearLayout ma wymagane atrybuty layout_height, layout_width i orientation, które domyślnie mają wartość vertical.
  3. Przejdź na kartę Projekt, aby otworzyć edytor układu.
  1. Przeciągnij widok tekstu z panelu Paleta do edytora projektu.


  2. Zwróć uwagę na panel Drzewo komponentów. Nowy widok tekstu jest umieszczany jako element podrzędny grupy widoków nadrzędnych, czyli LinearLayout.

  3. Otwórz panel Atrybuty, jeśli nie jest jeszcze otwarty. (Aby otworzyć panel, w edytorze projektu kliknij dwukrotnie nowo dodany element TextView).
  4. W panelu Atrybuty ustaw te atrybuty:

Atrybut

Wartość

Identyfikator

name_text

tekst

Wpisz swoje imię i nazwisko. (W jednym z pól tekstu wyświetla się ikona klucza, która wskazuje, że pole jest przeznaczone dla przestrzeni nazw tools. Ten bez klucza dotyczy przestrzeni nazw android – to pole tekstowe, którego szukasz).

textAppearance > textSize

20sp

textAppearance > textColor

@android:color/black

textAppearance > textAlignment

Środkowa

Krok 2. Utwórz zasób w postaci ciągu znaków

W drzewie komponentów obok ikony TextView, zobaczysz ikonę ostrzeżenia . Aby wyświetlić tekst ostrzeżenia, kliknij ikonę lub wskaż ją, jak pokazano na zrzucie ekranu poniżej.

Aby ostrzeżenie zniknęło, utwórz zasób ciągu znaków:

  1. W panelu Atrybuty kliknij 3 kropki obok atrybutu tekst, który został ustawiony jako Twoje imię i nazwisko. Otworzy się edytor zasobów.


  2. W oknie Zasoby kliknij Dodaj nowy zasób > Nowa wartość ciągu.
  3. W oknie New String Value Resource (Nowy zasób wartości ciągu) ustaw w polu Resource name (Nazwa zasobu) wartość name. W polu Wartość zasobu wpisz własne imię i nazwisko. Kliknij OK. Zwróć uwagę, że ostrzeżenie zniknęło.


  4. Otwórz plik res/values/strings.xml i poszukaj nowo utworzonego zasobu ciągu znaków o nazwie name.
<string name="name">Aleks Haecky</string>

Krok 3. Utwórz zasób wymiaru

Właśnie dodano zasób za pomocą edytora zasobów. Możesz też wyodrębnić zasoby w edytorze kodu XML, aby utworzyć nowe zasoby:

  1. W pliku activity_main.xml przejdź na kartę Tekst.
  2. W wierszu textSize kliknij numer (20sp) i wpisz Alt+Enter (Option+Enter na Macu). W menu wybierz Wyodrębnij zasób wymiaru.
  3. W oknie Wyodrębnij zasób wpisz text_size w polu Nazwa zasobu. Kliknij OK.


  4. Otwórz plik res/values/dimens.xml, aby zobaczyć wygenerowany kod:
<dimen name="text_size">20sp</dimen>
  1. Otwórz plik MainActivity.kt i poszukaj tego kodu na końcu funkcji onCreate(): 
setContentView(R.layout.activity_main)

Funkcja setContentView() łączy plik układu z Activity. Określony plik zasobu układu to R.layout.activity_main:

  • R to odwołanie do zasobu. Jest to automatycznie generowana klasa z definicjami wszystkich zasobów w aplikacji.
  • layout.activity_main oznacza, że zasób to układ o nazwie activity_main.
  1. Uruchom aplikację. Wyświetli się TextView z Twoim imieniem i nazwiskiem.

Gdy patrzysz na ekran aplikacji, Twoje imię jest przyklejone do góry ekranu, więc teraz dodajesz do niego dopełnienie i margines.

Dopełnienie a margines

Dopełnienie to przestrzeń wewnątrz granic widoku lub elementu. Jest to przestrzeń między krawędziami widoku a jego treścią, jak pokazano na ilustracji poniżej.

Rozmiar widoku obejmuje jego dopełnienie. Oto najczęściej używane atrybuty dopełnienia:

Margines to przestrzeń dodana poza granicami widoku. Jest to przestrzeń od krawędzi widoku do jego elementu nadrzędnego, jak pokazano na rysunku powyżej. Oto często używane atrybuty marginesu:

Krok 1. Dodaj dopełnienie

Aby dodać odstęp między imieniem i nazwiskiem a górną krawędzią widoku tekstu name, dodaj dopełnienie u góry.

  1. Otwórz plik activity_main.xml na karcie Projekt.
  2. W drzewie komponentów lub w edytorze projektu kliknij widok tekstu, aby otworzyć panel Atrybuty.
  3. U góry panelu Atrybuty kliknij ikonę z podwójną strzałką , aby wyświetlić wszystkie dostępne atrybuty.
  4. Wyszukaj Wypełnienie, rozwiń je i kliknij 3 kropki … obok atrybutu góra. Pojawi się okno Zasoby.
  5. W oknie Zasoby kliknij Dodaj nowy zasób > Nowa wartość wymiaru.
  6. W oknie Nowy zasób wartości wymiaru utwórz nowy zasób dimen o nazwie small_padding i wartości 8dp.

    Skrót dp oznacza niezależny od gęstości. Jeśli chcesz, aby element interfejsu użytkownika miał ten sam rozmiar na ekranach o różnej gęstości, użyj jednostki dp. Podczas określania rozmiaru tekstu zawsze używaj jednostki sp (skalowalne piksele).
  7. Kliknij OK.

Krok 2. Dodaj margines

Aby odsunąć widok tekstu name od krawędzi elementu nadrzędnego, dodaj górny margines.

  1. W panelu Atrybuty wyszukaj „margin”, aby znaleźć Layout_Margin.
  2. Rozwiń Layout_Margin i kliknij 3 kropki ... obok atrybutu top.
  3. Utwórz nowy zasób dimen o nazwie layout_margin i ustaw go jako 16dp. Kliknij OK.

Krok 3. Dodaj czcionkę

Aby poprawić wygląd widoku tekstu name, użyj czcionki Roboto na Androidzie. Ta czcionka jest częścią biblioteki pomocy, a Ty dodajesz ją jako zasób.

  1. W panelu Atrybuty wyszukaj „fontFamily”.
  2. W polu fontFamily kliknij strzałkę w dół, przewiń listę do dołu i wybierz Więcej czcionek.
  3. W oknie Zasoby wyszukaj rob i wybierz Roboto. Na liście Podgląd wybierz Zwykły.
  4. Kliknij opcję Dodaj czcionkę do projektu.
  5. Kliknij OK.

W folderze res znajduje się teraz folder font, który zawiera plik czcionki roboto.ttf. Atrybut @font/roboto zostanie dodany do TextView.

Krok 4. Wyodrębnij styl

Styl to zbiór atrybutów określających wygląd i format widoku. Styl może obejmować kolor czcionki, rozmiar czcionki, kolor tła, dopełnienie, margines i inne typowe atrybuty.

Możesz wyodrębnić formatowanie name widoku tekstu do stylu i używać go ponownie w dowolnej liczbie widoków w aplikacji. Ponowne używanie stylu zapewnia spójny wygląd aplikacji, gdy masz wiele widoków. Korzystanie ze stylów pozwala też przechowywać te wspólne atrybuty w jednym miejscu.

  1. Kliknij prawym przyciskiem myszy ikonę TextView w drzewie komponentów i wybierz Refaktoryzacja > Wyodrębnij styl.
  2. W oknie Wyodrębnij styl Androida odznacz pola wyboru layout_width, layout_height i textAlignment. Te atrybuty zwykle różnią się w poszczególnych widokach, więc nie chcesz, aby były częścią stylu.
  3. W polu Nazwa stylu wpisz NameStyle.
  4. Kliknij OK.


  5. Styl jest też zasobem, więc jest zapisywany w folderze res/values/ w pliku styles.xml. Otwórz styles.xml i sprawdź wygenerowany kod stylu NameStyle, który będzie wyglądać podobnie do tego:
<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>
  1. Otwórz activity_main.xml i przejdź na kartę Tekst. Zwróć uwagę, że wygenerowany styl jest używany w widoku tekstu jako style="@style/NameStyle".
  2. Uruchom aplikację i zwróć uwagę na zmiany czcionki i wypełnienia wokół elementu TextView.

Większość rzeczywistych aplikacji na Androida składa się z kombinacji widoków, które służą do wyświetlania obrazów i tekstu oraz akceptowania danych wejściowych od użytkownika w postaci tekstu lub zdarzeń kliknięcia. W tym zadaniu dodasz widok, który będzie wyświetlać obraz.

ImageView to widok służący do wyświetlania zasobów obrazów. Na przykład ImageView może wyświetlać zasoby Bitmap, takie jak pliki PNG, JPG, GIF lub WebP, albo zasób Drawable, taki jak rysunek wektorowy.

Android zawiera zasoby obrazów, takie jak przykładowe ikony, awatary i tła. Jeden z tych zasobów dodasz do aplikacji.

  1. Wyświetl plik układu na karcie Projekt, a następnie przeciągnij element ImageView z panelu Paleta poniżej elementu name_text w drzewie komponentów. Otworzy się okno Zasoby .
  2. Wybierz Drawable, jeśli nie jest jeszcze zaznaczona.
  3. Rozwiń android, przewiń i wybierz btn_star_big_on. To żółta gwiazda .
  4. Kliknij OK.



    Obraz gwiazdy zostanie dodany do układu pod Twoim imieniem i nazwiskiem. Ponieważ masz pionowy widok LinearLayout, dodawane przez Ciebie widoki są wyrównane pionowo.

  5. Przejdź na kartę Tekst i sprawdź wygenerowany kod ImageView. Szerokość jest ustawiona na match_parent, więc widok będzie tak szeroki jak element nadrzędny. Wysokość jest ustawiona na wrap_content, więc widok będzie tak wysoki, jak jego zawartość. Element ImageView odwołuje się do elementu rysowalnego btn_star_big_on.
<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />
  1. Aby zmienić nazwę id w ImageView, kliknij prawym przyciskiem myszy "@+id/imageView" i wybierz Refactor > Rename (Refaktoryzacja > Zmień nazwę).
  2. W oknie Zmień nazwę ustaw id na @+id/star_image. Kliknij Refactor (Refaktoryzacja).


  1. Na karcie Projekt w drzewie komponentów kliknij ikonę ostrzeżenia  obok star_image. Ostrzeżenie dotyczy braku atrybutu contentDescription, którego czytniki ekranu używają do opisywania obrazów użytkownikom.
  2. W panelu Atrybuty kliknij 3 kropki ... obok atrybutu contentDescription. Otworzy się okno Zasoby.
  3. W oknie Zasoby kliknij Dodaj nowy zasób > Nowa wartość ciągu. W polu Nazwa zasobu wpisz yellow_star, a w polu Wartość zasobu wpisz Yellow star. Kliknij OK.
  4. W panelu Atrybuty dodaj górny margines o wartości 16dp (czyli @dimen/layout_margin) do elementu yellow_star, aby oddzielić obraz gwiazdy od nazwy.
  5. Uruchom aplikację. Twoje imię i nazwisko oraz obraz gwiazdy będą wyświetlane w interfejsie aplikacji.

ScrollView to grupa widoków, która umożliwia przewijanie umieszczonej w niej hierarchii widoków. Widok przewijania może zawierać tylko jeden inny widok lub grupę widoków jako element podrzędny. Widok podrzędny to zwykle LinearLayout. W obrębie elementu LinearLayout możesz dodać inne widoki.

Obraz poniżej przedstawia przykład ScrollView, który zawiera LinearLayout z kilkoma innymi widokami.

Ten widok przewijania zawiera układ liniowy, który zawiera kilka innych widoków.

W tym zadaniu dodasz ScrollView, który umożliwi użytkownikowi przewijanie widoku tekstu wyświetlającego krótką biografię. Jeśli chcesz, aby tylko jeden widok był przewijany, możesz umieścić go bezpośrednio w ScrollView, co zrobisz w tym zadaniu.

Ten widok ScrollView zawiera jeden widok TextView.

Krok 1. Dodaj element ScrollView zawierający element TextView

  1. Otwórz plik activity_main.xml na karcie Projekt.
  2. Przeciągnij widok przewijania do układu, przeciągając go do edytora projektu lub do drzewa komponentów. Umieść widok przewijania pod obrazem gwiazdy.
  3. Aby sprawdzić wygenerowany kod, przejdź na kartę Tekst.
// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

Wysokość i szerokość elementu ScrollView są takie same jak elementu nadrzędnego. Gdy name_text widok tekstu i star_image widok obrazu zajmą wystarczająco dużo miejsca w pionie, aby wyświetlić swoją zawartość, system Android rozmieszcza ScrollView tak, aby wypełnić pozostałą dostępną przestrzeń na ekranie.

  1. Dodaj id do ScrollView i nadaj mu nazwę bio_scroll. Dodanie atrybutu id do elementu ScrollView daje systemowi Android uchwyt do widoku, dzięki czemu po obróceniu urządzenia przez użytkownika system zachowuje pozycję przewijania.
  2. W sekcji ScrollView usuń kod LinearLayout, ponieważ aplikacja będzie miała tylko jeden widok z możliwością przewijania – TextView.
  3. Przeciągnij TextView z palety do drzewa komponentów. Umieść element TextView pod elementem bio_scroll jako element podrzędny elementu bio_scroll.

  4. Ustaw identyfikator nowego widoku tekstu na bio_text.
  5. Następnie dodaj styl do nowego widoku tekstu. W panelu Atrybuty kliknij wielokropek … obok atrybutu styl, aby otworzyć okno Zasoby.
  6. W oknie Zasoby wyszukaj NameStyle. Wybierz NameStyle z listy i kliknij OK. Widok tekstu korzysta teraz ze stylu NameStyle, który został utworzony w poprzednim zadaniu.

Krok 2. Dodaj biogram do nowego widoku TextView

  1. Otwórz plik strings.xml, utwórz zasób tekstowy o nazwie bio i wpisz długi tekst o sobie lub o czymkolwiek innym.

Przykładowa biografia: 

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>
  1. W widoku tekstowym bio_text ustaw wartość atrybutu text na zasób ciągu znaków bio, który zawiera Twoją biografię.
  2. Aby ułatwić czytanie tekstu bio_text, dodaj odstępy między wierszami. Użyj atrybutu lineSpacingMultiplier i przypisz mu wartość 1.2.



    Zwróć uwagę, że w edytorze projektu tekst bio rozciąga się aż do krawędzi ekranu. Aby rozwiązać ten problem, możesz dodać atrybuty dopełnienia z lewej strony, z prawej strony, na początku i na końcu do elementu głównego LinearLayout. Nie musisz dodawać dołu, ponieważ tekst, który sięga do samego dołu, sygnalizuje użytkownikowi, że można go przewijać.
  3. Dodaj do elementu głównego LinearLayout dopełnienie początkowe i końcowe o wartości 16dp.
  4. Przejdź na kartę Tekst, wyodrębnij zasób wymiaru i nadaj mu nazwę layout_padding.

  1. Uruchom aplikację i przewiń tekst.

Gratulacje!

Udało Ci się utworzyć kompletną aplikację od zera i wygląda ona świetnie.

Projekt Android Studio: AboutMe

W ScrollView dodaj ImageView powyżej TextView. Gdy uruchomisz aplikację, ten obraz, w przeciwieństwie do gwiazdy, zniknie z ekranu, gdy tekst będzie przewijany w górę.

Wskazówka: widok przewijania może mieć tylko jeden widok podrzędny. Musisz umieścić 2 widoki z możliwością przewijania, ImageView i TextView, w LinearLayout.

  • ViewGroup to widok, który może zawierać inne widoki. LinearLayout i ScrollView to grupy wyświetlania.
  • LinearLayout to grupa widoków, która rozmieszcza widoki podrzędne w poziomie lub w pionie.
  • Użyj ScrollView, gdy chcesz wyświetlić na ekranie treści, takie jak długi tekst lub zbiór obrazów. Widok przewijania może zawierać tylko jeden widok podrzędny. Jeśli chcesz przewijać więcej niż jeden widok, dodaj ViewGroup, np. LinearLayout, do ScrollView i umieść w tym ViewGroup widoki, które mają być przewijane.
  • Edytor układu to wizualny edytor projektów w Android Studio. Za pomocą Edytora układu możesz tworzyć układ aplikacji, przeciągając do niego elementy interfejsu.
  • Styl to zbiór atrybutów określających wygląd widoku. Styl może na przykład określać kolor czcionki, jej rozmiar, kolor tła, dopełnienie i margines.
  • Możesz wyodrębnić i zebrać wszystkie formatowania widoku w stylu. Aby zapewnić aplikacji spójny wygląd, użyj tego samego stylu w przypadku innych widoków.

Kurs Udacity:

Dokumentacja dla deweloperów aplikacji na Androida:

W tej sekcji znajdziesz listę możliwych zadań domowych dla uczniów, którzy wykonują ten moduł w ramach kursu prowadzonego przez instruktora. Nauczyciel musi:

  • W razie potrzeby przypisz pracę domową.
  • Poinformuj uczniów, jak przesyłać projekty.
  • Oceń zadania domowe.

Instruktorzy mogą korzystać z tych sugestii w dowolnym zakresie i mogą zadawać inne zadania domowe, które uznają za odpowiednie.

Jeśli wykonujesz ten kurs samodzielnie, możesz użyć tych zadań domowych, aby sprawdzić swoją wiedzę.

Odpowiedz na te pytania

Pytanie 1

Która z tych odpowiedzi jest grupą wyświetleń?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

Pytanie 2

Która z tych hierarchii widoków jest nieprawidłowa?

▢ LinearLayout > TextView, TextView, ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

Pytanie 3

Style to zasoby zdefiniowane w styles.xml. Za pomocą stylów możesz określać kolory, czcionki, rozmiar tekstu i wiele innych cech widoku. Prawda czy fałsz?

▢ Prawda

▢ Fałsz

Pytanie 4

ScrollView to grupa widoków, która może zawierać dowolną liczbę widoków lub grup widoków jako elementy podrzędne. Prawda czy fałsz?

▢ Prawda

▢ Fałsz

Pytanie 5

Którego elementu interfejsu można użyć do wyświetlania obrazów w aplikacji?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

Rozpocznij kolejną lekcję: 2.2. Dodawanie interaktywności

Linki do innych ćwiczeń z tego kursu znajdziesz na stronie docelowej ćwiczeń z podstaw języka Kotlin na Androidzie.