MDC-103 Android: dopasowywanie motywu z kolorem, wysokością i typem (Kotlin)

1. Wprowadzenie

Material Komponenty (MDC) pomagają deweloperom wdrażać interfejs Material Design. MDC to biblioteka stworzona przez zespół inżynierów i projektantów UX w Google. Zawiera dziesiątki pięknych i funkcjonalnych komponentów UI. Jest dostępna na Androida, iOS, web i Flutter.material.io/develop

W ramach laboratoriów programistycznych MDC-101 i MDC-102 korzystając z biblioteki Material Components (MDC) utworzysz podstawy aplikacji noszącej nazwę Shrine. Jest to aplikacja e-commerce, która sprzedaje odzież i artykuły gospodarstwa domowego. Ta aplikacja zawiera proces, który zaczyna się na ekranie logowania i prowadzi do ekranu głównego z wyświetlanymi produktami.

Niedawne rozszerzenie Material Design daje projektantom i programistom większą swobodę w wyrażaniu marki produktu. Teraz możesz używać MDC do dostosowywania Shrine i odzwierciedlania jego unikalnego stylu.

Co utworzysz

W tym ćwiczeniu możesz dostosować Shrine do swojej marki, korzystając z tych elementów:

• Kolor
• Typografia
• Wysokość
• Układ

To trzecie z 4 laboratoriów kodu, które pomogą Ci stworzyć aplikację o nazwie Shrine. Jest to aplikacja e-commerce, w której można kupować odzież i artykuły gospodarstwa domowego. Powiązane laboratoria kodu znajdziesz tutaj: MDC-101: podstawy komponentów materiałowych (MDC) MDC-102: Struktura i schemat Material Design MDC-104: zaawansowane komponenty Material Design Na koniec modułu MDC 104 utworzysz aplikację, która będzie wyglądać tak:

Komponenty i podsystemy MDC na Androida użyte w tym samouczku:

• Motywy
• Typografia
• Wysokość

Czego potrzebujesz

• Podstawowa wiedza o programowaniu aplikacji na Androida
• Android Studio (jeśli nie masz jeszcze tego programu, pobierz go tutaj).
• emulator lub urządzenie z Androidem (dostępne w Android Studio).
• Przykładowy kod (patrz następny krok)

Jak oceniasz swój poziom doświadczenia w tworzeniu aplikacji na Androida?

Początkujący Średnio zaawansowany Zaawansowany

2. Konfigurowanie środowiska programistycznego

Przechodzisz z MDC-102?

Jeśli ukończyłeś/ukończyłaś MDC-102, Twój kod powinien być gotowy do użycia w tym ćwiczeniu. Przejdź do kroku 3. Zmień kolor.

Pobierz startową aplikację Codelabs

Pobierz aplikację startową

Aplikacja startowa znajduje się w katalogu material-components-android-codelabs-103-starter/kotlin. Zanim zaczniesz, przejdź do tego katalogu.

...lub skopiuj je z GitHuba

Aby skopiować to ćwiczenia z programowania z GitHuba, uruchom te polecenia:

git clone https://github.com/material-components/material-components-android-codelabs
cd material-components-android-codelabs/
git checkout 103-starter

Więcej informacji: klonowanie repozytorium z GitHub

Wczytywanie kodu startowego w Android Studio

1. Gdy kreator konfiguracji zakończy działanie i pojawi się okno Witamy w Android Studio, kliknij Otwórz istniejący projekt Android Studio. Przejdź do katalogu, w którym zainstalowano przykładowy kod, i wybierz kotlin -> shrine (lub wyszukaj na komputerze shrine), aby otworzyć projekt Shipping.
2. Poczekaj, aż Android Studio skompiluje i zsynchronizuje projekt, zgodnie ze wskaźnikami aktywności u dołu okna Android Studio.
3. W tym momencie Android Studio może zgłaszać błędy kompilacji, ponieważ brakuje w nim pakietu Android SDK lub narzędzi do kompilacji, takich jak ten poniżej. Postępuj zgodnie z instrukcjami w Android Studio, aby zainstalować lub zaktualizować te biblioteki i zsynchronizować swój projekt.

