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

Te ćwiczenia są częścią kursu Android Kotlin Fundamentals. Skorzystaj z tego kursu, jeśli będziesz wykonywać kolejno kilka ćwiczeń z programowania. Wszystkie ćwiczenia z kursu są wymienione na stronie docelowej ćwiczeń z programowania na temat Kotlin.

Co musisz wiedzieć

• Tworzenie podstawowej aplikacji na Androida w Kotlinie.
• uruchamianie aplikacji na Androida w emulatorze lub na urządzeniu,
• LinearLayout – podstawy.
• Tworzenie prostej aplikacji korzystającej z LinearLayout i TextView.

Czego się nauczysz

• Jak używać View i ViewGroup.
• Jak rozmieścić widoki w Activity przy użyciu LinearLayout.
• Jak użyć elementu ScrollView do wyświetlania treści, którą można przewijać.
• Jak zmienić widoczność elementu View.
• Tworzenie zasobów ciągów i wymiarów oraz korzystanie z nich.
• Jak utworzyć układ liniowy w edytorze układu Android Studio.

Jakie zadania wykonasz:

• Utwórz aplikację O mnie.
• Dodaj TextView do układu, aby wyświetlać swoją nazwę.
• Dodaj: ImageView.
• Aby wyświetlać przewijany tekst, dodaj ScrollView.

W aplikacji O mnie możesz prezentować interesujące informacje o sobie. Możesz też dostosować aplikację do znajomych, członków rodziny lub zwierząt. Ta aplikacja wyświetla nazwę, przycisk GOTOWE, obraz gwiazdki i tekst, który można przewijać.

W tym zadaniu tworzysz projekt OMew Android Studio.

1. Otwórz aplikację Android Studio, jeśli nie jest jeszcze otwarta.
2. Jeśli projekt jest już otwarty w Android Studio, wybierz File > New > New Project.
   
   
   
3. Jeśli projekt nie jest jeszcze otwarty, wybierz + Rozpocznij nowy projekt Android Studio w oknie Witamy w Android Studio.
   
   
   
4. W oknie Utwórz nowy projekt na karcie Telefon i tablet wybierz szablon Pusta aktywność. Kliknij Dalej.
   
   
   
5. W następnym oknie Utwórz nowy projekt ustaw następujące parametry i kliknij Zakończ.
   

Atrybut	Wartość
Nazwa aplikacji	O mnie
Nazwa firmy – Android	com.android.example.AboutMe (lub Twoja własna domena)
Zapisuj lokalizacje	Pozostaw lokalizację domyślną lub zmień ją na preferowaną.
Język	Kotlin
Minimalny poziom API	API 19: Android 4.4 (KitKat)
Ten projekt będzie obsługiwać aplikacje błyskawiczne	Pozostaw to pole wyboru odznaczone.
Używanie artefaktów Androida X	Zaznacz to pole wyboru.

Android Studio wygeneruje pliki projektu, a to zajmie tylko chwilę.

6. Uruchom aplikację. Na pustym ekranie wyświetli się ciąg "Hello World.
   

Szablon pustej aktywności tworzy jedną pustą aktywność, Mainactivity.kt. Szablon tworzy również plik układu o nazwie activity_main.xml. Plik z szablonem ma układ główny ConstraintLayout ViewGroup, a jako jego zawartość podano 1 TextView.

W tym zadaniu zmienisz wygenerowany główny poziom ViewGroup na LinearLayout. Elementy interfejsu możesz też rozmieścić w pionie.

Wyświetl grupy

ViewGroup to widok, który może zawierać widoki podrzędne, czyli inne widoki danych i grupy widoków. Widoki, które składają się na układ, są uporządkowane jako hierarchia widoków z grupą wyświetleń jako katalogiem głównym.

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

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

1. Wybierz panel Project > Android. W folderze app/res/layout otwórz plik activity_main.xml.
2. Wybierz kartę Tekst i zmień główną grupę widoków z ConstraintLayout na LinearLayout.
3. Usuń TextView. W elemencie LinearLayout dodaj atrybut android:orientation i ustaw jego wartość 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 pisać kod XML ręcznie w celu zbudowania układu aplikacji, możesz użyć Edytora układu, aby przeciągać elementy interfejsu do edytora projektu.

