MDC-101 na Androida: podstawy komponentów Material Design (MDC) (Java)

Komponenty Material (MDC) pomagają deweloperom wdrażać Material Design. MDC to stworzona przez zespół inżynierów i projektantów UX z Google biblioteka zawierająca dziesiątki atrakcyjnych i funkcjonalnych komponentów interfejsu. Jest dostępna na platformy Android, iOS, internet i Flutter. material.io/develop

Czym są Material Design i Material Components na Androida?

Material Design to system tworzenia atrakcyjnych i funkcjonalnych produktów cyfrowych. Łącząc styl, branding, interakcje i animacje w spójny zestaw zasad i komponentów, zespoły produktowe mogą w pełni wykorzystać swój potencjał projektowy.

W przypadku aplikacji na Androida Material Components for Android(MDC Android) łączy projektowanie i inżynierię z biblioteką komponentów, aby zapewnić spójność w aplikacji. Wraz z rozwojem systemu Material Design te komponenty są aktualizowane, aby zapewnić spójną implementację z dokładnością do piksela i zgodność ze standardami Google dotyczącymi tworzenia interfejsów. MDC jest też dostępny w przypadku internetu, iOS i Fluttera.

W tym ćwiczeniu z programowania utworzysz stronę logowania za pomocą kilku komponentów MDC Androida.

Co utworzysz

Te warsztaty to pierwsze z 4 części, które pomogą Ci w tworzeniu aplikacji o nazwie Shrine. Jest to aplikacja e-commerce na Androida, która służy do sprzedaży odzieży i artykułów gospodarstwa domowego. Dowiesz się z niego, jak dostosowywać komponenty, aby odzwierciedlały dowolną markę lub styl przy użyciu MDC-Android.

W tym ćwiczeniu utworzysz stronę logowania do aplikacji Shrine, która będzie zawierać:

• Dwa pola tekstowe: jedno do wpisania nazwy użytkownika, a drugie do wpisania hasła.
• 2 przyciski: „Anuluj” i „Dalej”.
• Nazwa aplikacji (Shrine)
• Obraz logo Shrine

Powiązane codelaby znajdziesz na tych stronach:

• MDC 102. Struktura i układ Material Design
• MDC 103. Motywy Material Design z użyciem kolorów, kształtów, wysokości i rodzajów czcionek
• MDC 104: zaawansowane komponenty Material Design

Po ukończeniu MDC 104 utworzysz aplikację na Androida, która będzie wyglądać tak:

Komponenty MDC Android użyte w tym kursie

• Pole tekstowe
• Przycisk

W tym ćwiczeniu z programowania użyjesz domyślnych komponentów udostępnianych przez MDC Android. Dowiesz się, jak je dostosować, w MDC 103: Motywy Material Design – kolor, kształt, wysokość i typ.

Czego potrzebujesz

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

Jak oceniasz swoje doświadczenie w tworzeniu aplikacji na Androida?

Początkujący Średnio zaawansowany Zaawansowany

Uruchamianie Androida Studio

Po otwarciu Android Studio powinno się wyświetlić okno „Welcome to Android Studio” (Witamy w Android Studio). Jeśli jednak uruchamiasz Android Studio po raz pierwszy, wykonaj czynności opisane w Kreatorze konfiguracji Androida Studio, używając wartości domyślnych. Pobranie i zainstalowanie niezbędnych plików może potrwać kilka minut, więc możesz pozostawić ten proces w tle i przejść do następnej sekcji.

Pobieranie aplikacji do ćwiczeń z programowania

Pobierz aplikację startową

Aplikacja startowa znajduje się w katalogu material-components-android-codelabs-101-starter/java.

...lub sklonuj go z GitHub

Aby sklonować ten codelab z GitHuba, uruchom te polecenia:

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

Więcej informacji znajdziesz w artykule Klonowanie repozytorium z GitHub.

Wczytaj kod startowy w Android Studio

