MDC-104 Android: Gelişmiş Materyal Bileşenleri (Kotlin)

1. Giriş

logo_components_color_2x_web_96dp.png

Materyal Bileşenleri (MDC), geliştiricilerin Materyal Tasarım'ı uygulamasına yardımcı olur. Google'da mühendislerden ve kullanıcı deneyimi tasarımcılarından oluşan bir ekip tarafından oluşturulan MDC, onlarca güzel ve işlevsel kullanıcı arayüzü bileşeni içerir. Ayrıca Android, iOS, web ve Flutter.material.io/develop'da kullanılabilir.

Codelab MDC-103'te, Malzeme Bileşenlerinin (MDC) rengini, yüksekliğini ve tipografisini özelleştirip uygulamanıza stil kattınız.

Materyal Tasarım sistemindeki bir bileşen, bir dizi önceden tanımlanmış görevi yerine getirir ve düğme gibi belirli özelliklere sahiptir. Düğme, kullanıcının bir işlem yapması için yalnızca bir yol olmanın ötesinde, kullanıcıya bir şeyin etkileşimli olduğunu ve dokunulduğunda veya tıklandığında bir şey olacağını anlamasını sağlayan şekil, boyut ve rengin görsel bir ifadesidir.

Materyal Tasarım yönergeleri, bileşenleri bir tasarımcının bakış açısından açıklar. Platformlarda kullanılabilen çok çeşitli temel işlevlerin yanı sıra her bileşeni oluşturan anatomik öğeleri açıklarlar. Örneğin, bir arka plan, bir arka katmanı ve içeriğini, ön katmanı ve bunun içeriğini, hareket kurallarını ve görüntüleme seçeneklerini içerir. Bu bileşenlerin her biri her uygulamanın ihtiyaçlarına, kullanım alanlarına ve içeriğine göre özelleştirilebilir. Bu parçalar, çoğunlukla platformunuzun SDK'sındaki geleneksel görünümler, denetimler ve işlevlerdir.

Materyal Tasarım yönergelerinde birçok bileşene yer verse de bu bileşenlerin tümü yeniden kullanılabilir kod için iyi birer aday değildir ve bu nedenle MDC'de bulunmaz. Uygulamanıza özel bir stil elde etmek için geleneksel kodları kullanarak bu deneyimleri kendiniz oluşturabilirsiniz.

Oluşturacaklarınız

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

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

21c025467527a18e.png dcde66003cd51a5.png

Bu codelab'deki MDC-Android bileşenleri

  • Şekil

Gerekenler

  • Android geliştirmeyle ilgili temel bilgiler
  • Android Studio (yoksa buradan indirin)
  • Bir Android emülatörü veya cihaz (Android Studio üzerinden kullanılabilir)
  • Örnek kod (sonraki adıma bakın)

Android uygulamaları geliştirme konusundaki deneyim düzeyinizi nasıl değerlendirirsiniz?

Acemi Orta Yeterli

2. Geliştirme ortamınızı ayarlama

MDC-103'ten mi devam ediyorsunuz?

MDC-103 kursunu tamamladıysanız kodunuz bu codelab için hazır olmalıdır. 3. adıma geçin.

Sıfırdan mı başlayacaksınız?

Starter codelab uygulamasını indirin

Başlangıç uygulaması material-components-android-codelabs-104-starter/kotlin dizininde bulunur. Başlamadan önce bu dizine cd eklediğinizden emin olun.

...veya GitHub'dan klonlayın

Bu codelab'i GitHub'dan klonlamak için şu 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

Android Studio'da başlangıç kodunu 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 kotlin -> tapınak (veya bilgisayarınızda mabet araması yapın) Shipping projesini açın.
  2. Android Studio'nun projeyi oluşturup senkronize etmesi için biraz bekleyin. Bunu, Android Studio penceresinin alt kısmındaki etkinlik göstergelerinde de görebilirsiniz.
  3. Bu noktada Android Studio, aşağıda gösterilene benzer Android SDK'sı veya derleme araçları sizde eksik olduğundan bazı derleme hataları oluşturabilir. Bunları yüklemek/güncellemek ve projenizi senkronize etmek için Android Studio'daki talimatları uygulayın.