Aby wyświetlić Edytor układu, kliknij kartę Design (Projekt). Zrzut ekranu poniżej pokazuje elementy Edytora układu.

Edytor projektu: wyświetla wizualizację układu ekranu w widoku projektu, w planie projektu lub w obydwu tych przypadkach. Edytor układu to główna część Edytora układu.

Pasek narzędzi: zawiera przyciski do konfigurowania układu w edytorze projektu oraz zmiany niektórych atrybutów układu. Aby na przykład zmienić wygląd układu w edytorze projektu, użyj menu Wybierz powierzchnię projektu:

• Użyj projektu, by zobaczyć, jak wygląda rzeczywisty układ.
• Wybierz Plan, aby wyświetlić tylko kontury każdego widoku.
• Użyj opcji Projekt + plan, by wyświetlić obrazy obok siebie.

Paleta: udostępnia listę widoków danych i grup widoków, które możesz przeciągać do swojego układu lub do panelu Drzewo komponentów.

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

Drzewo komponentów: hierarchia układu przedstawia drzewo widoków. Drzewo komponentów przydaje się, gdy masz małe, ukryte lub pokrywające się widoki, których nie można wybrać w edytorze projektu.

Krok 1. Dodaj widok tekstowy

1. Otwórz plik res/layout/activity_main.xml, jeśli jeszcze nie jest otwarty.
2. Otwórz kartę Tekst i sprawdź kod. Ten kod ma główną grupę widoku danych: LinearLayout. (Grupy widoku danych to widoki zawierające inne widoki danych).
   
   LinearLayout ma wymagane atrybuty layout_height, layout_width i orientation. To ustawienie jest domyślnie vertical.
3. Otwórz kartę Projekt, by otworzyć Edytor układu.

Uwaga: karty Projekt i Tekst pokazują ten sam układ, ale w inny sposób. Zmiany wprowadzone na jednej karcie są odzwierciedlane na drugiej.

4. Przeciągnij widok tekstu z panelu Paleta do edytora projektu.
   
   
   
5. Zwróć uwagę na panel Drzewo komponentów. Nowy widok tekstowy zostanie umieszczony jako element podrzędny grupy nadrzędnego widoku, którym jest LinearLayout.
   
   
6. Otwórz panel Atrybuty, jeśli nie jest jeszcze otwarty. Aby otworzyć panel, kliknij dwukrotnie TextView nowo dodane elementy w edytorze projektu.
7. W panelu Atrybuty ustaw te atrybuty:

Atrybut	Wartość
Identyfikator	name_text
Napisz wiadomość	Ustaw nazwę. W jednym z pól tekst widać ikonę klucza, która wskazuje, że jest to przestrzeń nazw tools. (bez klucza należy użyć przestrzeni nazw android – to jest pole text, które chcesz dodać)
textWygląd > textSize	20sp
textWygląd > textColor	@android:color/black
Wygląd tekstu > dopasowanie tekstu	Środek

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

W Drzewie komponentów obok ikony TextView, zobaczysz ikonę ostrzeżenia . Aby zobaczyć tekst ostrzeżenia, kliknij tę ikonę lub wskaż, jak pokazano na poniższym zrzucie ekranu.

Aby usunąć ostrzeżenie, utwórz ciąg znaków:

1. W panelu Atrybuty kliknij trzy kropki obok ustawionego atrybutu tekst. Otworzy się edytor zasobów.
   
   
   
2. W oknie Resources (Zasoby) wybierz Add new resource > New string Value.
3. W oknie New String Value Resource (Nowy zasób wartości ciągu) ustaw pole Resource name (Nazwa zasobu) na name. W polu Wartość zasobu wpisz własną nazwę. Kliknij OK. Zwróć uwagę, że ostrzeżenie zniknie.
   
   
   
4. Otwórz plik res/values/strings.xml i poszukaj nowo utworzonego zasobu 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ębniać zasoby w edytorze kodu XML, aby tworzyć nowe zasoby:

1. W pliku activity_main.xml otwórz kartę Tekst.
2. W wierszu textSize kliknij liczbę (20sp) i wpisz Alt+Enter (Option+Enter na Macu). Wybierz Wyodrębnij zasób wymiaru z menu.
3. W oknie Wyodrębnianie zasobu wpisz text_size w polu Nazwa zasobu. Kliknij OK.
   
   
   