1. Gdy kreator konfiguracji zakończy działanie i wyświetli się okno Witamy w Android Studio, kliknij Otwórz istniejący projekt Android Studio. Przejdź do katalogu, w którym został zainstalowany przykładowy kod, i wybierz java –> shrine(lub wyszukaj na komputerze shrine), aby otworzyć projekt Shrine.
2. Poczekaj chwilę, aż Android Studio utworzy i zsynchronizuje projekt. Wskaźniki aktywności w dolnej części okna Android Studio będą pokazywać postęp.
3. W tym momencie Android Studio może zgłosić błędy kompilacji, ponieważ brakuje Ci pakietu SDK Androida lub narzędzi do kompilacji, np. takich jak te pokazane poniżej. Postępuj zgodnie z instrukcjami w Android Studio, aby zainstalować lub zaktualizować te komponenty i zsynchronizować projekt.

Dodawanie zależności projektu

Projekt musi być zależny od biblioteki pomocy MDC na Androida. Pobrany przykładowy kod powinien już zawierać tę zależność, ale warto wykonać poniższe czynności, aby się upewnić.

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

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

2. (Opcjonalnie) W razie potrzeby edytuj plik build.gradle, aby dodać te zależności, i zsynchronizuj 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'
}

Uruchom aplikację startową

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

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

Jeśli podczas kompilacji pojawi się błąd INSTALL_FAILED_INVALID_APK, w Android Studio kliknij kolejno „Build” (Kompilacja) i „Clean Project” (Wyczyść projekt).

Gotowe! Kod początkowy strony logowania Shrine powinien być uruchomiony w emulatorze. Powinna się wyświetlić nazwa „Shrine” i logo Shrine tuż pod nią.

Przyjrzyjmy się kodowi. W przykładowym kodzie udostępniliśmy prostą Fragmentstrukturę nawigacji, która umożliwia wyświetlanie fragmentów i przechodzenie między nimi.

Otwórz plik MainActivity.java w katalogu shrine -> app -> src -> main -> java -> com.google.codelabs.mdc.java.shrine. Powinien zawierać te informacje:

MainActivity.java

package com.google.codelabs.mdc.java.shrine;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;

public class MainActivity extends AppCompatActivity implements NavigationHost {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.shr_main_activity);

       if (savedInstanceState == null) {
           getSupportFragmentManager()
                   .beginTransaction()
                   .add(R.id.container, new LoginFragment())
                   .commit();
       }
   }

   /**
    * Navigate to the given fragment.
    *
    * @param fragment       Fragment to navigate to.
    * @param addToBackstack Whether or not the current fragment should be added to the backstack.
    */
   @Override
   public void navigateTo(Fragment fragment, boolean addToBackstack) {
       FragmentTransaction transaction =
               getSupportFragmentManager()
                       .beginTransaction()
                       .replace(R.id.container, fragment);

       if (addToBackstack) {
           transaction.addToBackStack(null);
       }

       transaction.commit();
   }
}

Ta aktywność wyświetla R.layout.shr_main_activity plik układu zdefiniowany w shr_main_activity.xml.

Możesz to zobaczyć w onCreate(),. MainActivity.java rozpoczyna transakcję Fragment, aby wyświetlić LoginFragment. LoginFragment. Właśnie to zmodyfikujemy w tym ćwiczeniu z programowania. Aktywność implementuje też metodę navigateTo(Fragment) zdefiniowaną w NavigationHost, która umożliwia dowolnemu fragmentowi przejście do innego fragmentu.

Command + kliknięcie (lub Control + kliknięcie) shr_main_activity w pliku aktywności, aby otworzyć plik układu, lub przejdź do pliku układu w app -> res -> layout -> shr_main_activity.xml.

Uwaga: jeśli po otwarciu shr_main_activity.xml zobaczysz podgląd aplikacji zamiast pliku XML, w lewym dolnym rogu panelu przełącz się z karty „Projekt” na kartę „Tekst”. W tym laboratorium będziemy pracować na karcie „Tekst”.

shr_main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity" />

Widzimy tu prosty element <FrameLayout>, który służy jako kontener dla wszystkich fragmentów wyświetlanych przez aktywność. Otwórzmy LoginFragment.java.

LoginFragment.java

package com.google.codelabs.mdc.java.shrine;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;

/**
* Fragment representing the login screen for Shrine.
*/
public class LoginFragment extends Fragment {

