1. Wprowadzenie
Komponenty Material Design (MDC) pomagają deweloperom wdrażać Material Design. MDC zostało stworzone przez zespół inżynierów i projektantów UX w Google. Zawiera dziesiątki atrakcyjnych i funkcjonalnych komponentów interfejsu, które są dostępne na platformach Android, iOS, internetowej i Flutter.material.io/develop |
Material Components for Android (MDC Android) to nie jest nowy system ani framework, który wymaga zmiany paradygmatu w aplikacji. MDC Android jest oparty na tych samych klasach i interfejsach API, które znasz już w Androidzie, np. przyciskach i polach tekstowych AppCompat. Komponenty udostępniane przez MDC Android można stosować w miarę potrzeb i natychmiast ulepszać projekt istniejącej aplikacji.
Co utworzysz
W tym ćwiczeniu zastąpisz niektóre istniejące komponenty w formularzu nowymi komponentami z MDC.
Komponenty MDC-Android w tym ćwiczeniu
- Pola tekstowe
- Przyciski
- Menu
Czego potrzebujesz
- Podstawowa wiedza o programowaniu na Androida
- Android Studio (jeśli nie masz jeszcze tego środowiska, pobierz je tutaj).
- emulator lub urządzenie z Androidem (dostępne w Androidzie Studio);
- Przykładowy kod (patrz następny krok)
Jak oceniasz swoje doświadczenie w tworzeniu aplikacji na Androida?
2. Konfigurowanie środowiska programistycznego
Pobierz aplikację do ćwiczeń z programowania
Aplikacja startowa znajduje się w katalogu material-components-android-codelabs-111-starter/java. Zanim zaczniesz, cd do tego katalogu.
...lub sklonuj go z GitHub
Aby skopiować 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 111-starter
Wczytaj kod startowy w Android Studio
- 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 kliknij java -> shipping (lub wyszukaj na komputerze shipping), aby otworzyć projekt Shipping.
- 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.
- 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.
Importowanie MDC-Androida
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'
Uruchom aplikację startową
|
|
Gotowe! Powinna być widoczna aplikacja i jej formularz.
3. Zaktualizuj pola tekstowe.
Pola tekstowe Material Design są znacznie bardziej użyteczne niż zwykłe pola tekstowe. Określając strefę kliknięcia za pomocą konturu lub wypełnienia tła, zwiększasz prawdopodobieństwo, że użytkownicy wejdą w interakcję z formularzem lub zidentyfikują pola tekstowe w bardziej skomplikowanych treściach.
Zastępowanie stylów pól tekstowych
W shipping_info_activity.xml dodaj ten styl do wszystkich komponentów XML TextInputLayout:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Każdy element TextInputLayout powinien wyglądać tak:
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
Kompilowanie i uruchamianie:
Wszystkie pola tekstowe zostały zaktualizowane, aby korzystać z nowszych projektów w MDC.
Dodawanie błędu
Pola tekstowe MDC mają wbudowaną prezentację błędów. MDC dodaje czerwony tekst pod polem tekstowym i aktualizuje dekoracje, aby również były czerwone.
W ShippingInfoActivity.java zaktualizuj metodę onCreate() w ten sposób:
ShippingInfoActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.shipping_info_activity);
View rootView = findViewById(android.R.id.content);
final List<TextInputLayout> textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout.class);
Button button = findViewById(R.id.save_button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
boolean noErrors = true;
for (TextInputLayout textInputLayout : textInputLayouts) {
String editTextString = textInputLayout.getEditText().getText().toString();
if (editTextString.isEmpty()) {
textInputLayout.setError(getResources().getString(R.string.error_string));
noErrors = false;
} else {
textInputLayout.setError(null);
}
}
if (noErrors) {
// All fields are valid!
}
}
});
}
Skompiluj i uruchom. Kliknij ZAPISZ, ale pozostaw co najmniej 1 pole tekstowe puste:
Puste pola tekstowe są czerwone i mają pod sobą tekst błędu.
4. Aktualizowanie przycisku
MDC ma przyciski z:
- Kręgi atramentu
- Zaokrąglone narożniki
- Obsługa motywów
- Układ i typografia dopracowane w każdym pikselu
- Oparte na klasie AppCompatButton (standardowej klasie przycisków Androida), więc wiesz, jak ich używać w kodzie.
Opcjonalnie zastąp klasę przycisku
Domyślnie biblioteka materiałów automatycznie przekształca zwykłe przyciski w przyciski MDC. Możesz jednak opcjonalnie zastąpić wszystkie odwołania do klasy Button klasą MaterialButton, aby uzyskać dostęp do dodatkowych metod dostępnych tylko w klasie MaterialButton, takich jak zmiana promienia zaokrąglenia. Przyciski MDC to proste komponenty typu „plug and play”. Wystarczy zastąpić nazwę komponentu XML Button nazwą MaterialButton i zastosować domyślny styl MaterialButton do elementu MaterialButton.
W sekcji shipping_info_activity.xml zmień przycisk z:
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Do:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Kompilowanie i uruchamianie:
5. Dodaj kartę
MaterialCardView to komponent oparty na CardView, który zawiera:
- Poprawianie wysokości i stylu
- Atrybuty grubości i koloru konturu
Umieszczanie treści w karcie
Owiń element LinearLayout zawierający treść elementem shipping_info_activity.xml z komponentem MaterialCardView w ten sposób:
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
Skompiluj i uruchom. Cały formularz powinien być umieszczony na karcie:
Komponent Material Card View to znany, ale odświeżony sposób na łatwe umieszczenie treści na karcie.
6. Podsumowanie
Zastąpiono niektóre typowe komponenty, aby od razu pokazać wartość: pola tekstowe, przyciski i karty. Nie trzeba było przy tym całkowicie przeprojektowywać aplikacji. Inne komponenty też mogą mieć duże znaczenie, np. górny pasek aplikacji i układ kart.
Dalsze kroki
Więcej komponentów MDC-Android znajdziesz w katalogu widżetów na Androida.