4. Otwórz plik res/values/dimens.xml, by wyświetlić ten wygenerowany kod:

<dimen name="text_size">20sp</dimen>

Uwaga: jeśli plik dimens.xml nie był wcześniej widoczny w folderze res/values, Android Studio go utworzy.

5. Otwórz plik MainActivity.kt i na końcu funkcji onCreate() poszukaj tego kodu:

setContentView(R.layout.activity_main)

Funkcja setContentView() łączy plik z elementem Activity. Podany plik zasobu układu to R.layout.activity_main:

• R jest odwołaniem do tego zasobu. Jest to generowana automatycznie klasa z definicjami wszystkich zasobów w aplikacji.
• layout.activity_main wskazuje, że zasób ma układ o nazwie activity_main.

6. Uruchom aplikację. Wyświetli się TextView Twojej nazwy.
   
   

Patrząc na ekran aplikacji, zobaczysz, że Twoja nazwa jest przesunięta w górę ekranu, więc dodajesz dopełnienie i margines.

Dopełnienie a marża

Dopełnienie to przestrzeń między granicami widoku lub elementu. Jest to odstęp między krawędziami widoku a treścią widoku, jak widać na rysunku poniżej.

Rozmiar widoku obejmuje dopełnienie. Oto często używane atrybuty dopełniania:

• android:padding określa wypełnienie wszystkich czterech krawędzi widoku.
• android:paddingTop określa dopełnienie górnej krawędzi.
• android:paddingBottom określa dopełnienie na dole.
• android:paddingStart określa dopełnienie dla krawędzi &widoku początkowego.
• android:paddingEnd określa dopełnienie dla &końca widoku.
• android:paddingLeft określa dopełnienie dla lewej krawędzi.
• android:paddingRight określa dopełnienie dla prawej krawędzi.

Marża to obszar dodany poza granicami widoku. Jest to odstęp od krawędzi widoku do elementu nadrzędnego, jak widać na rysunku powyżej. Oto najczęściej używane atrybuty marży:

• android:layout_margin określa margines na wszystkie cztery boki widoku.
• android:layout_marginBottom określa miejsce poza dolną krawędzią tego widoku.
• android:layout_marginStart określa przestrzeń poza tym widokiem.
• android:layout_marginEnd określa przestrzeń na końcu tego widoku.
• android:layout_marginLeft wskazuje przestrzeń po lewej stronie tego widoku.
• android:layout_marginRight wskazuje miejsce po prawej stronie tego widoku.

Prawa/lewo/początek/koniec

"Right" oraz "left"Zawsze odnosi się do prawej i lewej strony ekranu, niezależnie od tego, czy aplikacja używa przepływu od lewej do prawej (LTR), czy od prawej do lewej (RTL). "&" i "end"zawsze odnoszą się do początku i zakończenia procesu:

• W przypadku przepływu LTR rozpocznij = w lewo i zakończ=w prawo.
• W przypadku przepływu RTL start=right i end=left.

Jeśli interfejs API aplikacji jest na poziomie 17 (Android 4.2) lub nowszym:

• &"start" & "end" zamiast "left" &"right".
• Na przykład parametr android:layout_marginLeft powinien być ustawiony jako android:layout_marginStart, aby obsługiwać języki RTL.

Jeśli chcesz, aby Twoja aplikacja działała w wersjach starszych niż 4.2 Androida, co oznacza, że wersje targetSdkVersion i minSdkVersion w wersji 16 lub starszej:

• Dodaj &"start" i end" oprócz "left" i "right".
• Użyj na przykład android:paddingLeft i android:paddingStart.

Krok 1. Dodaj dopełnienie

Aby wstawić spację między Twoją nazwą a górną krawędzią widoku tekstowego 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, by otworzyć panel Atrybuty.
3. Aby zobaczyć wszystkie dostępne atrybuty, u góry panelu Atrybuty kliknij ikonę podwójnej strzałki .
4. Wyszukaj Dopełnienie, rozwiń je i kliknij trzy kropki ... obok atrybutu top. Pojawi się okno Zasoby.
5. W oknie Zasoby wybierz Dodaj nowy zasób > Nowa wartość przyciemnienia.
6. W oknie Nowy zasób wartości zasobu utwórz nowy zasób dimen o nazwie small_padding o wartości 8dp.
   
   Skrót dp oznacza niezależny od gęstości. Jeśli chcesz, by element UI wyglądał tak samo na ekranach o różnych gęstościach, użyj jednostki dp. Gdy określasz rozmiar tekstu, zawsze używaj wartości sp (pikseli skalowalnej).
