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

Oluşturma yöntemini deneyin

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

Modifier.shadow() →

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

Not: Bu sayfada, yükseklikle elde edilen gölgeler açıklanmaktadır. Material3, yüzey rengine dayalı bir yükseklik yaklaşımı sunar. Tutarlılık ve kullanıcı deneyimine yaklaşım hakkında daha fazla bilgi için Materyal Yükseklik bölümünü inceleyin ve projenizi Jetpack Compose'a taşıyın.

Bir görünümün Z özelliğiyle temsil edilen yüksekliği, gölgesinin görsel görünümünü belirler. Z değerleri daha yüksek olan görüntülemeler daha büyük ve daha yumuşak gölgeler oluşturur ve daha düşük Z değerlerine sahip görüntülemeleri engeller. Ancak bir görünümün Z değeri o görünümün boyutunu etkilemez.

Şekil 1. Z eksenindeki yükseklik ve ortaya çıkan gölge.

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

Yükseklik, işlemler gerçekleştirirken widget'ların geçici olarak görünüm düzlemi üzerinde yükseldiği animasyonlar oluşturmak için de faydalıdır.

Daha fazla bilgi için Materyal Tasarım'da Yükseklik bölümüne bakın.

Görünümlerinize yükseklik atama

Bir görünümün Z değerinin iki bileşeni vardır:

• 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 pikseller) cinsinden ölçülür.

Şekil 2. Farklı yükseklikler için dp cinsinden farklı gölgeler.

Bir görünümün varsayılan yüksekliğini ayarlamak için XML düzenindeki android:elevation özelliğini kullanın. Bir etkinliğin kodunda bir görünümün yüksekliğini 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üntüleme artışlarını canlandırmanızı sağlar. Daha fazla bilgi için ViewPropertyAnimator API referansına ve mülk animasyonu geliştirici kılavuzuna bakın.

Bu animasyonları bildirim temelli bir şekilde belirtmek için StateListAnimator de kullanabilirsiniz. Bu, özellikle kullanıcının bir düğmeye dokunması gibi durum değişikliklerinin animasyonu tetiklediği durumlarda yararlı olur. Daha fazla bilgi için StateListAnimator kullanarak görünüm durumu değişikliklerini canlandırma bölümüne bakın.

Görünüm gölgelerini ve dış çizgilerini özelleştirme

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

Arka plan çekilebilir özelliğiyle tanımlanan aşağıdaki görünümü ele alalım:

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

Çekilebilir arka plan, köşeleri yuvarlatılmış 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 çekilebilir öğesi görünümün dış çizgisini tanımladığından, görünümde köşeleri yuvarlatılmış bir gölge oluşur. Özel bir dış çizgi sağlandığında görünümün gölgesinin varsayılan şekli geçersiz kılınır.

Kodunuzda bir görünüm için özel bir dış çizgi tanımlamak için 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 görünümünüze yeni dış çizgi sağlayıcı atayın.

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

Kliplerin izlenme sayısı

Kırpma görünümleri, bir görünümün şeklini değiştirmenize olanak tanır. Diğer tasarım öğeleriyle tutarlılık sağlamak veya kullanıcı girişine göre görünümün şeklini değiştirmek için görünümleri kırpabilirsiniz. View.setClipToOutline() yöntemini kullanarak bir görünümü dış çizgi alanına kırpabilirsiniz. Yalnızca dikdörtgen, daire ve yuvarlak dikdörtgen olan dış çizgiler Outline.canClip() yöntemi tarafından belirlendiği üzere kırpmayı destekler.

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

Görünümleri kırpmak pahalı bir işlemdir. Bu nedenle, bir görünümü kırpmak için kullandığınız şekle animasyon uygulamayın. Bu efekti elde etmek için gösterme animasyonunu kullanın.