Gölgeler ve klip görünümleri oluşturma

Compose yöntemini deneyin

Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da temalarla nasıl çalışacağınızı öğrenin.

Modifier.shadow() →

Materyal Tasarım, kullanıcı arayüzü öğeleri için yükseklik kavramını sunar. Yükseltme, kullanıcıların her bir öğenin göreli önemini anlamasına ve dikkatlerini mevcut göreve odaklamasına yardımcı olur.

Z özelliğiyle gösterilen bir görünümün yüksekliği, gölgesinin görsel görünümünü belirler. Daha yüksek Z değerlerine sahip görünümler daha büyük ve yumuşak gölgeler oluşturur ve daha düşük Z değerlerine sahip görünümleri kapatır. Ancak bir görünümün Z değeri, görünümün boyutunu etkilemez.

Gölgeler, yükseltilmiş görünümün üst öğesi tarafından çizilir. Bunlar standart görünüm kırpma işlemine tabidir ve varsayılan olarak üst öğe tarafından kırpılır.

Yükseltme, işlemler gerçekleştirilirken widget'ların geçici olarak görünüm düzleminin üzerine çıktığı animasyonlar oluşturmak için de kullanışlıdır.

Daha fazla bilgi için Materyal Tasarım'da yükseltme başlıklı makaleyi inceleyin.

Görünümlerinize yükseklik atama

Bir görünümün Z değeri iki bileşenden oluşur:

• Yükseklik: Statik bileşen
• Çeviri: Animasyonlar için kullanılan dinamik bileşen

Z = elevation + translationZ

Z değerleri dp (yoğunluktan bağımsız piksel) cinsinden ölçülür.

Bir görünümün varsayılan (dinlenme) yüksekliğini ayarlamak için XML düzeninde android:elevation özelliğini kullanın. Bir görünümün yüksekliğini bir etkinliğin kodunda ayarlamak için View.setElevation() yöntemini kullanın.

Bir görünümün çevirisini ayarlamak için View.setTranslationZ() yöntemini kullanın.

ViewPropertyAnimator.z() ve ViewPropertyAnimator.translationZ() yöntemleri, görünümlerin yüksekliğini canlandırmanıza olanak tanır. Daha fazla bilgi için ViewPropertyAnimator API referansı ve özellik animasyonu geliştirici kılavuzuna bakın.

Bu animasyonları bildirimsel bir şekilde belirtmek için StateListAnimator öğesini de kullanabilirsiniz. Bu özellik, özellikle durum değişikliklerinin animasyonları tetiklediği durumlarda (ör. kullanıcı bir düğmeye dokunduğunda) kullanışlıdır. Daha fazla bilgi için StateListAnimator kullanarak görünüm durumu değişikliklerini canlandırma başlıklı makaleye bakın.

Görünüm gölgelerini ve ana hatlarını özelleştirme

Bir görünümün arka plan çizilebilir öğesinin sınırları, gölgesinin varsayılan şeklini belirler. Ana hatlar, grafik nesnesinin dış şeklini temsil eder ve dokunma geri bildirimi için dalgalanma alanını tanımlar.

Arka plan çizilebilir öğesiyle tanımlanan aşağıdaki görünümü ele alalım:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

Arka plan çizilebilir öğesi, yuvarlatılmış köşeli bir dikdörtgen olarak tanımlanır:

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

Arka plan çizilebilir öğesi, görünümün ana hattını tanımladığından görünüm, yuvarlak köşeli bir gölge oluşturur. Özel bir ana hat sağlama, görünümün gölgesinin varsayılan şeklini geçersiz kılar.

Kodunuzdaki bir görünüm için özel bir ana hat tanımlamak üzere aşağıdakileri yapın:

1. ViewOutlineProvider sınıfını genişletin.
2. getOutline() yöntemini geçersiz kılın.
3. View.setOutlineProvider() yöntemiyle yeni ana hat sağlayıcıyı görünümünüze atayın.

Outline sınıfındaki yöntemleri kullanarak yuvarlak köşeli oval ve dikdörtgen ana hatlar oluşturabilirsiniz. Görünümler için varsayılan ana hat sağlayıcı, ana hattı görünümün arka planından alır. Bir görünümün gölge oluşturmasını önlemek için ana hat sağlayıcısını null olarak ayarlayın.

Kliplerin izlenme sayısı

Görünümleri kırpma, görünümün şeklini değiştirmenize olanak tanır. Görünümleri, diğer tasarım öğeleriyle tutarlılık sağlamak veya kullanıcı girişine yanıt olarak görünümün şeklini değiştirmek için kırpabilirsiniz. View.setClipToOutline() yöntemini kullanarak bir görünümü ana hat alanına kırpabilirsiniz. Outline.canClip() yöntemiyle belirlendiği üzere, yalnızca dikdörtgen, daire ve yuvarlak dikdörtgen şeklindeki ana hatlar kırpmayı destekler.

Bir görünümü çizilebilir öğenin şekline kırpmak için çizilebilir öğeyi görünümün arka planı olarak ayarlayın (önceki örnekte gösterildiği gibi) ve View.setClipToOutline() yöntemini çağırın.

Görünümleri kırpma işlemi maliyetli olduğundan, görünümü kırpmak için kullandığınız şekli animasyonla hareketlendirmeyin. Bu efekti elde etmek için göster animasyonunu kullanın.