7. Kliknij OK.

Krok 2. Dodaj marżę

Aby przenieść widok tekstowy name poza krawędź elementu nadrzędnego, dodaj górny margines.

1. W panelu Atrybuty wyszukaj "margin", aby znaleźć parametr 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 lepiej wyglądać widok tekstowy name, użyj czcionki Android Roboto. Ta czcionka jest częścią biblioteki pomocy i możesz dodać ją jako zasób.

1. W panelu Atrybuty wyszukaj "fontFamily&quot.
2. W polu fontFamily kliknij strzałkę w dół , przewiń w dół i wybierz Więcej czcionek.
3. W oknie Zasoby wyszukaj rob i wybierz Robot. Na liście Podgląd wybierz Zwykłe.
4. Wybierz opcję Dodaj czcionkę do projektu.
5. Kliknij OK.
   
   

Folder res zawiera teraz folder font zawierający plik czcionki roboto.ttf. Atrybut @font/roboto został dodany do elementu TextView.

Krok 4. Wyodrębnij styl

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

Możesz wyodrębnić formatowanie tekstu tekstowego (name) do stylu i ponownie wykorzystać styl dla dowolnej liczby wyświetleń w aplikacji. Ponowne użycie stylu zapewni aplikacji spójny wygląd, gdy będziesz mieć wiele wyświetleń. Dzięki stylom możesz przechowywać te typowe atrybuty w jednym miejscu.

1. Kliknij prawym przyciskiem myszy obiekt TextView w drzewie komponentów i wybierz Fact > Extract Style.
2. W oknie Wyodrębnij styl Androida odznacz pola wyboru layout_width, layout_height i textAlignment. Te atrybuty są zwykle różne w każdym widoku, więc nie chcesz, aby były one częścią stylu.
3. W polu Nazwa stylu wpisz NameStyle.
4. Kliknij OK.
   
   
   
5. Styl jest również zasobem, więc styl 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ć mniej więcej tak:

<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>

6. Otwórz aplikację activity_main.xml i przejdź na kartę Tekst. Zwróć uwagę, że wygenerowany styl jest używany w widoku tekstowym jako style="@style/NameStyle".
7. Uruchom aplikację i sprawdź zmiany czcionki oraz dopełnienia obszaru TextView.

Większość prawdziwych aplikacji na Androida składa się z widoków, obrazów i tekstów, które akceptują użytkownicy w formie tekstowej lub kliknięcia. W tym zadaniu dodasz widok, w którym zobaczysz obraz.

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

Do Androida są dołączone zasoby graficzne, takie jak przykładowe ikony, awatary i tła. Dodajesz jeden z tych zasobów do aplikacji.

1. Wyświetl plik układu na karcie Projekt, a następnie przeciągnij obiekt ImageView z panelu Paleta do obszaru name_text w drzewie komponentów. Otworzy się okno Zasoby.
2. Zaznacz opcję Do wyświetlenia, jeśli nie jest jeszcze wybrana.
3. Rozwiń android, przewiń i wybierz btn_star_big_on. To jest żółta gwiazdka .
4. Kliknij OK.
   
   
   
   Gwiazdka zostanie dodana do układu pod Twoją nazwą. Ze względu na branżę LinearLayout dodane przez Ciebie widoki są wyrównane w pionie.
   
   
5. Otwórz kartę Tekst i wyświetl wygenerowany kod ImageView. Szerokość jest ustawiona na match_parent, więc widok jest taki sam jak jej element nadrzędny. Wysokość jest ustawiona na wrap_content, więc widok będzie tak wysoki jak jej zawartość. Element ImageView odwołuje się do elementu btn_star_big_on, który można narysować.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. Aby zmienić nazwę elementu id elementu ImageView, kliknij prawym przyciskiem myszy "@+id/imageView" i wybierz Refaktor > Zmień nazwę.
7. W oknie Zmień nazwę ustaw id na @+id/star_image. Kliknij Refaktor.
   
   
   

