1. Giriş
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. |
Android için Materyal Bileşenler (MDC Android), uygulamanızda paradigma değişikliği gerektiren yeni bir sistem veya çerçeve değildir. MDC Android, AppCompat düğmeleri ve metin alanları gibi Android'de zaten bildiğiniz sınıfların ve API'lerin üzerine inşa edilmiştir. MDC Android tarafından sağlanan bileşenler, gerektiğinde kullanılabilir ve mevcut uygulamanızın tasarımında anında iyileştirme sağlar.
Oluşturacaklarınız
Bu codelab'de, bir formdaki mevcut bileşenlerden bazılarını MDC'deki yeni bileşenlerle değiştireceksiniz.
Bu codelab'deki MDC-Android bileşenleri
- Metin alanları
- Düğmeler
- Menüler
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?
2. Geliştirme ortamınızı ayarlama
Starter codelab uygulamasını indirin
Başlangıç uygulaması material-components-android-codelabs-111-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 111-starter
Android Studio'da başlangıç kodunu 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 kotlin -> shipping [gönderim] (veya bilgisayarınızda shipping [gönderim]) arama yaparak Shipping projesini açın.
- 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.
- 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.
Başlangıç uygulamasını çalıştırma
|
|
Başarıyla gerçekleştirildi. Uygulamayı ve formunu göreceksiniz.
3. Metin alanlarını güncelleme
Materyal Tasarım metin alanları, düz metin alanlarına kıyasla büyük bir kullanılabilirlik kazanıyor. İsabet bölgesini bir dış çizgi veya arka plan dolgusu ile tanımladığınızda, kullanıcıların formunuzla etkileşime geçme veya daha karmaşık içerikteki metin alanlarını belirleme olasılığı artar.
MDC'yi içe aktarma-Android
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-alpha05'
Metin alanı stillerini değiştirme
shipping_info_activity.xml ürünü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üncellenir.
Hata ekleme
MDC metin alanlarında yerleşik hata sunumu vardır. MDC, metin alanınızın altına kırmızı metin ekler ve süslemeleri de kırmızı olacak şekilde günceller.
Metin girişini kontrol etmek ve hataları uygun şekilde ayarlamak için ShippingInfoActivity.kt ürününde onCreate() uygulamasını güncelleyin. Aşağıdaki gibi görünecektir:
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ı renktedir ve altında hata metni bulunur.
4. Düğmeyi güncelleyin
MDC'de şu düğmeler bulunur:
- Mürekkep dalgaları
- Yuvarlatılmış köşeler
- Tema oluşturma desteği
- Piksel mükemmelliğinde düzen ve yazı biçimi
- AppCompatButton (standart Android düğme sınıfı) temel alınarak geliştirilmiştir. Böylece bunları kodunuzda nasıl kullanacağınızı bilirsiniz.
İsteğe Bağlı Olarak Değiştir düğmesi sınıfı
Materyal kitaplığı varsayılan olarak normal Düğmeleri otomatik olarak MDC Düğmelerine dönüştürür. Bununla birlikte, isteğe bağlı olarak tüm Button referanslarını MaterialButton ile değiştirebilirsiniz. Böylece, köşe yarıçapını değiştirmek gibi yalnızca MaterialButton'ta kullanılabilen ek yöntemlere erişebilirsiniz. MDC Düğmeleri basit bir tak ve çalıştır bileşenidir. Button XML bileşen adını MaterialButton ile değiştirip varsayılan MaterialButton stilini MaterialButton öğesine uygulamanız yeterlidir.
shipping_info_activity.xml ürününde yer alan düğmenizi 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 şu özelliklere sahip bir bileşendir:
- Rakımı ve stili düzelt
- Çizgi genişliği ve rengi özellikleri
İçerikleri kartta sarmalama
İçeriğinizin bulunduğu LinearLayout öğesini shipping_info_activity.xml içinde aşağıdaki gibi bir MaterialCardView bileşeniyle sarmalayı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 kart içine yerleştirilmelidir:
Malzeme Kartı Görünümü bileşeni, içeriğinizi kart içinde kolayca sarmalamanın tanıdık ancak yeni bir yoludur.
6. Özet
Metin alanları, düğmeler ve kartlar gibi yaygın olarak kullanılan bazı bileşenleri, anında değer katacak şekilde değiştirdiniz. Üstelik uygulamanızı baştan sona baştan tasarlamanız gerekmedi. Üst Uygulama Çubuğu ve Sekme Düzeni gibi diğer bileşenler de büyük fark yaratabilir.
Sonraki adımlar
Android Widgets Kataloğu'nu ziyaret ederek MDC-Android'deki daha da fazla bileşeni keşfedebilirsiniz.