KzoYWC1S7Se7yL8igi1vXF_mbVxAdl2lg5kb7RODrsVpEng0G6U3NK1Qnn0faBBZd2u71yMXioy9tD-7fv3NXvVO4N3EtMMeWDTmqBMMl6egd9R5uXX0T_SKmahbmRor3wZZHX0ByA

Proje bağımlılıklarını ekleme

Projenin MDC Android destek kitaplığına bağımlı olması gerekiyor. İndirdiğiniz örnek kodda bu bağımlılığın zaten listelenmiş olması gerekir ancak emin olmak için aşağıdaki adımları uygulamanız önerilir.

  1. app modülünün build.gradle dosyasına gidin ve dependencies bloğunun MDC Android'e bir bağımlılık içerdiğinden emin olun:
api 'com.google.android.material:material:1.1.0-alpha06'
  1. (İsteğe bağlı) Gerekirse build.gradle dosyasını düzenleyerek aşağıdaki bağımlılıkları ekleyin 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

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

Başarıyla gerçekleştirildi. Cihazınızda Shrine uygulamasının çalıştığını görürsünüz.

79eaeaff51de5719.png

3. Arka plan menüsü ekleme

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

Izgara içeriğini gizleme

shr_product_grid_fragment.xml ürünü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ölgede arka plan yükleyeceğiz. Üst uygulama çubuğu ile arka planda görünen menü içeriği arasında ayrım gösterilmesini önlemek için arka plan, üst uygulama çubuğuyla aynı renkte olacak.

shr_product_grid_fragment.xml öğesinde aşağıdakileri, AppBarLayout öğesinin önüne gelecek şekilde FrameLayout kök öğenizin ilk öğesi olarak 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. Sonra bir menü ekleyeceğiz.

Menüyü ekleme

Menü, temelde metin düğmelerinden oluşan bir listedir. Buraya bir resim ekleyeceğiz.

res -> layout dizininizde shr_backdrop.xml adlı yeni bir düzen dosyası oluşturun ve şunu 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 bu listeyi, <include> etiketi kullanarak shr_product_grid_fragment.xml hizmetine az önce eklediğiniz LinearLayout öğesine de 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 şu şekilde görünmelidir:

a87a58e2ccddbae5.png

Şimdi arka planımızı ayarladık. Daha önce gizlediğimiz içeriği geri getirelim.

4. Şekil ekleyin

Bu codelab'de Mabet'te herhangi bir değişiklik yapmadan önce birincil ürün içeriği en arka yüzeyde bulunuyordu. Arka plan eklendiğinde, bu içerik ilgili arka planın önünde gösterildiği için artık daha çok ön plana çıkarılıyor.

Yeni katman ekleme

Ürün ızgarası katmanını tekrar göstermemiz gerekir. android:visibility="gone" özelliğini NestedScrollView cihazınızdan 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ın stilini, sol üst köşedeki bir çentikle oluşturalım. Materyal Tasarım, bu tür özelleştirmeyi şekil olarak ifade eder. Malzeme yüzeyleri farklı şekillerde gösterilebilir. Şekiller yüzeylere vurgu ve stil katar ve markayı göstermek için kullanılabilir. Malzeme şekillerinin eğimli veya açılı köşeleri ve kenarları ile herhangi bir sayıda kenarı olabilir. Simetrik veya düzensiz olabilirler.

Şekil ekleme

Izgaranın şeklini değiştirin. Özel bir şekil arka planı sağladık, ancak şekil yalnızca Android Marshmallow ve sonraki sürümlerde doğru şekilde görüntüleniyor. Yalnızca Android Marshmallow ve sonraki sürümler için NestedScrollView cihazınızda shr_product_grid_background_shape arka planını ayarlayabiliriz. İlk olarak, aşağıdaki şekilde kodda referans verebilmemiz için NestedScrollView cihazınıza 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.kt içinde programatik olarak ayarlayın. Arka planı onCreateView() öğesinin sonuna, Return ifadesinden hemen önce ayarlamak için aşağıdaki mantığı ekleyin:

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

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

colors.xml

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

Derleme ve çalıştırma:

9cf7a94091438011.png

Tapınakta, ana yüzeyine özel bir şekil oluşturulmuştur. 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 orada ne olduğunu, yani menünüzü görebilmesi için hareket ekleyelim.

