MDC-104 Android: Material Advanced Bileşenleri (Java)

Material Bileşenleri (MDC), geliştiricilerin Material Design'ı uygulamasına yardımcı olur. Google'daki bir mühendis ve kullanıcı deneyimi tasarımcısı ekibi tarafından oluşturulan MDC, düzinelerce güzel ve işlevsel kullanıcı arayüzü bileşeni içerir ve Android, iOS, web ve Flutter için kullanılabilir. material.io/develop

MDC-103 adlı codelab'de, uygulamanızı stilize etmek için Material Components'ın (MDC) rengini, yüksekliğini ve tipografisini özelleştirmiştiniz.

Material Design sistemindeki bir bileşen, önceden tanımlanmış bir dizi görevi yerine getirir ve belirli özelliklere (ör. düğme) sahiptir. Ancak düğme, kullanıcının bir eylem gerçekleştirmesinin yanı sıra şekil, boyut ve rengin görsel ifadesidir. Kullanıcıya etkileşimli olduğunu ve dokunulduğunda veya tıklandığında bir şey olacağını bildirir.

Materyal Tasarım yönergelerinde bileşenler, tasarımcı bakış açısıyla açıklanır. Bunlar, platformlarda kullanılabilen çok çeşitli temel işlevlerin yanı sıra her bileşeni oluşturan anatomik öğeleri açıklar. Örneğin, bir arka plan; arka katmanı ve içeriğini, ön katmanı ve içeriğini, hareket kurallarını ve görüntüleme seçeneklerini içerir. Bu bileşenlerin her biri, uygulamaların ihtiyaçlarına, kullanım alanlarına ve içeriğine göre özelleştirilebilir. Bu parçalar, büyük ölçüde platformunuzun SDK'sındaki geleneksel görünümler, kontroller ve işlevlerdir.

Material Design yönergelerinde birçok bileşenin adı geçse de bunların hepsi yeniden kullanılabilir kod için uygun değildir ve bu nedenle MDC'de bulunmaz. Uygulamanız için özelleştirilmiş bir stil elde etmek amacıyla bu deneyimleri kendiniz oluşturabilirsiniz. Üstelik tüm bunları geleneksel kodu kullanarak yapabilirsiniz.

Ne oluşturacaksınız?

Bu codelab'de Shrine'a arka plan ekleyeceksiniz. Asimetrik ızgarada gösterilen ürünleri kategoriye göre filtreler. Kullanacağınız ürünler:

• Şekil
• Hareket
• Geleneksel Android SDK sınıfları

Bu codelab, Shrine adlı bir ürün için uygulama oluşturma sürecinde size yol gösteren 4 codelab'den sonuncusudur. Görevler adım adım ilerlediğinden tüm codelab'leri sırayla yapmanızı öneririz. İlgili codelab'leri şu adreste bulabilirsiniz: MDC-101: Material Components (MDC) ile İlgili Temel Bilgiler MDC-102: Materyal Tasarım Yapısı ve Düzeni. MDC-103: Material Design Theming with Color, Shape, Elevation and Type

Bu Codelab'deki MDC-Android bileşenleri

• Şekil

Gerekenler

• Android geliştirme hakkında temel bilgiler
• Android Studio (Henüz yüklemediyseniz buradan indirebilirsiniz.)
• Android emülatörü veya cihazı (Android Studio üzerinden kullanılabilir)
• Örnek kod (sonraki adıma bakın)

Android uygulamaları geliştirme deneyiminizi nasıl değerlendirirsiniz?

Başlangıç Orta İleri

MDC-103'ten devam mı ediyorsunuz?

MDC-103'ü tamamladıysanız kodunuz bu codelab'e hazırdır. 3. adıma geçin.

Sıfırdan mı başlıyorsunuz?

Başlangıç Codelab uygulamasını indirin

Başlangıç uygulamasını indirin

Başlangıç uygulaması, material-components-android-codelabs-104-starter/java dizininde bulunur. Başlamadan önce bu dizine cd olduğunuzdan emin olun.

...veya GitHub'dan kopyalayın

Bu codelab'i GitHub'dan klonlamak için aşağıdaki komutları çalıştırın:

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