Wskazówka: refaktor &„nazwa” zmienia nazwy wszystkich wystąpień atrybutu lub nazwy zmiennej w projekcie aplikacji.

8. Na karcie Projekt w drzewie komponentów kliknij ikonę ostrzeżenia obok etykiety star_image. Ostrzeżenie dotyczy brakującego elementu contentDescription, którego czytniki ekranu opisują użytkownikom.
9. W panelu Atrybuty kliknij 3 kropki ... obok atrybutu contentDescription. Otworzy się okno Zasoby.
10. W oknie Resources (Zasoby) wybierz Add new resource > New string Value. W polu Nazwa zasobu wybierz yellow_star, a w polu Wartość zasobu – Yellow star. Kliknij OK.
11. W panelu Atrybuty dodaj górny margines 16dp (czyli @dimen/layout_margin) do yellow_star, by oddzielić obraz gwiazdki od imienia.
12. Uruchom aplikację. Twoje imię i nazwisko oraz obraz gwiazdki pojawią się w interfejsie aplikacji.
    
    

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

Poniższa ilustracja przedstawia przykład elementu ScrollView zawierającego element LinearLayout zawierający kilka innych widoków.

W tym zadaniu dodasz właściwość ScrollView, która umożliwi użytkownikowi przewijanie widoku tekstu przedstawiającego krótką biografię. Jeśli umożliwiasz przewijanie tylko jednego widoku, możesz umieścić go bezpośrednio w elemencie ScrollView – właśnie to robisz.

Krok 1. Dodaj do elementu ScrollView widok tekstowy

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 gwiazdki.
3. Otwórz kartę Tekst, aby sprawdzić wygenerowany kod.

// 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 pasują do elementu nadrzędnego. Gdy w widoku tekstowym name_text i widoku obrazu star_image zabraknie miejsca w pionie, system Android wyświetli ScrollView tak, aby wypełnić pozostałe dostępne miejsce na ekranie.

4. Dodaj id do pola ScrollView i nazwij go bio_scroll. Dodanie tagu id do ScrollView umożliwia systemowi Android wyświetlenie uchwytu do wyświetlania danego widoku. Dzięki temu, gdy użytkownik obróci urządzenie, położy się ono w miejscu przewijania.
5. Usuń kod LinearLayout z elementu ScrollView, ponieważ aplikacja ma tylko 1 widok, który można przewijać – TextView.
6. Przeciągnij TextView z palety do drzewa komponentów. Umieść TextView w sekcji bio_scroll, jako element podrzędny elementu bio_scroll.
   
   
7. Ustaw id nowego widoku tekstowego na bio_text.
8. Następnie dodaj styl do nowego widoku tekstu. W panelu Atrybuty kliknij 3 kropki ... obok atrybutu style, by otworzyć okno Resources (Zasoby).
9. W oknie Zasoby wyszukaj NameStyle. Wybierz z listy NameStyle i kliknij OK. Widok tekstu korzysta teraz ze stylu NameStyle utworzonego w poprzednim zadaniu.
   
   

Krok 2. Dodaj swoją biografię do nowego tekstu

1. Otwórz plik strings.xml, utwórz zasób o nazwie bio i wpisz długi tekst na swój temat lub na dowolny temat.
   

Uwaga:

• Użyj znaku \n, aby wskazać podział wiersza.
• Jeśli używasz apostrofu, musisz użyć ukośnika lewego. Na przykład:
  "You mustn\'t forget the backslash."
• Aby zastosować pogrubienie, użyj <b>...</b>, a kursywą – <i>...</i>. Przykład:
  "This text is <b>bold</b> and this text is <i>italics</i>."

Oto przykład biografii:

<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>

2. W widoku tekstowym bio_text ustaw wartość atrybutu text na zasób ciągu znaków bio zawierający Twoją biografię.
3. Aby ułatwić czytanie tekstu bio_text, oddziel je spacjami. Użyj atrybutu lineSpacingMultiplier i przypisz mu wartość 1.2.
   
   
   
   W edytorze projektu tekst bio może sięgać aż do krawędzi ekranu. Aby rozwiązać ten problem, możesz dodać atrybuty lewo, start, prawo i dopełnienie do poziomu głównego LinearLayout. Nie musisz dodawać dopełnienia na dole, ponieważ tekst, który wyświetla się do dołu, sygnalizuje użytkownikowi, że tekst może być przewijany.
