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 araçlar:
- Şekil
- Hareket
- Geleneksel Android SDK sınıfları
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?
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ı, material-components-android-codelabs-104-starter/kotlin 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
Başlangıç kodunu Android Studio'ya yükleme
- 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 Kargo projesini açmak için kotlin -> shrine'ı seçin(veya bilgisayarınızda shrine'ı arayın).
- 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.
- 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.
appmodülününbuild.gradledosyasına gidin vedependenciesbloğunun MDC Android'e bağımlılık içerdiğinden emin olun:
api 'com.google.android.material:material:1.1.0-alpha06'
- (İsteğe bağlı) Gerekirse aşağıdaki bağımlılıkları eklemek için
build.gradledosyası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
|
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 dosyası 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ımızı ayarladık. Daha önce gizlediğimiz içeriği geri getirelim.
Bu codelab'de Shrine ile ilgili 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.kt 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.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 ş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.kt içinde, sayfadaki çeviri animasyonunu gerçekleştirecek bir tıklama işleyiciyi sizin için sağladık. Bu tıklama işleyicisini, araç çubuğunu ayarlamaktan sorumlu bölümde ProductGridFragement'nın onCreateView() içinde ayarlayabiliriz. Tıklama işleyicisini araç çubuğunun menü simgesine ayarlamak için aşağıdaki satırı ekleyin:
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))Bölüm artık 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:
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.
ProductGridFragment.kt içinde tıklama işleyicinizi, gezinme simgenizin tıklama işleyicisine bir Interpolator iletecek şekilde aşağıdaki gibi güncelleyin:
ProductGridFragment.kt
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, 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, sizin için sağladığımız yeni markalı simgeyi (shr_branded_menu) kullanacak şekilde güncelleyin ve araç çubuğunun tasarımcınızın özelliklerine daha iyi uyması 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 onCreateView() içindeki tıklama işleyicimizi ProductGridFragment.kt içinde 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 iconDerleme 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.
Sonraki adımlar
Bu codelab (MDC-104), codelab dizisini tamamlar. MDC-Android Bileşen 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.