Daha fazla yardım için: GitHub'dan depo kopyalama

Başlangıç kodunu Android Studio'ya yükleme

1. Kurulum sihirbazı tamamlandıktan ve Android Studio'ya Hoş Geldiniz penceresi gösterildikten sonra Mevcut bir Android Studio projesini aç'ı tıklayın. Örnek kodu yüklediğiniz dizine gidin ve Shrine projesini açmak için java -> shrine'ı seçin(veya bilgisayarınızda shrine'ı arayın).
2. Android Studio penceresinin alt kısmındaki etkinlik göstergelerinde belirtildiği gibi, Android Studio'nun projeyi oluşturup senkronize etmesi için bir süre bekleyin.
3. Bu noktada, Android Studio, Android SDK veya derleme araçları eksik olduğundan (ör. aşağıda gösterilen) bazı derleme hataları verebilir. Bunları yüklemek/güncellemek ve projenizi senkronize etmek için Android Studio'daki talimatları uygulayın.

Proje bağımlılıkları ekleme

Projenin MDC Android destek kitaplığına bağımlı olması gerekir. İndirdiğiniz örnek kodda bu bağımlılık zaten listelenmiş olmalıdır. Ancak emin olmak için aşağıdaki adımları uygulamanız iyi bir uygulamadır.

1. app modülünün build.gradle dosyasına gidin ve dependencies bloğunun MDC Android'e bağımlılık içerdiğinden emin olun:

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

2. (İsteğe bağlı) Gerekirse aşağıdaki bağımlılıkları eklemek için build.gradle dosyasını düzenleyin ve projeyi senkronize edin.

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'
}

Başlangıç uygulamasını çalıştırma

Çalıştır / Oynat düğmesinin solundaki derleme yapılandırmasının app olduğundan emin olun. Uygulamayı oluşturup çalıştırmak için yeşil Çalıştır / Oynat düğmesine basın. Select Deployment Target (Dağıtım Hedefini Seç) penceresinde, kullanılabilir cihazlarınızda listelenen bir Android cihazınız varsa 8. Adım'a geçin. Aksi takdirde Yeni Sanal Cihaz Oluştur'u tıklayın. Donanım Seçin ekranında Pixel 2 gibi bir telefon cihazı seçin ve Sonraki'yi tıklayın. Sistem Görüntüsü ekranında, tercihen en yüksek API düzeyine sahip bir son Android sürümünü seçin. Yüklü değilse gösterilen İndir bağlantısını tıklayın ve indirme işlemini tamamlayın. İleri'yi tıklayın. Android Virtual Device (AVD) ekranında ayarları olduğu gibi bırakın ve Finish'i (Sonlandır) tıklayın. Dağıtım hedefi iletişim kutusundan bir Android cihaz seçin. Ok'i (Tamam) tıklayın. Android Studio, uygulamayı oluşturur, dağıtır ve hedef cihazda otomatik olarak açar.

Bağımlılığı ekleyemediyseniz veya uygulamayı başarıyla çalıştıramadıysanız durun ve geliştirme ortamınızda sorun giderme işlemi yapın.

Derleme sırasında INSTALL_FAILED_INVALID_APK hatası alırsanız Android Studio'da "Build" (Derle) -> "Clean Project" (Projeyi Temizle) işlemini yapmayı deneyin.

Başarılı aktarım Shrine uygulamasının cihazınızda çalıştığını görmeniz gerekir.

Arka plan, bir uygulamanın en arkadaki yüzeyidir ve diğer tüm içeriklerin ve bileşenlerin arkasında görünür. İki yüzeyden oluşur: arka katman (işlemleri ve filtreleri gösterir) ve ön katman (içeriği gösterir). Gezinme veya içerik filtreleri gibi etkileşimli bilgileri ve işlemleri göstermek için arka plan kullanabilirsiniz.

Izgara içeriğini gizleme

shr_product_grid_fragment.xml bölümünde, ürün içeriğini geçici olarak kaldırmak için NestedScrollView öğenize android:visibility="gone" özelliğini ekleyin:

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