4. Dodaj do początku i końca dopełnienie 16dp w katalogu głównym LinearLayout.
5. Otwórz kartę Tekst, wyodrębnij zasób wymiaru i nadaj mu nazwę layout_padding.
   
   

Uwaga: od poziomu API 17 użyj "start" i "end" zamiast "left" i "right" opcji dopełnienia i marginesu, aby dostosować aplikację do języków pisanych od prawej do lewej, takich jak arabski.

6. Uruchom aplikację i przewiń tekst.
   
   

Gratulacje!

Udało Ci się utworzyć całą aplikację od zera – wygląda świetnie.

Projekt w Android Studio: O mnie

Uwaga: wszystkie testy zabezpieczające logowanie są opcjonalne.

W kolumnie ScrollView dodaj ImageView nad elementem TextView. Gdy uruchomisz aplikację, obraz (w przeciwieństwie do gwiazdki) będzie przewijać się w górę, gdy tekst będzie przewijany do góry.

Wskazówka: widok przewijania może mieć tylko jeden widok podrzędny. Musisz połączyć dwa wyświetlane widoki – ImageView i TextView – w LinearLayout.

• ViewGroup to widok, który może zawierać inne widoki. LinearLayout i ScrollView to grupy widoku danych.
• LinearLayout to grupa widoków danych, która umieszcza widoki podrzędne w pionie lub poziomie.
• Użyj formatu ScrollView, gdy chcesz wyświetlać treść na ekranie, na przykład długi tekst lub kolekcję obrazów. Widok przewijania może zawierać tylko jeden widok podrzędny. Jeśli chcesz przewinąć więcej niż jeden widok, dodaj ViewGroup, taki jak LinearLayout, do ScrollView i umieść w nim widoki, które chcesz przewijać.ViewGroup
• Edytor układu to edytor wizualny w Android Studio. Za pomocą Edytora układu możesz utworzyć układ aplikacji, przeciągając elementy interfejsu.
• Styl to zbiór atrybutów, które określają wygląd w widoku. Styl może na przykład określić kolor czcionki, rozmiar czcionki, kolor tła, dopełnienie i marginesy.
• Możesz wyodrębniać i zbierać wszystkie formatowanie widoku stylu. Aby nadać aplikacji spójną styl, użyj tego samego stylu w innych widokach.

Kurs Udacity:

• Tworzenie aplikacji na Androida razem z Kotlin

Dokumentacja dla programistów Androida:

• Układy
• ViewGroup
• View
• Układ liniowy
• ScrollView
• Obsługa różnych gęstości pikseli (dp)
• Tworzenie interfejsu za pomocą Edytora układu
• Dokumentacja Androida Studio
• Style i motywy

Ta sekcja zawiera listę możliwych zadań domowych dla uczniów, którzy pracują w ramach tego ćwiczenia w ramach kursu prowadzonego przez nauczyciela. To nauczyciel może wykonać te czynności:

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

Nauczyciele mogą wykorzystać te sugestie tak długo, jak chcą lub chcą, i mogą przypisać dowolne zadanie domowe.

Jeśli samodzielnie wykonujesz te ćwiczenia z programowania, możesz sprawdzić swoją wiedzę w tych zadaniach domowych.

Odpowiedz na te pytania

Pytanie 1

Która z poniższych grup jest widokiem grupy?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

Pytanie 2

Która z poniższych hierarchii 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 narzędziu styles.xml. Za pomocą stylów można definiować kolory, czcionki, rozmiar tekstu i wiele innych cech danego widoku. Prawda czy fałsz?

▢ Prawda

▢ Fałsz

Pytanie 4

ScrollView to grupa widoków danych, która może zawierać dowolną liczbę widoków danych lub grupy widoku podrzędnego. 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 następną lekcję: 2.2 Dodawanie interaktywności użytkowników

Linki do innych ćwiczeń z programowania w tym kursie znajdziesz na stronie docelowej z ćwiczeniami z podstaw Androida Kotlin.