Dodaj zależności projektu

Projekt musi być zależny od biblioteki pomocy MDC Android. Ta zależność powinna już być widoczna w pobranym przykładowym kodzie, ale warto wykonać te czynności, aby mieć pewność.

1. Otwórz plik build.gradle modułu app i upewnij się, że blok dependencies zawiera zależność od MDC na Androida:

api 'com.google.android.material:material:1.1.0-alpha06'

2. (Opcjonalnie) W razie potrzeby zmodyfikuj plik build.gradle, aby dodać te zależności i zsynchronizować projekt.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

Uruchomienie aplikacji startowej

Upewnij się, że konfiguracja kompilacji po lewej stronie przycisku Uruchom / Odtwórz to app. Aby skompilować i uruchomić aplikację, naciśnij zielony przycisk Uruchom / Graj. Jeśli masz już urządzenie z Androidem na liście dostępnych urządzeń, w oknie Wybierz cel wdrożenia przejdź do kroku 8. W przeciwnym razie kliknij Create New Virtual Device (Utwórz nowe urządzenie wirtualne). Na ekranie Wybierz sprzęt wybierz telefon, np. Pixel 2, a następnie kliknij Dalej. Na ekranie Obraz systemu wybierz najnowszą wersję Androida, najlepiej z najwyższym poziomem interfejsu API. Jeśli aplikacja nie jest zainstalowana, kliknij widoczny link Pobierz i dokończ pobieranie. Kliknij Dalej. Na ekranie Urządzenie wirtualne z Androidem (AVD) pozostaw ustawienia bez zmian i kliknij Zakończ. W oknie docelowym wdrożenia wybierz urządzenie z Androidem. Kliknij OK. Android Studio skompiluje aplikację, wdroży ją i automatycznie otworzy ją na urządzeniu docelowym.

Jeśli nie udało Ci się dodać zależności lub uruchomić aplikacji, przerwij działanie i rozwiąż problemy ze środowiskiem dewelopera.

Jeśli podczas kompilacji pojawi się błąd INSTALL_FAILED_INVALID_APK, w Android Studio kliknij kolejno „Kompilacja” -> „Oczyść projekt”.

Gotowe! Na urządzeniu lub w emulatorze powinna wyświetlić się strona logowania do Shrine. Gdy klikniesz Dalej, na górze pojawi się strona główna Shrine z paskiem aplikacji i siatką zdjęć produktów pod spodem.

Niech górny pasek aplikacji będzie pasował do marki Shrine, zmieniając jego kolor, wysokość i typografię.

3. Zmiana koloru

Ten motyw kolorów został stworzony przez projektanta za pomocą kolorów niestandardowych (widocznych na obrazie poniżej). Zawiera on kolory wybrane z marki Shrine i zastosowane w Material Theme Editor, który rozszerzył je, tworząc pełną paletę. (Te kolory nie pochodzą z palet kolorów Material z 2014 roku).

W edytorze motywów materiałowych są pogrupowane według odcieni oznaczonych numerycznie, w tym od 50, 100, 200, ... do 900 kolorów każdego z nich. Świątynia używa tylko odcieni 50, 100 i 300 z różowej próbki oraz 900 z brązowej próbki.

Zmieńmy kolor górnego paska aplikacji, aby pasował do schematu kolorów.

Ustawianie koloru ciemnego i koloru akcentu

W pliku colors.xml zmodyfikuj te wiersze: Atrybut colorAccent steruje kolorem górnego paska aplikacji, a atrybut colorPrimaryDark określa jego kolor.

colors.xml

<color name="colorPrimaryDark">#FBB8AC</color>
<color name="colorAccent">#FEDBD0</color>

Aby używać ciemnych ikon na pasku stanu, dodaj do motywu aplikacji Shrine te elementy:

styles.xml

<item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