   @Override
   public View onCreateView(
           @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       // Inflate the layout for this fragment
       View view = inflater.inflate(R.layout.shr_login_fragment, container, false);

       // Snippet from "Navigate to the next Fragment" section goes here.

       return view;
   }

   // "isPasswordValid" from "Navigate to the next Fragment" section method goes here
}

LoginFragment rozszerza plik układu shr_login_fragment i wyświetla go w onCreateView(). Przyjrzyjmy się plikowi układu shr_login_fragment.xml, aby zobaczyć, jak wygląda strona logowania.

shr_login_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
   android:background="@color/loginPageBackgroundColor"
   tools:context=".LoginFragment">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:clipChildren="false"
       android:clipToPadding="false"
       android:orientation="vertical"
       android:padding="24dp"
       android:paddingTop="16dp">

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

       <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:textAllCaps="true"
           android:textSize="16sp" />

       <!-- Snippet from "Add text fields" section goes here. -->

       <!-- Snippet from "Add buttons" section goes here. -->

   </LinearLayout>
</ScrollView>

Widzimy tu <LinearLayout> z <ImageView> u góry, co oznacza logo „Shrine”.

Następnie znajduje się tag <TextView> reprezentujący etykietę „SHRINE”. Tekst tej etykiety to zasób tekstowy o nazwie @string/shr_app_name. Jeśli klikniesz nazwę zasobu ciągu znaków z naciśniętym klawiszem Command (lub Control) albo otworzysz plik app -> res -> values -> strings.xml, zobaczysz plik strings.xml, w którym zdefiniowane są zasoby ciągu znaków. Gdy w przyszłości dodamy więcej zasobów ciągów tekstowych, będą one zdefiniowane w tym miejscu. Każdy zasób w tym pliku powinien mieć prefiks shr_, aby wskazywać, że jest częścią aplikacji Shrine.

Znasz już kod początkowy, więc teraz zaimplementujmy pierwszy komponent.

Na początek dodamy do strony logowania 2 pola tekstowe, w których użytkownicy będą mogli wpisać nazwę użytkownika i hasło. Użyjemy komponentu MDC Text Field, który ma wbudowaną funkcję wyświetlania pływającej etykiety i komunikatów o błędach.

Pola tekstowe Material Design zostały znacznie ulepszone, aby zapewnić więcej opcji dostosowywania do Twojej marki. Wprowadzone zmiany są oparte na szeroko zakrojonych badaniach dotyczących wygody użytkowników, dzięki czemu są bardziej użyteczne i atrakcyjne wizualnie.

Więcej informacji o nowych polach tekstowych znajdziesz w artykule w wytycznych Material Design.

Dodawanie pliku XML

W sekcji shr_login_fragment.xml dodaj 2 elementy TextInputLayout z elementem podrzędnym TextInputEditText w sekcji <LinearLayout> pod etykietą „SHRINE” <TextView>:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   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"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   android:hint="@string/shr_hint_password">

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

Wskazówka: aby szybko otworzyć plik w Android Studio, kliknij dwukrotnie klawisz Shift, aby wyświetlić pływający pasek wyszukiwania, a następnie wpisz nazwę pliku, który chcesz otworzyć.

Powyższy fragment kodu zawiera 2 pola tekstowe, z których każde składa się z elementu <TextInputLayout> i elementu podrzędnego <TextInputEditText>. Tekst podpowiedzi w każdym polu tekstowym jest określony w atrybucie android:hint.

Dodaliśmy 2 nowe zasoby ciągów znaków dla pola tekstowego – @string/shr_hint_username i @string/shr_hint_password. Otwórz strings.xml, aby wyświetlić te zasoby ciągów znaków.

strings.xml

...
<string name="shr_hint_username">Username</string>
<string name="shr_hint_password">Password</string>
...

Dodawanie weryfikacji danych wejściowych

Komponenty TextInputLayout mają wbudowaną funkcję przekazywania informacji o błędach.

Aby wyświetlać informacje o błędach, wprowadź w pliku shr_login_fragment.xml te zmiany:

• Ustaw atrybut app:errorEnabled na wartość true w elemencie Hasło TextInputLayout. Spowoduje to dodanie dodatkowego dopełnienia komunikatu o błędzie pod polem tekstowym.
• Ustaw atrybut android:inputType na „textPassword” w elemencie Hasło TextInputEditText. Spowoduje to ukrycie wpisanego tekstu w polu hasła.

Po wprowadzeniu tych zmian pola tekstowe w shr_login_fragment.xml powinny wyglądać tak:

shr_login_fragment.xml

<com.google.android.material.textfield.TextInputLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   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"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_margin="4dp"
   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>

Teraz spróbuj uruchomić aplikację. Powinna pojawić się strona z 2 polami tekstowymi: „Nazwa użytkownika” i „Hasło”.

Sprawdź animację etykiety pływającej:

Funkcje pola tekstowego MDC:

• Wyświetlanie wbudowanych informacji o błędach
• Obsługa przełącznika widoczności hasła za pomocą app:passwordToggleEnabled
• Oferowanie wbudowanej funkcji tekstu pomocy za pomocą app:helperText
• Wyświetlanie łącznej i maksymalnej liczby znaków za pomocą app:counterEnabled i app:counterMaxLength

Następnie dodamy do strony logowania 2 przyciski: „Anuluj” i „Dalej”. Użyjemy komponentu MDC Button, który ma wbudowany charakterystyczny efekt fali atramentu Material Design.

Dodawanie pliku XML

W sekcji shr_login_fragment.xml dodaj <RelativeLayout> do <LinearLayout> pod elementami TextInputLayout. Następnie dodaj do elementu <RelativeLayout> 2 elementy <MaterialButton>.

Wynikowy plik XML powinien wyglądać tak:

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"
       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.MaterialComponents.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>

Uwaga: komponent MaterialButton ma domyślny styl kolorowego, podniesionego przycisku. W przypadku tego przycisku Anuluj chcemy jednak, aby był on niepodniesiony i nie wypełniony. Aby to zrobić, stosujemy atrybut style: @style/Widget.MaterialComponents.Button.TextButton.

Znakomicie. Gdy uruchomisz aplikację, po kliknięciu każdego przycisku pojawi się efekt rozchodzącego się atramentu.

Funkcje przycisku MDC:

• Wbudowane domyślne wibracje (MDC Ripple)
• Domyślna wysokość
• Możliwość dostosowania promienia rogu i obrysu

Na koniec dodamy do LoginFragment.java kod Java, aby połączyć przycisk „DALEJ” z innym fragmentem. Zauważysz, że każdy komponent dodany do układu ma przypisany symbol id. Użyjemy tych id, aby odwoływać się do komponentów w naszym kodzie i dodać sprawdzanie błędów oraz nawigację.

Dodajmy prywatną metodę logiczną isPasswordValid w LoginFragment.java pod onCreateView(), która będzie określać, czy hasło jest prawidłowe. Na potrzeby tej wersji demonstracyjnej sprawdzimy tylko, czy hasło ma co najmniej 8 znaków:

LoginFragment.java

/*
   In reality, this will have more complex logic including, but not limited to, actual
   authentication of the username and password.
*/
private boolean isPasswordValid(@Nullable Editable text) {
   return text != null && text.length() >= 8;
}

Następnie dodaj do przycisku „Dalej” odbiornik kliknięć, który ustawia i usuwa błąd na podstawie utworzonej przez nas metody isPasswordValid(). W onCreateView() ten odbiornik kliknięć powinien znajdować się między wierszem inflatora a wierszem return view.

Następnie dodajmy detektor klawiszy do pola hasła TextInputEditText, aby nasłuchiwać zdarzeń klawiszy, które spowodują usunięcie błędu. Ten odbiornik powinien też używać funkcji isPasswordValid(), aby sprawdzić, czy hasło jest prawidłowe. Możesz dodać ten kod bezpośrednio pod elementem nasłuchującym kliknięć w onCreateView().

Metoda onCreateView() powinna teraz wyglądać mniej więcej tak:

LoginFragment.java

