1. Wprowadzenie
Komponenty Material Design (MDC) pomagają deweloperom wdrażać Material Design. MDC, stworzone przez zespół inżynierów i projektantów UX w Google, obejmuje dziesiątki pięknych i funkcjonalnych komponentów interfejsu. Jest dostępne na Androida, iOS, internet i Fluttera.material.io/develop |
W ćwiczeniu MDC-103 dostosowaliśmy kolor, wysokość i typografię komponentów Material Design (MDC), aby nadać aplikacji odpowiedni styl.
Komponent w systemie Material Design wykonuje zestaw wstępnie zdefiniowanych zadań i ma określone cechy, np. przycisk. Przycisk to jednak nie tylko sposób na wykonanie działania przez użytkownika, ale też wizualne wyrażenie kształtu, rozmiaru i koloru, które informuje użytkownika, że jest interaktywny i że po dotknięciu lub kliknięciu coś się stanie.
Wytyczne Material Design opisują komponenty z punktu widzenia projektanta. Opisują one szeroki zakres podstawowych funkcji dostępnych na różnych platformach, a także elementy anatomiczne, z których składa się każdy komponent. Na przykład tło zawiera warstwę tylną i jej zawartość, warstwę przednią i jej zawartość, reguły ruchu oraz opcje wyświetlania. Każdy z tych komponentów można dostosować do potrzeb, przypadków użycia i treści każdej aplikacji. Elementy te to w większości tradycyjne widoki, elementy sterujące i funkcje z pakietu SDK platformy.
Wytyczne Material Design wymieniają wiele komponentów, ale nie wszystkie z nich nadają się do ponownego wykorzystania kodu, dlatego nie znajdziesz ich w MDC. Możesz samodzielnie tworzyć te elementy, aby nadać aplikacji niestandardowy styl, używając tradycyjnego kodu.
Co utworzysz
W tym ćwiczeniu dodasz tło do Shrine. Będzie ono filtrować produkty wyświetlane w asymetrycznej siatce według kategorii. Użyjesz:
- Kształtu
- Ruchu
- Tradycyjnych klas pakietu Android SDK
Komponenty MDC-Android w tym ćwiczeniu
- Kształt
Czego potrzebujesz
- Podstawowa wiedza na temat tworzenia aplikacji na Androida
- Android Studio (jeśli go nie masz, pobierz go 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?
2. Konfigurowanie środowiska programistycznego
Kontynuujesz ćwiczenie MDC-103?
Jeśli udało Ci się ukończyć ćwiczenie MDC-103, Twój kod powinien być gotowy do tego ćwiczenia. Pomiń krok 3.
Zaczynasz od zera?
Pobierz aplikację początkową ćwiczenia w Codelabs
Aplikacja startowa znajduje się w katalogu material-components-android-codelabs-104-starter/kotlin. Zanim zaczniesz, przejdź do tego katalogu za pomocą polecenia cd.
...lub sklonuj ją z GitHuba
Aby sklonować to ćwiczenie z GitHuba, uruchom te polecenia:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 104-starter
Wczytaj kod startowy w Android Studio
- Gdy kreator konfiguracji zakończy działanie i pojawi się okno Welcome to Android Studio (Witamy w Android Studio), kliknij Open an existing Android Studio project (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.
- Poczekaj chwilę, aż Android Studio skompiluje i zsynchronizuje projekt. Wskaźniki aktywności znajdują się u dołu okna Android Studio.
- W tym momencie Android Studio może zgłosić błędy kompilacji, ponieważ brakuje Ci pakietu Android SDK 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 narzędzia, i zsynchronizuj projekt.
Dodaj zależności projektu
Projekt wymaga zależności od biblioteki obsługi MDC Android. Pobrany przykładowy kod powinien już zawierać tę zależność, ale warto wykonać te czynności, aby się upewnić.
- Otwórz plik
build.gradlemodułuappi sprawdź, czy blokdependencieszawiera zależność od MDC Android:
api 'com.google.android.material:material:1.1.0-alpha06'
- (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ą
|
Gotowe. Na urządzeniu powinna być widoczna aplikacja Shrine.
3. Dodaj menu tła
Tło to najbardziej oddalona powierzchnia aplikacji, która pojawia się za całą inną zawartością i komponentami. Składa się z 2 powierzchni: warstwy tylnej (która wyświetla działania i filtry) oraz warstwy przedniej (która wyświetla treści). Tło może służyć do wyświetlania interaktywnych informacji i działań, takich jak nawigacja czy filtry treści.
Ukryj zawartość siatki
W pliku shr_product_grid_fragment.xml dodaj atrybut android:visibility="gone" do elementu NestedScrollView, aby tymczasowo usunąć zawartość produktu:
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"
android:elevation="8dp"
android:visibility="gone"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
W tym regionie zainstalujemy tło. Aby uniknąć podziału między górnym paskiem aplikacji a treścią menu, która pojawia się na tle, ustawimy tło w tym samym kolorze co górny pasek aplikacji.
W pliku shr_product_grid_fragment.xml dodaj ten kod jako pierwszy element w głównym elemencie FrameLayout, przed elementem AppBarLayout:
shr_product_grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="100dp"
android:paddingBottom="100dp">
</LinearLayout>
W pliku styles.xml dodaj ten kod:
styles.xml
<style name="Widget.Shrine.Backdrop" parent="">
<item name="android:background">?attr/colorAccent</item>
</style>
Brawo! Udało Ci się dodać piękne tło do interfejsu Shrine. Następnie dodamy menu.
Dodaj menu
Menu to w zasadzie lista przycisków tekstowych. Dodamy je tutaj.
W katalogu res -> layout utwórz nowy plik układu o nazwie shr_backdrop.xml i dodaj ten kod:
shr_backdrop.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_featured_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_apartment_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_accessories_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_shoes_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_tops_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_bottoms_label" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_dresses_label" />
<View
android:layout_width="56dp"
android:layout_height="1dp"
android:layout_margin="16dp"
android:background="?android:attr/textColorPrimary" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.Shrine.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/shr_account_label" />
</merge>
Dodaj tę listę do elementu LinearLayout, który został dodany w pliku shr_product_grid_fragment.xml, używając tagu <include>:
shr_product_grid_fragment.xml
<LinearLayout
style="@style/Widget.Shrine.Backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="88dp">
<include layout="@layout/shr_backdrop" />
</LinearLayout>
Skompiluj i uruchom. Ekran główny powinien wyglądać tak:
Tło zostało skonfigurowane. Przywróćmy zawartość, którą wcześniej ukryliśmy.
4. Dodaj kształt
Zanim w tym ćwiczeniu wprowadziliśmy jakiekolwiek zmiany w Shrine, główna zawartość produktu znajdowała się na najbardziej oddalonej powierzchni. Dzięki dodaniu tła ta zawartość jest teraz bardziej widoczna, ponieważ pojawia się przed tym tłem.
Dodaj nową warstwę
Powinniśmy ponownie wyświetlić warstwę siatki produktów. Usuń atrybut android:visibility="gone" z elementu NestedScrollView:
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"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
Nadajmy warstwie przedniej styl z wycięciem w lewym górnym rogu. Material Design określa ten typ dostosowania jako kształt. Powierzchnie Material Design mogą być wyświetlane w różnych kształtach. Kształty podkreślają i nadają styl powierzchniom oraz mogą służyć do wyrażania marki. Kształty Material Design mogą mieć zaokrąglone lub kanciaste rogi i krawędzie oraz dowolną liczbę boków. Mogą być symetryczne lub nieregularne.
Dodaj kształt
Zmień kształt siatki. Udostępniliśmy niestandardowe tło kształtu, ale kształt wyświetla się prawidłowo tylko na Androidzie Marshmallow i nowszych wersjach. Możemy ustawić tło shr_product_grid_background_shape na elemencie NestedScrollView tylko w przypadku Androida Marshmallow i nowszych wersji. Najpierw dodaj do elementu NestedScrollView atrybut id, abyśmy mogli się do niego odwoływać w kodzie:
shr_product_grid_fragment.xml
<androidx.core.widget.NestedScrollView
android:id="@+id/product_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:background="@color/productGridBackgroundColor"
android:elevation="8dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
Następnie ustaw tło programowo w pliku ProductGridFragment.kt. Dodaj ten kod, aby ustawić tło na końcu funkcji onCreateView(), tuż przed instrukcją powrotu:
ProductGridFragment.kt
// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
view.product_grid.background = context?.getDrawable(R.drawable.shr_product_grid_background_shape)
}
Na koniec zaktualizujemy zasób koloru productGridBackgroundColor (używany też przez niestandardowe tło kształtu):
colors.xml
<color name="productGridBackgroundColor">#FFFBFA</color>
Skompiluj i uruchom:
Nadaliśmy głównej powierzchni Shrine niestandardowy kształt. Dzięki wysokości powierzchni użytkownicy mogą zobaczyć, że tuż za białą warstwą przednią coś się znajduje. Dodajmy ruch, aby użytkownicy mogli zobaczyć, co tam jest – menu.
5. Dodaj ruch
Ruch to sposób na ożywienie aplikacji. Ruch może być duży i dramatyczny, subtelny i minimalny lub gdzieś pomiędzy. Rodzaj używanego ruchu powinien być odpowiedni do sytuacji. Ruch stosowany do powtarzających się regularnych działań powinien być niewielki i subtelny, aby nie zajmował zbyt dużo czasu. Inne sytuacje, np. pierwsze otwarcie aplikacji przez użytkownika, mogą być bardziej przyciągające wzrok i mogą pomóc użytkownikowi w korzystaniu z aplikacji.
Dodaj ruch ujawniania do przycisku menu
Ruch to kształt z przodu, który przesuwa się prosto w dół. Udostępniliśmy już detektor kliknięć, który wykona animację przesunięcia arkusza, w pliku NavigationIconClickListener.kt. Możemy ustawić ten detektor kliknięć w funkcji onCreateView() w pliku ProductGridFragement, w sekcji odpowiedzialnej za konfigurowanie paska narzędzi. Dodaj następujący wiersz, aby ustawić detektor kliknięć na ikonie menu paska narzędzi:
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))
Sekcja powinna teraz wyglądać tak:
ProductGridFragment.kt
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))
Skompiluj i uruchom. Naciśnij przycisk menu:
Ponowne naciśnięcie ikony menu nawigacji powinno ją ukryć.
Dostosuj ruch warstwy przedniej
Ruch to świetny sposób na wyrażenie marki. Zobaczmy, jak wygląda animacja ujawniania z inną krzywą czasu.
Zaktualizuj detektor kliknięć w pliku ProductGridFragment.kt, aby przekazać interpolator do detektora kliknięć ikony nawigacji:
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))
To tworzy inny efekt, prawda?
6. Ikona marki
Ikony marki obejmują też znane ikony. Spersonalizujmy ikonę ujawniania i połączmy ją z tytułem, aby uzyskać niepowtarzalny wygląd marki.
Zmień ikonę przycisku menu
Zmień przycisk menu, aby wyświetlał ikonę z motywem diamentu. Zaktualizuj pasek narzędzi w pliku shr_product_grid_fragment.xml, aby używał nowej ikony marki, którą udostępniliśmy (shr_branded_menu), i ustaw atrybuty app:contentInsetStart oraz android:padding, aby pasek narzędzi lepiej pasował do specyfikacji projektanta:
shr_product_grid_fragment.xml
<androidx.appcompat.widget.Toolbar android:id="@+id/app_bar" style="@style/Widget.Shrine.Toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:paddingStart="12dp" android:paddingLeft="12dp" android:paddingEnd="12dp" android:paddingRight="12dp" app:contentInsetStart="0dp" app:navigationIcon="@drawable/shr_branded_menu" app:title="@string/shr_app_name" />
Ponownie zaktualizujemy detektor kliknięć w funkcji onCreateView() w pliku ProductGridFragment.kt, aby pobierał obiekty rysowalne paska narzędzi, gdy menu jest otwarte i gdy jest zamknięte:
ProductGridFragment .kt
// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(
activity!!,
view.product_grid,
AccelerateDecelerateInterpolator(),
ContextCompat.getDrawable(context!!, R.drawable.shr_branded_menu), // Menu open icon
ContextCompat.getDrawable(context!!, R.drawable.shr_close_menu))) // Menu close icon
Skompiluj i uruchom:
Super! Gdy tło można ujawnić, wyświetla się ikona menu w kształcie diamentu. Gdy menu można ukryć, zamiast niej wyświetla się ikona zamknięcia.
7. Podsumowanie
W trakcie tych 4 ćwiczeń dowiedzieliśmy się, jak używać komponentów Material Design do tworzenia unikalnych, eleganckich interfejsów, które wyrażają osobowość i styl marki.
Dalsze kroki
To ćwiczenie, MDC-104, kończy tę serię ćwiczeń. Więcej komponentów w MDC-Android możesz poznać, odwiedzając katalog komponentów MDC-Android.
Aby dodatkowo utrudnić to ćwiczenie, zmodyfikuj aplikację Shrine tak, aby zmieniała obrazy produktów wyświetlane po wybraniu kategorii w menu tła.
Aby dowiedzieć się, jak połączyć tę aplikację z Firebase w celu utworzenia działającego backendu, zapoznaj się z ćwiczeniem Firebase Android.