Wskazówka: musisz zaimportować przestrzeń nazw narzędzi w tagu <resource>, jak pokazano poniżej:

<resources xmlns:tools="http://schemas.android.com/tools">

Wartości colors.xml i styles.xml powinny wyglądać tak:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="toolbarIconColor">#FFFFFF</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

W colors.xml dodaj nowy zestaw zasobów kolorów textColorPrimary o wartości #442C2E i zaktualizuj atrybut toolbarIconColor, aby odwoływał się do koloru textColorPrimary.

Zaktualizuj plik styles.xml, aby ustawić

do zdefiniowanego właśnie koloru textColorPrimary.

I jeszcze jedno: ustaw atrybut android:theme w stylu Widget.Shrine.Toolbar na Theme.Shrine.

Ustawienie wartości android:textColorPrimary w ustawieniu Theme.Shrine spowoduje zastosowanie stylu do tekstu we wszystkich elementach, w tym do paska aplikacji na górze ekranu i ikon na tym pasku.

colors.xml i styles.xml powinny wyglądać tak:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   </style>

</resources>

Twórz i uruchamiaj. Siatka produktów powinna teraz wyglądać tak:

Zmieńmy styl ekranu logowania, aby pasował do naszego schematu kolorów.

Nadawanie stylów polach tekstowym

Zmieńmy tekst na stronie logowania na obrysowany i użyjmy lepszych kolorów w układzie.

Dodaj do pliku colors.xml ten zasób koloru:

colors.xml

<color name="textInputOutlineColor">#FBB8AC</color>

Dodaj 2 nowe style w sekcji styles.xml:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
   <item name="hintTextColor">@color/textColorPrimary</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="boxStrokeColor">@color/textInputOutlineColor</item>
</style>

<style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Na koniec ustaw atrybut stylu w obu komponentach XML TextInputLayout w komponencie shr_login_fragment.xml na nowy styl:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_username">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="text"
       android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/password_text_input"
   style="@style/Widget.Shrine.TextInputLayout"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/shr_hint_password"
   app:errorEnabled="true">

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/password_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

Określanie stylu kolorów przycisków

Na koniec sformatuj kolory przycisków na stronie logowania. Dodaj do urządzenia styles.xml te style:

styles.xml

<style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
   <item name="backgroundTint">?attr/colorPrimaryDark</item>
</style>

<style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

Styl Widget.Shrine.Button wykracza poza domyślny styl MaterialButton i zmienia kolor tekstu oraz odcień tła przycisku. Widget.Shrine.Button.TextButton rozszerza domyślny styl tekst MaterialButton i zmienia tylko kolor tekstu.

Ustaw styl Widget.Shrine.Button dla przycisku Dalej, a styl Widget.Shrine.Button.TextButton dla przycisku Anuluj, wykonując te czynności:

shr_login_fragment.xml

<RelativeLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">

   <com.google.android.material.button.MaterialButton
       android:id="@+id/next_button"
       style="@style/Widget.Shrine.Button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentEnd="true"
       android:layout_alignParentRight="true"
       android:text="@string/shr_button_next" />

   <com.google.android.material.button.MaterialButton
       android:id="@+id/cancel_button"
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginEnd="12dp"
       android:layout_marginRight="12dp"
       android:layout_toStartOf="@id/next_button"
       android:layout_toLeftOf="@id/next_button"
       android:text="@string/shr_button_cancel" />

</RelativeLayout>

Zaktualizuj kolor logo Shrine na stronie logowania. Wymaga to wprowadzenia niewielkiej zmiany w możliwości rysowania wektorowego obiektu shr_logo.xml. Otwórz plik drawable i zmień właściwość android:fillAlpha na 1. Element rysowalny powinien wyglądać tak:

shr_logo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="149dp"
   android:height="152dp"
   android:tint="?attr/colorControlNormal"
   android:viewportWidth="149"
   android:viewportHeight="152">
   <path
       android:fillAlpha="1"
       android:fillColor="#DADCE0"
       android:fillType="evenOdd"
       android:pathData="M42.262,0L0,38.653L74.489,151.994L148.977,38.653L106.723,0M46.568,11.11L21.554,33.998L99.007,33.998L99.007,11.11L46.568,11.11ZM110.125,18.174L110.125,33.998L127.416,33.998L110.125,18.174ZM80.048,45.116L80.048,123.296L131.426,45.116L80.048,45.116ZM17.551,45.116L33.976,70.101L68.93,70.101L68.93,45.116L17.551,45.116ZM41.284,81.219L68.93,123.296L68.93,81.219L41.284,81.219Z"
       android:strokeWidth="1"
       android:strokeAlpha="0.4"
       android:strokeColor="#00000000" />
</vector>

Następnie ustaw atrybut android:tint logo <ImageView> w elementach shr_login_fragment.xml na ?android:attr/textColorPrimary w ten sposób:

shr_login_fragment.xml

<ImageView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="48dp"
   android:layout_marginBottom="16dp"
   android:tint="?android:attr/textColorPrimary"
   app:srcCompat="@drawable/shr_logo" />

Twórz i uruchamiaj. Ekran logowania powinien wyglądać tak:

Uwagi dotyczące kolorów i motywów:

• Możesz dostosować kolory w interfejsie, aby lepiej wyrazić swoją markę.
• Utwórz paletę kolorów, zaczynając od 2 kolorów (podstawowy i dodatkowy) oraz z jasnych i ciemnych odmian tych kolorów. Możesz też wygenerować palety za pomocą narzędzia palety w stylu Material Design.
• Nie zapomnij o kolorze typografii.
• Upewnij się, że kontrast między kolorem tekstu a tłem jest odpowiedni (3:1 w przypadku dużych czcionek, 4,5:1 w przypadku małych).

4. Modyfikowanie typografii i stylów etykiet

Oprócz zmian kolorów projektant wprowadził też do witryny określoną typografię. Dodajmy też ten element do górnego paska aplikacji.

Nadawanie stylu górnemu paskowi aplikacji

Dostosuj wygląd tekstu u góry paska aplikacji, aby pasował do specyfikacji otrzymanej przez projektanta. Dodaj do styles.xml ten styl wyglądu tekstu i ustaw właściwość titleTextAppearance, aby odwoływać się do tego stylu w stylu Widget.Shrine.Toolbar.

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">@style/Theme.Shrine</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

<style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
   <item name="android:textSize">16sp</item>
</style>

Wartości colors.xml i styles.xml powinny wyglądać tak:

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#E0E0E0</color>
   <color name="colorPrimaryDark">#FBB8AC</color>
   <color name="colorAccent">#FEDBD0</color>
   <color name="textColorPrimary">#442C2E</color>
   <color name="toolbarIconColor">@color/textColorPrimary</color>
   <color name="loginPageBackgroundColor">#FFFFFF</color>
   <color name="productGridBackgroundColor">#FFFFFF</color>
   <color name="textInputOutlineColor">#FBB8AC</color>
</resources>

styles.xml

<resources xmlns:android="http://schemas.android.com/tools">

   <!-- Base application theme. -->
   <style name="Theme.Shrine" parent="Theme.MaterialComponents.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
       <item name="android:textColorPrimary">@color/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
       <item name="hintTextAppearance">@style/TextAppearance.Shrine.TextInputLayout.HintText</item>
       <item name="hintTextColor">@color/textColorPrimary</item>
       <item name="android:paddingBottom">8dp</item>
       <item name="boxStrokeColor">@color/textInputOutlineColor</item>
   </style>

   <style name="TextAppearance.Shrine.TextInputLayout.HintText" parent="TextAppearance.MaterialComponents.Subtitle2">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Button" parent="Widget.MaterialComponents.Button">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
       <item name="backgroundTint">?attr/colorPrimaryDark</item>
   </style>

   <style name="Widget.Shrine.Button.TextButton" parent="Widget.MaterialComponents.Button.TextButton">
       <item name="android:textColor">?android:attr/textColorPrimary</item>
   </style>

   <style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
       <item name="android:background">?attr/colorAccent</item>
       <item name="android:theme">@style/Theme.Shrine</item>
       <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
       <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
   </style>

   <style name="TextAppearance.Shrine.Toolbar" parent="TextAppearance.MaterialComponents.Button">
       <item name="android:textSize">16sp</item>
   </style>