Bu bölgeye bir fon yükleyeceğiz. Üst uygulama çubuğu ile arka planda görünen menü içeriği arasında bir bölüm görünmesini önlemek için arka planı üst uygulama çubuğuyla aynı renkte yapacağız.

shr_product_grid_fragment.xml içinde, kök FrameLayout öğenizin ilk öğesi olarak AppBarLayout öğesinden önce aşağıdakileri ekleyin:

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>

styles.xml alanına aşağıdakileri ekleyin:

styles.xml

<style name="Widget.Shrine.Backdrop" parent="">
   <item name="android:background">?attr/colorAccent</item>
</style>

Tebrikler! Shrine'ın kullanıcı arayüzüne güzel bir arka plan eklediniz. Ardından bir menü ekleyeceğiz.

Menü ekleme

Menü temelde bir metin düğmeleri listesidir. Buraya bir tane ekleyeceğiz.

res -> layout dizininizde shr_backdrop.xml adlı yeni bir düzen oluşturun ve aşağıdakileri ekleyin:

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>

Ayrıca, <include> etiketi kullanarak bu listeyi shr_product_grid_fragment.xml bölümünde yeni eklediğiniz LinearLayout öğesine ekleyin:

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>

Derleyin ve çalıştırın. Ana ekranınız aşağıdaki gibi görünmelidir:

Arka planınız hazır. Daha önce gizlediğimiz içeriği geri getirelim.

Bu codelab'de Shrine'da herhangi bir değişiklik yapmadan önce, birincil ürün içeriği en arkadaki yüzeyde yer alıyordu. Arka plan eklediğinizde bu içerik, arka planın önünde göründüğü için daha fazla vurgulanır.

Yeni katman ekleme

Ürün ızgarası katmanını tekrar göstermeliyiz. NestedScrollView öğenizden android:visibility="gone" özelliğini kaldırın:

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

Ön katmanı sol üst köşede bir çentikle şekillendirelim. Material Design, bu tür özelleştirmeyi şekil olarak adlandırır. Material yüzeyleri farklı şekillerde gösterilebilir. Şekiller, yüzeylere vurgu ve stil katar. Markalama için kullanılabilir. Materyal şekillerinin köşeleri ve kenarları kavisli veya açılı olabilir ve herhangi bir sayıda kenarı olabilir. Simetrik veya düzensiz olabilirler.

Şekil ekleme

Izgaranın şeklini değiştirin. Özel şekil arka planı sağladık ancak şekil yalnızca Android Marshmallow ve sonraki sürümlerde doğru şekilde gösteriliyor. shr_product_grid_background_shape arka planını NestedScrollView yalnızca Android Marshmallow ve sonraki sürümlerde ayarlayabiliriz. Öncelikle, kodda referans verebilmemiz için NestedScrollView öğenize id ekleyin:

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

Ardından, arka planı ProductGridFragment.java içinde programatik olarak ayarlayın. Arka planı onCreateView()'nın sonuna, return ifadesinden hemen önce ayarlamak için aşağıdaki mantığı ekleyin:

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);
}

Son olarak, productGridBackgroundColor renk kaynağını (özel şekil arka planı tarafından da kullanılır) aşağıdaki şekilde güncelleyeceğiz:

colors.xml

<color name="productGridBackgroundColor">#FFFBFA</color>

Derleme ve çalıştırma:

Shrine'ın birincil yüzeyine özel olarak şekillendirilmiş bir şekil verdik. Yüzey yüksekliği nedeniyle kullanıcılar, ön beyaz katmanın hemen arkasında bir şey olduğunu görebilir. Kullanıcıların menüyü görebilmesi için hareket ekleyelim.

Hareket, uygulamanızı hayata geçirmenin bir yoludur. Hareketler büyük ve dramatik, ince ve minimal veya bu ikisinin arasında olabilir. Kullandığınız hareket türü duruma uygun olmalıdır. Tekrarlanan düzenli işlemlere uygulanan hareketler küçük ve ince olmalıdır. Böylece düzenli olarak çok fazla zaman almazlar. Kullanıcının bir uygulamayı ilk kez açması gibi diğer durumlar daha dikkat çekici olabilir ve kullanıcıya uygulamanızı nasıl kullanacağı konusunda bilgi verebilir.

