Komponenty Material Design (MDC) pomagają deweloperom wdrażać Material Design. Firma MDC została stworzona przez zespół inżynierów i projektantów UX w Google. Zawiera ona dziesiątki pięknych i funkcjonalnych elementów interfejsu oraz jest dostępna w aplikacjach na Androida, iOS, internet oraz Flutter. material.io/develop |
W ćwiczeniach z programowania (MDC-103) dostosowałeś kolor, wysokość i typ typografię komponentów MDC (ang. Material Components), tworząc styl aplikacji.
Komponent w systemie Material Design wykonuje zestaw gotowych zadań i ma pewne cechy, np. przycisk. Przycisk jest jednak czymś więcej niż sposobem na wykonanie działania. To również wizualne wyrażenie kształtu, rozmiaru i koloru, informujące użytkownika, że jest ono interaktywne i że coś się stanie po kliknięciu lub kliknięciu.
Wytyczne Material Design opisują komponenty z perspektywy projektanta. Opisują szeroką gamę podstawowych funkcji dostępnych na różnych platformach, a także elementy anatomiczne, z których składają się poszczególne komponenty. Tło zawiera na przykład tylną warstwę wraz z zawartością, przednią warstwę i jej zawartość, reguły ruchu oraz opcje wyświetlania. Każdy z tych komponentów można dostosować do różnych potrzeb i przypadków użycia oraz treści aplikacji. Są to w większości tradycyjne widoki, funkcje i funkcje z Twojego pakietu SDK na platformie.
Wytyczne dotyczące stylu Material Design wymieniły wiele komponentów, ale nie wszystkie są odpowiednie do użycia kodu wielokrotnego użytku, dlatego nie można ich znaleźć w MDC. Możesz je utworzyć samodzielnie, aby uzyskać własny styl aplikacji – wszystko to za pomocą tradycyjnego kodu.
Co stworzysz
W tym ćwiczeniu dodasz tło do świątyni. Spowoduje to przefiltrowanie produktów wyświetlanych w siatce asymetrycznej według kategorii. Będziesz używać:
- Kształt
- Ruch
- Tradycyjne klasy pakietu Android SDK
Komponenty MDC-Android w tym ćwiczeniu z programowania
- Kształt
Czego potrzebujesz
- Podstawowa wiedza na temat programowania Androida
- Android Studio (pobierz go tutaj, jeśli jeszcze go nie masz)
- Emulator lub urządzenie z Androidem (dostępne w Android Studio)
- Przykładowy kod (patrz następny krok)
Jak oceniasz tworzenie aplikacji na Androida?
Kontynuujesz z MDC-103?
Jeśli kod został ukończony w ramach MDC-103, kod będzie gotowy do ćwiczenia. Przejdź do kroku 3.
Zaczynasz od zera?
Pobierz aplikację początkujących z programowania
Aplikacja startowa znajduje się w katalogu material-components-android-codelabs-104-starter/java. Pamiętaj, aby przed wykonaniem czynności umieścić w cd katalog.
...lub skopiuj z GitHuba
Aby skopiować to ćwiczenia z programowania na GitHubie, uruchom następujące polecenia:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 104-starter
Wczytywanie kodu startowego w Android Studio
- Gdy kreator konfiguracji zakończy się i pojawi się okno Witamy w Android Studio, kliknij Otwórz istniejący projekt Android Studio. Przejdź do katalogu, w którym jest zainstalowany przykładowy kod, i wybierz java -> Temple(lub wyszukaj na komputerze hasło sanktuarium), aby otworzyć projekt Shrine.
- Zaczekaj, aż Android Studio skompiluje i zsynchronizuje projekt, na co wskazują wskaźniki aktywności na dole okna Android Studio.
- W tym momencie Android Studio może wyświetlić 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 projekty, a następnie zsynchronizować projekt.
Dodawanie zależności od projektu
Projekt potrzebuje zależności od biblioteki pomocy MDC na Androida. Pobrany przykładowy kod powinien już być widoczny na liście, ale zalecamy wykonanie tych czynności, aby się upewnić.
- Przejdź do pliku
build.gradlemodułuappi upewnij się, że blokdependencieszawiera zależność w MDC na Androida:
api 'com.google.android.material:material:1.1.0-alpha06'
- (Opcjonalnie) W razie potrzeby zmodyfikuj plik
build.gradle, dodając 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'
}
Uruchamianie aplikacji startowej
|
Gotowe. Na urządzeniu powinna pojawić się aplikacja Shrine.
Tło to najbardziej wysunięta tył aplikacji, widoczny za pozostałymi treściami. Składa się z dwóch powierzchni: tylnej (która zawiera działania i filtry) oraz przedniej (do wyświetlania treści). W tle możesz wyświetlać interaktywne informacje i działania, np. elementy nawigacyjne lub filtry treści.
Ukrywanie treści siatki
W shr_product_grid_fragment.xml dodaj atrybut android:visibility="gone" do atrybutu 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">Zainstalujemy w nim tło. Aby uniknąć wyświetlania podziału między górnym paskiem aplikacji a treścią menu widoczną w tle, ułożymy ten sam kolor co górny pasek aplikacji.
W narzędziu shr_product_grid_fragment.xml dodaj jako pierwszy element w katalogu głównym FrameLayout przed 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 styles.xml dodaj te informacje:
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 świątyni Shrine. Następnie dodajmy menu.
Dodawanie menu
Menu to lista przycisków tekstowych. Dodamy go tutaj.
Utwórz nowy układ o nazwie shr_backdrop.xml w katalogu res -> layout, a następnie dodaj:
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>I dodaj tę listę do właśnie LinearLayout dodanego w shr_product_grid_fragment.xml przy użyciu 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>Twórz i uruchamiaj. Twój ekran główny powinien wyglądać tak:
Twoje tło jest gotowe. Przywróćmy ukryte treści.
Zanim wprowadziliśmy zmiany w świątyni, te główne ćwiczenia były rozmieszczone najdalej na zewnątrz. Teraz tło jest lepiej widoczne, bo znajduje się na tle tego tła.
Dodawanie nowej warstwy
Powinniśmy znowu wyświetlać warstwę siatki produktów. Usuń atrybut android:visibility="gone" z 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">Stylizuj warstwę przednią, dodając wcięcie w lewym górnym rogu. Material Design odnosi się do tego typu dostosowania jako kształtu. Powierzchnie Materiał mogą być wyświetlane na różne sposoby. Kształty pozwalają wyróżnić i styl na powierzchni, dzięki czemu można wyróżnić markę. Kształty materiałów mogą mieć krzywe lub kąty narożników i krawców oraz dowolną liczbę boków. Mogą być symetryczne lub nieregularne.
Dodawanie kształtu
Zmodyfikuj kształt siatki. Dostarczyliśmy niestandardowe tło kształtu, ale kształt jest wyświetlany poprawnie tylko w Androidzie Marshmallow i nowszych wersjach. Możemy ustawić tło shr_product_grid_background_shape na urządzeniu NestedScrollView tylko z Androidem Marshmallow lub nowszym. Najpierw dodaj id do swojego tagu NestedScrollView, abyśmy mogli się do niego odwoływać w kodzie w ten sposób:
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 automatycznie ustaw tło w ProductGridFragment.java. Aby ustawić tło na końcu wartości onCreateView(), tuż przed instrukcją powrotu:
ProductGridFragment.java
// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
view.findViewById(R.id.product_grid).setBackgroundResource(R.drawable.shr_product_grid_background_shape);
}Zaktualizujemy również kolor zasobu productGridBackgroundColor (używany też w tle) w ten sposób:
colors.xml
<color name="productGridBackgroundColor">#FFFBFA</color>Utwórz i uruchom:
Sanktuarium nadało swojej podstawowej powierzchni kształt niestandardowy. Ze względu na wysokość powierzchni użytkownicy widzą, że znajduje się za nią tylko biała warstwa. Dodajmy ruch, by użytkownicy mogli zobaczyć, co tam jest:
Ruch to sposób na ożywienie aplikacji. Ruch może być duży, dramatyczny, subtelny i minimalny albo w dowolnym innym miejscu. Rodzaj używanego ruchu musi być odpowiedni do danej sytuacji. Ruch, który jest stosowany do powtórzonych działań, powinien być niewielki i subtelny, aby nie zajmowały zbyt dużo czasu. Inne sytuacje, takie jak pierwsze uruchomienie aplikacji, mogą być bardziej atrakcyjne i pomagać użytkownikowi dowiedzieć się, jak korzystać z aplikacji.
Dodawaj przycisk odkrywania do przycisku menu
Ruch to kształt z przodu, który porusza się w dół i w prawo. Utworzyliśmy już detektor kliknięć, który przeprowadzi animację translacji arkusza w języku: NavigationIconClickListener.java. Ten detektor kliknięć możemy ustawić w metodzie setupToolbar() metody ProductGridFragment.java:
ProductGridFragment.java
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));Metoda setUpToolbar() powinna wyglądać teraz tak:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));
}Twórz i uruchamiaj. Naciśnij przycisk menu:
Ponowne naciśnięcie ikony menu nawigacyjnego powinno ukryć menu.
Skrócenie ruchu przedniej warstwy
Ruch to świetny sposób na zaprezentowanie marki. Zobaczmy, jak wygląda animacja na pokazanym filmie, używając innej krzywej czasu.
Zaktualizuj swój kod w narzędziu setupToolbar() za pomocą ProductGridFragment.java, by przekazywać interpolator do ikony użytkownika do nawigacji i w ten sposób:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
getContext(),
view.findViewById(R.id.product_grid),
new AccelerateDecelerateInterpolator()));
}
To wpływa na inny efekt, prawda?
Ikony marki obejmują też znane ikony. Stwórzmy ikonę niestandardowego i połącz ją z tytułem, aby nasza marka zyskała niepowtarzalny wygląd.
Zmiana ikony przycisku menu
Zmień przycisk menu, by wyświetlić ikonę zawierającą diamentowy wzór. Zaktualizuj pasek narzędzi Toolbar w aplikacji shr_product_grid_fragment.xml, używając nowej ikony marki (shr_branded_menu), i ustaw atrybuty app:contentInsetStart i android:padding, by lepiej pasował do specyfikacji Twojego 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" />
Zaktualizuj detektor kliknięć w setupToolbar() w ProductGridFragment.java, aby móc wciągać pasek narzędzi, gdy menu jest otwarte i zamknięte. Wykonaj te czynności:
ProductGridFragment.java
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.app_bar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
toolbar.setNavigationOnClickListener(new NavigationIconClickListener(
getContext(),
view.findViewById(R.id.product_grid),
new AccelerateDecelerateInterpolator(),
getContext().getResources().getDrawable(R.drawable.shr_branded_menu), // Menu open icon
getContext().getResources().getDrawable(R.drawable.shr_close_menu))); // Menu close icon
}
Utwórz i uruchom:
Super! Gdy tło jest widoczne, wyświetla się ikona diamentowego menu. Jeśli menu może być ukryte, wyświetlana jest ikona zamknięcia.
W trakcie tych 4 ćwiczeń wiesz, jak korzystać z komponentów Material Design, aby stworzyć niepowtarzalny, elegancki interfejs, który będzie odzwierciedlał osobowość i styl marki.
Dalsze kroki
Ukończysz tę sesję ćwiczeń z programowania. Jeszcze więcej informacji na temat komponentów MDC-Android znajdziesz w katalogu widżetów na Androida.
Aby kontynuować wyzwanie z ćwiczeniami, zmodyfikuj aplikację Shrine, aby zmienić zdjęcia produktów wyświetlane podczas wybierania kategorii z menu tła.
Aby dowiedzieć się, jak połączyć tę aplikację z Firebase w przypadku działającego backendu, zapoznaj się z Ćwiczeniami z programowania na Androida z Firebase.