</resources>

Określanie stylu etykiet

Etykiety na karcie produktu będą stylizowane tak, aby tekst miał odpowiedni wygląd i był wyśrodkowany poziomo na karcie.

Zmień typografię na etykiecie tytułu z textAppearanceHeadline6 na textAppearanceSubtitle2 w ten sposób:

shr_product_card.xml

<TextView
   android:id="@+id/product_title"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@string/shr_product_title"
   android:textAppearance="?attr/textAppearanceSubtitle2" />

Aby wyśrodkować etykiety obrazów, zmień etykietę <TextView> w elemencie shr_product_card.xml, aby ustawić atrybut android:textAlignment="center":

shr_product_card.xml

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:padding="16dp">

   <TextView
       android:id="@+id/product_title"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_title"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceSubtitle2" />

   <TextView
       android:id="@+id/product_price"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/shr_product_description"
       android:textAlignment="center"
       android:textAppearance="?attr/textAppearanceBody2" />
</LinearLayout>

Utwórz i uruchom. Twój ekran siatki usług powinien teraz wyglądać tak:

Zmieńmy typografię na ekranie logowania, aby pasowała do reszty.

Zmiana kroju czcionki na ekranie logowania

W styles.xml dodaj ten styl:

styles.xml

<style name="TextAppearance.Shrine.Title" parent="TextAppearance.MaterialComponents.Headline4">
   <item name="textAllCaps">true</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

W shr_login_fragment.xml ustaw nowy styl dla tytułu „SHRINE” (<TextView>) (i usuń atrybuty textAllCaps i textSize, które tam się znajdują):

shr_login_fragment.xml

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginBottom="132dp"
   android:text="@string/shr_app_name"
   android:textAppearance="@style/TextAppearance.Shrine.Title" />

Twórz i uruchamiaj. Twój ekran logowania powinien teraz wyglądać tak:

Uwagi na temat typografii:

• Wybierając czcionki do małych rozmiarów i tekstu głównego, zwróć uwagę na czytelność, a nie na styl.
• Czcionki wyświetlawcze, używane do dużych czcionek i tytułów, powinny wyrażać lub podkreślać markę.

5. Dostosowanie wysokości

Po określeniu stylu strony i określeniu koloru i typografii pasującej do Shrine przyjrzyjmy się kartom przedstawiającym produkty Shrine. Obecnie są one umieszczone na białej powierzchni pod panelem nawigacyjnym aplikacji. Aby zwrócić uwagę na produkty, należy je bardziej wyróżnić.

Zmiana wyeksponowania siatki produktów

Aby wyglądało to tak, jakby treści znajdowały się na arkuszu unoszącym się nad górnym paskiem aplikacji, zmień poziomy tego paska. Dodaj atrybut app:elevation do elementu AppBarLayout i atrybut android:elevation do komponentów XML NestedScrollView w shr_product_grid_fragment.xml w ten sposób:

shr_product_grid_fragment.xml

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:elevation="0dp">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/app_bar"
       style="@style/Widget.Shrine.Toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:navigationIcon="@drawable/shr_menu"
       app:title="@string/shr_app_name" />
</com.google.android.material.appbar.AppBarLayout>

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:paddingStart="@dimen/shr_product_grid_spacing"
   android:paddingEnd="@dimen/shr_product_grid_spacing"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

</androidx.core.widget.NestedScrollView>

Zmienianie wysokości (i koloru) karty

Dostosuj wysokość każdej karty, zmieniając app:cardElevation w shr_product_card.xml z 2dp na 0dp. Zmień też app:cardBackgroundColor na @android:color/transparent.

