1. Giriş
Material Components (MDC), geliştiricilerin Materyal Tasarım'ı 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. Android, iOS, web ve Flutter.material.io/develop için kullanılabilir. |
Android için Material Components (MDC Android), uygulamanızda paradigma değişikliği gerektiren yeni bir sistem veya çerçeve değildir. MDC Android, Android'de zaten bildiğiniz sınıflar ve API'ler (ör. AppCompat düğmeleri ve metin alanları) üzerine kurulmuştur. MDC Android tarafından sağlanan bileşenler gerektiği gibi kullanılabilir ve mevcut uygulamanızda anında tasarım iyileştirmesi yapılabilir.
Ne oluşturacaksınız?
Bu codelab'de, bir formdaki bazı mevcut bileşenleri MDC'nin yeni bileşenleriyle değiştireceksiniz.
Bu codelab'deki MDC-Android bileşenleri
- Metin alanları
- Düğmeler
- Menüler
Gerekenler
- Android geliştirme hakkında temel düzeyde bilgi
- 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?
2. Geliştirme ortamınızı kurma
Başlangıç Codelab uygulamasını indirin
Başlangıç uygulaması material-components-android-codelabs-111-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 111-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 -> shipping'i seçin (veya bilgisayarınızda shipping'i 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 (örneğin, 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.
Başlangıç uygulamasını çalıştırma
|
|
Başarılı aktarım Uygulamayı ve formunu görürsünüz.
3. Metin alanlarını güncelleme
Materyal Tasarım metin alanları, düz metin alanlarına göre önemli bir kullanılabilirlik avantajı sunar. Vuruş bölgesini bir ana hat veya arka plan dolgusuyla tanımladığınızda kullanıcıların formunuzla etkileşim kurma ya da daha karmaşık içeriklerdeki metin alanlarını belirleme olasılığı artar.
Import MDC-Android
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-alpha05'
Metin alanı stillerini değiştirme
shipping_info_activity.xml bölümünde, tüm TextInputLayout XML bileşenlerine aşağıdaki stili ekleyin:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Her TextInputLayout aşağıdaki gibi görünmelidir:
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
Derleme ve çalıştırma:
Metin alanlarının tümü, MDC'deki yeni tasarımları kullanacak şekilde güncellendi.
Hata ekleme
MDC metin alanlarında yerleşik hata sunumu bulunur. MDC, metin alanınızın altına kırmızı metin ekler ve süslemeleri de kırmızı olarak günceller.
ShippingInfoActivity.kt içinde, metin girişini kontrol etmek ve hataları uygun şekilde ayarlamak için onCreate() öğesini güncelleyin. Bu, aşağıdaki gibi görünmelidir:
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
Derleyin ve çalıştırın. KAYDET'e basın ancak en az bir metin alanını boş bırakın:
Boş olan metin alanları kırmızı renkte ve altında hata metni bulunur.
4. Düğmeyi güncelleme
MDC'de şu özelliklere sahip düğmeler bulunur:
- Mürekkep dalgaları
- Yuvarlak köşeler
- Tema desteği
- Piksel tarzı düzen ve tipografi
- AppCompatButton (standart Android düğme sınıfı) üzerine kurulduğu için kodunuzda nasıl kullanacağınızı bilirsiniz.
İsteğe bağlı olarak düğme sınıfını değiştirme
Varsayılan olarak, Material kitaplığı normal düğmeleri otomatik olarak MDC düğmelerine dönüştürür. Ancak, köşe yarıçapını değiştirme gibi yalnızca MaterialButton'da kullanılabilen ek yöntemlere erişebilmek için Button'a yapılan tüm referansları isteğe bağlı olarak MaterialButton ile değiştirebilirsiniz. MDC düğmeleri, basit bir tak-çalıştır bileşenidir. XML bileşen adını Button ile MaterialButton olarak değiştirip varsayılan MaterialButton stilini MaterialButton öğesine uygulamanız yeterlidir.
shipping_info_activity.xml bölümünde düğmenizi şu şekilde değiştirin:
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Alıcı:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Derleme ve çalıştırma:
5. Kart ekle
MaterialCardView, CardView üzerinde oluşturulmuş bir bileşendir ve şunları içerir:
- Doğru yükseklik ve stil
- Kontur genişliği ve renk özellikleri
İçeriği kartta sarmalama
İçeriğinizi içeren LinearLayout öğesini, aşağıdaki gibi bir MaterialCardView bileşeniyle shipping_info_activity.xml içine alın:
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
Derleyin ve çalıştırın. Formun tamamı bir kartla sarmalanmalıdır:
Material Card View bileşeni, içeriğinizi kolayca bir kartın içine yerleştirmenin bilinen ancak yeni bir yoludur.
6. Özet
Anında değer göstermek için bazı yaygın bileşenleri (ör. metin alanları, düğmeler, kartlar) değiştirdiniz ve uygulamanızda tamamen yeni bir tasarım yapmanız gerekmedi. Üst uygulama çubuğu ve TabLayout gibi diğer bileşenler de büyük fark yaratabilir.
Sonraki adımlar
Android Widget Kataloğu'nu ziyaret ederek MDC-Android'deki daha fazla bileşeni keşfedebilirsiniz.