5. Hareket efekti ekleyin

Hareket, uygulamanıza hayat vermenin bir yoludur. Büyük ve dramatik, ince ve minimum ya da bunların arasında herhangi bir yerde hareket olabilir. Kullandığınız hareket türü duruma uygun olmalıdır. Tekrarlanan düzenli eylemlere uygulanan hareket küçük ve hafif olmalıdır, böylece düzenli olarak çok fazla zaman almazlar. Bir kullanıcının uygulamayı ilk kez açması gibi diğer durumlar daha dikkat çekici olabilir ve kullanıcıyı uygulamanızı nasıl kullanacağı konusunda eğitmeye yardımcı olabilir.

Menü düğmesine gösterme hareketi ekleme

Hareket, önden aşağı doğru hareket eden şekildir. E-tablo için çeviri animasyonunu NavigationIconClickListener.kt dilinde gerçekleştirecek bir tıklama dinleyicisi kullanımınıza sunulmuştur. Bu tıklama işleyiciyi ProductGridFragement ürününün onCreateView() içinde, araç çubuğunu ayarlamaktan sorumlu bölümde ayarlayabiliriz. Tıklama işleyiciyi araç çubuğunun menü simgesinde ayarlamak için aşağıdaki satırı ekleyin:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

Bölüm aşağıdaki gibi görünecektir:

ProductGridFragment.kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

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

46a878bade66f821.png

Gezinme menüsü simgesine tekrar bastığınızda simge gizlenir.

Ön katmanın hareketini ayarlama

Hareket, markanızı ifade etmenin harika bir yoludur. Farklı bir zamanlama eğrisi kullanarak gösterme animasyonunun nasıl göründüğüne bakalım.

ProductGridFragment.kt içindeki tıklama işleyicinizi, gezinme simgenizin tıklama dinleyicisine bir İnterpolator aktarmak için aşağıdaki şekilde güncelleyin:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))

Bu farklı bir etki oluşturuyor, değil mi?

6. Markalı simge

Markalı ikonlar, bilinen simgeleri de kapsıyor. Markalı, benzersiz bir görünüm elde etmek için açıklama simgesini özel yapıp başlığımızla birleştirelim.

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

Baklava desenli bir simge görüntülemek için menü düğmesini değiştirin. shr_product_grid_fragment.xml içindeki Araç Çubuğunuzu, sizin için sağladığımız yeni markalı simgeyi (shr_branded_menu) kullanacak şekilde güncelleyin ve araç çubuğunu tasarımcınızın teknik özellikleriyle daha uyumlu hale getirmek 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" />

ProductGridFragment.kt bölgesindeki onCreateView() içindeki tıklama dinleyicimizi, menü açıkken ve kapalıyken araç çubuğu için çekmeceleri alacak şekilde aşağıda tekrar güncelleyeceğiz:

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

Derleme ve çalıştırma:

21c025467527a18e.png dcde66003cd51a5.png

Güzel! Arka plan açılabildiğinde, elmas menü simgesi görüntülenir. Menünün gizlenmesi mümkün olduğunda bunun yerine bir kapat simgesi gösterilir.

7. Özet

Bu dört codelab süresince bir markanın kişiliğini ve tarzını yansıtan benzersiz, şık kullanıcı deneyimleri oluşturmak için Materyal Bileşenleri nasıl kullanacağınızı öğrendiniz.

Sonraki adımlar

Bu codelab'de (MDC-104) kod laboratuvarları dizisi tamamlanır. MDC-Android Bileşenleri Kataloğu'nu ziyaret ederek MDC-Android'de daha da fazla bileşeni keşfedebilirsiniz.

Bu codelab'de daha fazlasını yapmak için, arka plan menüsünden bir kategori seçildiğinde gösterilen ürün resimlerini değiştirmek üzere Shrine uygulamanızda değişiklik yapın.

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

Bu codelab'i makul bir zaman ve çabayla tamamlayabildim

Kesinlikle katılıyorum Katılıyorum Ne memnunum ne değilim Katılmıyorum Kesinlikle katılmıyorum

Gelecekte Materyal Bileşenleri kullanmaya devam etmek istiyorum

Kesinlikle katılıyorum Katılıyorum Ne memnunum ne değilim Katılmıyorum Kesinlikle katılmıyorum