shr_product_card.xml

<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:cardBackgroundColor="@android:color/transparent"
   app:cardElevation="0dp"
   app:cardPreventCornerOverlap="true">

Zobacz. Zmieniono wysokość każdej karty na stronie z siatką produktów.

Zmienianie wysokości przycisku Dalej

W narzędziu styles.xml dodaj do stylu Widget.Shrine.Button tę właściwość:

styles.xml

<item name="android:stateListAnimator" tools:ignore="NewApi">
    @animator/shr_next_button_state_list_anim
</item>

Uwaga: jeśli podczas pisania tego kodu Android Studio napotka błędy Nie można rozwiązać symbolu, naciśnij Alt + Enter lub (Option + Return na Macu), aby zaimportować brakujące symbole.

Ustawienie android:stateListAnimator w stylu Button powoduje, że przycisk „Dalej” będzie używać udostępnionego przez nas animatora.

Twórz i uruchamiaj. Twój ekran logowania powinien teraz wyglądać tak:

Uwagi dotyczące wysokości:

• Wszystkie powierzchnie i komponenty w stylu Material Design mają określone wartości wysokości.
• Dzielenie miejsca, w którym kończy się jedna powierzchnia, a zaczyna się na drugiej, jest określane przez krawędzie powierzchni.
• Różnicę wysokości między powierzchniami można wyrazić za pomocą przyciemnionego lub rozjaśnionego tła albo cieni.
• Powierzchnie znajdujące się przed innymi platformami zwykle zawierają ważniejsze treści.

6. Zmienianie układu

Zmieńmy układ, aby karty wyświetlały się w różnych formatach i rozmiarach, dzięki czemu każda z nich będzie wyglądać inaczej.

Używanie przesuniętych adapterów RecyclerView

W pakiecie staggeredgridlayout znajduje się nowy adapter RecyclerView, który wyświetla asymetryczny układ kart z przesunięciem, przeznaczony do przewijania w poziomie. Możesz samodzielnie zapoznać się z tym kodem, ale nie będziemy omawiać jego implementacji.

Aby używać tego nowego adaptera, zmodyfikuj metodę onCreateView() w narzędziu ProductGridFragment.kt. Zastąp blok kodu po komentarzu „skonfiguruj RecyclerView” tym:

ProductGridFragment.kt

// Set up the RecyclerView
view.recycler_view.setHasFixedSize(true)
val gridLayoutManager = GridLayoutManager(context, 2, RecyclerView.HORIZONTAL, false)
gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
   override fun getSpanSize(position: Int): Int {
       return if (position % 3 == 2) 2 else 1
   }
}
view.recycler_view.layoutManager = gridLayoutManager
val adapter = StaggeredProductCardRecyclerViewAdapter(
       ProductEntry.initProductEntryList(resources))
view.recycler_view.adapter = adapter
val largePadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_large)
val smallPadding = resources.getDimensionPixelSize(R.dimen.shr_staggered_product_grid_spacing_small)
view.recycler_view.addItemDecoration(ProductGridItemDecoration(largePadding, smallPadding))

Musimy też wprowadzić niewielką zmianę w komponencie shr_product_grid_fragment.xml, aby usunąć wypełnienie z komponentu NestedScrollView. W tym celu:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   android:elevation="6dp">

Na koniec dostosujemy wypełnienie karty w ramach RecyclerView, modyfikując ProductGridItemDecoration.kt. Zmodyfikuj metodę getItemOffsets() metody ProductGridItemDecoration.kt w ten sposób:

ProductGridItemDecoration.kt

override fun getItemOffsets(outRect: Rect, view: View,
                           parent: RecyclerView, state: RecyclerView.State?) {
   outRect.left = smallPadding
   outRect.right = largePadding
}

Utwórz i uruchom. Elementy siatki produktów powinny być teraz rozłożone w czasie:

7. Wypróbuj inny motyw

