1. Wprowadzenie
Komponenty Material (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 laboratorium kodowania 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 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 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ę Codelabs
Aplikacja startowa znajduje się w katalogu material-components-android-codelabs-111-starter/kotlin. 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 wybierz kotlin –> shipping (lub wyszukaj na komputerze shipping), aby otworzyć projekt Shipping.
- Poczekaj chwilę, aż Android Studio utworzy i zsynchronizuje projekt. Wskaźniki aktywności u dołu 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.
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.
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-alpha05'
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.TextInputEditText
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.kt zaktualizuj onCreate(), aby sprawdzić wprowadzony tekst i w razie potrzeby ustawić błędy. Powinno to wyglądać mniej więcej tak:
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = 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 Material automatycznie rozszerza zwykłe przyciski do przycisków 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 kreski
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ć ich 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.