@Override
public View onCreateView(
       @NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   // Inflate the layout for this fragment
   View view = inflater.inflate(R.layout.shr_login_fragment, container, false);
   final TextInputLayout passwordTextInput = view.findViewById(R.id.password_text_input);
   final TextInputEditText passwordEditText = view.findViewById(R.id.password_edit_text);
   MaterialButton nextButton = view.findViewById(R.id.next_button);

   // Set an error if the password is less than 8 characters.
   nextButton.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
           if (!isPasswordValid(passwordEditText.getText())) {
               passwordTextInput.setError(getString(R.string.shr_error_password));
           } else {
               passwordTextInput.setError(null); // Clear the error
           }
       }
   });

   // Clear the error once more than 8 characters are typed.
   passwordEditText.setOnKeyListener(new View.OnKeyListener() {
       @Override
       public boolean onKey(View view, int i, KeyEvent keyEvent) {
           if (isPasswordValid(passwordEditText.getText())) {
               passwordTextInput.setError(null); //Clear the error
           }
           return false;
       }
   });
   return view;
}            

Uwaga: jeśli podczas pisania tego kodu Android Studio napotka błędy Cannot resolve symbol, naciśnij Alt + Enter lub Option + Return na Macu, aby zaimportować brakujące symbole.

Teraz możemy przejść do innego fragmentu. Zaktualizuj OnClickListener w onCreateView(), aby przejść do innego fragmentu, gdy weryfikacja błędów zakończy się powodzeniem. Aby to zrobić, dodaj ten wiersz, aby przejść z ProductGridFragment do przypadku else w funkcji obsługi kliknięć:

LoginFragment.java

...
((NavigationHost) getActivity()).navigateTo(new ProductGridFragment(), false); // Navigate to the next Fragment
...

Funkcja obsługi kliknięć powinna teraz wyglądać tak:

LoginFragment.java

...
MaterialButton nextButton = view.findViewById(R.id.next_button);

// Set an error if the password is less than 8 characters.
nextButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
       if (!isPasswordValid(passwordEditText.getText())) {
           passwordTextInput.setError(getString(R.string.shr_error_password));
       } else {
           passwordTextInput.setError(null); // Clear the error
           ((NavigationHost) getActivity()).navigateTo(new ProductGridFragment(), false); // Navigate to the next Fragment
       }
   }
});
...

Ten nowy wiersz kodu wywołuje metodę navigateTo() z MainActivity, aby przejść do nowego fragmentu – ProductGridFragment. Obecnie jest to pusta strona, nad którą będziesz pracować w module MDC-102.

Parametr false w navigateTo() informuje aktywność, aby nie dodawać bieżącego fragmentu do listy wstecznej, dzięki czemu użytkownik nie będzie mógł wrócić do ekranu logowania za pomocą klawisza Wstecz.

Teraz skompiluj aplikację. Kliknij przycisk Dalej.

Udało się! Ten ekran będzie punktem wyjścia do kolejnego modułu, nad którym będziesz pracować w MDC-102.

Korzystając z podstawowego znacznika XML i około 30 wierszy kodu Java, biblioteka Material Components for Android pomogła Ci utworzyć atrakcyjną stronę logowania zgodną z wytycznymi Material Design, która wygląda i działa spójnie na wszystkich urządzeniach.

Gotową aplikację MDC 101 możesz pobrać, kończąc ćwiczenia z programowania, lub sprawdzić 101-complete za pomocą Gita: git checkout 101-complete.

Możesz przetestować swoją wersję strony w porównaniu z wersją ukończoną, otwierając projekt Shrine w tym katalogu w Android Studio i uruchamiając aplikację.

Dalsze kroki

Pole tekstowe i przycisk to 2 podstawowe komponenty biblioteki MDC Android, ale jest ich znacznie więcej. Pozostałe komponenty w MDC Android możesz sprawdzić tutaj. Możesz też zapoznać się z artykułem MDC 102: Material Design Structure and Layout, aby dowiedzieć się więcej o górnym pasku aplikacji, widoku kart i układzie siatki. Dziękujemy za wypróbowanie komponentów Material. Mamy nadzieję, że te ćwiczenia z programowania były przydatne.

Udało mi się ukończyć to ćwiczenie w rozsądnym czasie i przy rozsądnym nakładzie pracy.

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

Chcę nadal korzystać z komponentów Material w przyszłości

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