Kolory to skuteczny sposób zaprezentowania marki, a mała zmiana koloru może mieć duży wpływ na wrażenia użytkownika. Aby to sprawdzić, zobaczmy, jak wyglądałaby aplikacja Shrine, gdyby kolorystyka marki była zupełnie inna.

Modyfikowanie stylów i kolorów

W aplikacji styles.xml dodaj ten nowy motyw:

styles.xml

<style name="Theme.Shrine.Autumn" parent="Theme.Shrine">
   <item name="colorPrimary">#FFCF44</item>
   <item name="colorPrimaryDark">#FD9725</item>
   <item name="colorAccent">#FD9725</item>
   <item name="colorOnPrimary">#FFFFFF</item>
   <item name="colorError">#FD9725</item>
</style>

W aplikacji AndroidManifest.xml użyj tego nowego motywu:

AndroidManifest.xml

<application
   android:allowBackup="true"
   android:icon="@mipmap/ic_launcher"
   android:label="@string/shr_app_name"
   android:roundIcon="@mipmap/ic_launcher_round"
   android:supportsRtl="true"
  android:name="com.google.codelabs.mdc.kotlin.shrine.application.ShrineApplication"
   android:theme="@style/Theme.Shrine.Autumn">
   <activity android:name=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />

           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity>
</application>

Zmień kolor ikony paska narzędzi w sekcji colors.xml, jak pokazano poniżej:

colors.xml

<color name="toolbarIconColor">#FFFFFF</color>

Następnie ustaw atrybut android:theme stylu paska narzędzi, aby odwoływał się do bieżącego motywu za pomocą atrybutu „?theme”, zamiast kodować go na stałe:

styles.xml

<style name="Widget.Shrine.Toolbar" parent="Widget.AppCompat.Toolbar">
   <item name="android:background">?attr/colorAccent</item>
   <item name="android:theme">?theme</item>
   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
   <item name="titleTextAppearance">@style/TextAppearance.Shrine.Toolbar</item>
</style>

Następnie rozjaśnij kolor tekstu wskazówki w polach tekstowych na ekranie logowania. Dodaj atrybut android:textColorHint do stylu pól tekstowych:

styles.xml

<style name="Widget.Shrine.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
   <item name="hintTextAppearance">
@style/TextAppearance.Shrine.TextInputLayout.HintText
</item>
   <item name="android:paddingBottom">8dp</item>
   <item name="android:textColorHint">?attr/colorPrimaryDark</item>
</style>

Twórz i uruchamiaj. Nowy motyw powinien się teraz wyświetlić, aby można było wyświetlić jego podgląd.

Przed przejściem do MDC-104 przywróć kod zmieniony w tej sekcji.

8. Podsumowanie

Masz już aplikację, która przypomina specyfikację projektowaną przez Twojego projektanta.

Ukończoną aplikację MDC 103 można pobrać, korzystając z gotowego ćwiczenia Codelab lub wyodrębniając ukończoną wersję tego ćwiczenia za pomocą git: git checkout 103-complete.

Możesz przetestować swoją wersję aplikacji w porównaniu z ukończoną wersją aplikacji.

Dalsze kroki

Zastosowano następujące komponenty MDC: motyw, typografia i wysokość. Więcej komponentów i podsystemów znajdziesz w [bibliotece MDC Web].

Co zrobić, jeśli planowany projekt aplikacji zawiera elementy, które nie mają komponentów w bibliotece MDC? W szkoleniu MDC-104: Komponenty zaawansowane w ramach Material Design omówimy tworzenie komponentów niestandardowych za pomocą biblioteki MDC w celu uzyskania określonego wyglądu.

Udało mi się ukończyć to ćwiczenie w rozsądnym czasie i z minimalnym wysiłkiem

Całkowicie się zgadzam Zgadzam się Nie mam zdania Nie zgadzam się Całkowicie się nie zgadzam

Chcę nadal używać komponentów Material Components

Zdecydowanie się zgadzam Zdecydowanie się zgadzam Nie mam zdania Nie zgadzam się Zdecydowanie się nie zgadzam