Menü düğmesine ortaya çıkarma hareketi ekleme

Hareket, öndeki şeklin düz bir şekilde aşağı inmesidir. NavigationIconClickListener.java içinde, sayfadaki çeviri animasyonunu gerçekleştirecek bir tıklama işleyiciyi sizin için sağladık. Bu tıklama işleyicisini ProductGridFragment.java öğesinin setupToolbar() yöntemi içinde ayarlayabiliriz:

ProductGridFragment.java

toolbar.setNavigationOnClickListener(new NavigationIconClickListener(getContext(), view.findViewById(R.id.product_grid)));

setUpToolbar() yönteminiz artık aşağıdaki gibi görünmelidir:

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)));
}

Derleyin ve çalıştırın. Menü düğmesine basın:

Gezinme menüsü simgesine tekrar basıldığında menü gizlenir.

Ön katmanın hareketini ayarlama

Hareket, markanızı ifade etmenin harika bir yoludur. Farklı bir zamanlama eğrisi kullanıldığında ortaya çıkarma animasyonunun nasıl göründüğüne bakalım.

Bir Interpolator'ı gezinme simgenizin tıklama işleyicisine iletmek için setupToolbar() içindeki ProductGridFragment.java kodunuzu aşağıdaki gibi güncelleyin:

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()));
}

Bu durum farklı bir etki yaratıyor, değil mi?

Markalı simgeler, tanıdık simgeleri de kapsar. Açıklama simgesini özelleştirelim ve benzersiz bir marka görünümü için başlığımızla birleştirelim.

Menü düğmesi simgesini değiştirme

Menü düğmesini, elmas tasarımı içeren bir simge gösterecek şekilde değiştirin. shr_product_grid_fragment.xml adresindeki araç çubuğunuzu, sağladığımız yeni markalı simgeyi (shr_branded_menu) kullanacak şekilde güncelleyin ve araç çubuğunun tasarımcınızın özellikleriyle daha iyi eşleşmesi için app:contentInsetStart ve android:padding özelliklerini ayarlayın:

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" />

Menü açıkken ve kapalıyken araç çubuğu için çizilebilir öğeleri almak üzere setupToolbar() içindeki ProductGridFragment.java konumunda tıklama işleyicimizi tekrar güncelleyin:

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
}

Derleme ve çalıştırma:

Güzel! Arka plan gösterilebildiğinde elmas menü simgesi görüntülenir. Menü gizlenebildiğinde bunun yerine kapatma simgesi gösterilir.

Bu dört codelab boyunca, bir markanın kişiliğini ve tarzını yansıtan benzersiz ve zarif kullanıcı deneyimleri oluşturmak için Material Components'ı nasıl kullanacağınızı öğrendiniz.

Tamamlanmış MDC 104 uygulaması, bitmiş codelab'i indirerek veya git ile 104-complete'i kontrol ederek kullanılabilir: git checkout 104-complete.

Uygulamanızın sürümünü bu şubedeki uygulamaya karşı test edebilirsiniz.

Sonraki adımlar

Bu codelab (MDC-104), codelab dizisini tamamlar. Android Widget Kataloğu'nu ziyaret ederek MDC-Android'deki daha fazla bileşeni keşfedebilirsiniz.

Bu codelab'de daha da zorlanmak için Shrine uygulamanızı, arka plan menüsünden bir kategori seçildiğinde gösterilen ürün resimlerini değiştirecek şekilde düzenleyin.

Çalışan bir arka uç için bu uygulamayı Firebase'e nasıl bağlayacağınızı öğrenmek istiyorsanız Firebase Android Codelab'e bakın.

Bu codelab'i makul bir süre ve çabayla tamamlayabildim

Kesinlikle katılıyorum Katılıyorum Ne katılıyorum ne katılmıyorum Katılmıyorum Kesinlikle katılmıyorum

Gelecekte Material Components'ı kullanmaya devam etmek istiyorum

Kesinlikle katılıyorum Katılıyorum Ne katılıyorum ne katılmıyorum Katılmıyorum Kesinlikle katılmıyorum