Langsung ke konten

Paling sering dikunjungi

Terakhir dikunjungi

navigation

Mendefinisikan Bayangan dan Memangkas Tampilan

Desain material memperkenalkan elevasi untuk elemen-elemen UI. Elevasi membantu pengguna memahami arti penting relatif masing-masing elemen dan memfokuskan perhatian pada tugas yang ada.

Elevasi tampilan, yang dinyatakan dengan properti Z, menentukan tampilan visual bayangannya: tampilan dengan nilai Z lebih tinggi mentransmisikan bayangan lebih besar dan lebih halus. Tampilan dengan nilai Z lebih tinggi menutupi tampilan dengan nilai Z lebih rendah; akan tetapi, nilai Z tampilan tidak memengaruhi ukuran tampilan.

Bayangan digambar oleh induk tampilan yang dinaikkan, sehingga terkena pemangkasan standar tampilan, yang dipangkas oleh induk secara default.

Elevasi juga berguna untuk membuat animasi tempat memunculkan widget untuk sementara di atas bidang tampilan saat melakukan beberapa aksi.

Untuk informasi selengkapnya tentang elevasi dalam desain material, lihat Objek di ruang 3D.

Menetapkan Elevasi pada Tampilan Anda

Nilai Z untuk tampilan memiliki dua komponen:

Z = elevation + translationZ

Gambar 1 - Bayangan untuk berbagai elevasi tampilan.

Untuk mengatur elevasi tampilan dalam definisi layout, gunakan atribut android:elevation. Untuk mengatur elevasi tampilan dalam kode aktivitas, gunakan metode View.setElevation().

Untuk mengatur transformasi tampilan, gunakan metode View.setTranslationZ().

Metode ViewPropertyAnimator.z() dan ViewPropertyAnimator.translationZ() yang baru memudahkan Anda menganimasikan elevasi tampilan. Untuk informasi selengkapnya, lihat referensi API untuk ViewPropertyAnimator dan panduan developer Animasi Properti.

Anda juga bisa menggunakan StateListAnimator untuk menetapkan animasi ini secara deklaratif. Ini khususnya berguna bila perubahan status memicu animasi, seperti saat seorang pengguna menekan tombol. Untuk informasi selengkapnya, lihat Menganimasikan Perubahan Status Tampilan.

Nilai Z diukur dengan satuan dp (density-independent pixel).

Menyesuaikan Bayangan dan Garis Luar Tampilan

Batas-batas sumber daya dapat digambar di latar belakang tampilan menentukan bentuk default bayangannya. Garis luar menyatakan bentuk luar objek grafis dan mendefinisikan bidang riak untuk umpan balik sentuh.

Perhatikan tampilan ini, yang didefinisikan dengan sumber daya dapat digambar latar belakang:

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

Sumber daya dapat digambar di latar belakang didefinisikan sebagai persegi panjang dengan sudut lengkung:

<!-- 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>

Tampilan ini mentransmisikan bayangan dengan sudut lengkung, karena sumber daya dapat digambar di latar belakang mendefinisikan garis luar tampilan. Memberikan garis luar khusus akan mengganti bentuk default bayangan tampilan.

Untuk mendefinisikan garis luar khusus suatu tampilan dalam kode Anda:

  1. Perluas kelas ViewOutlineProvider.
  2. Ganti metode getOutline().
  3. Tetapkan penyedia garis luar baru untuk tampilan Anda dengan metode View.setOutlineProvider().

Anda bisa membuat garis luar lonjong dan persegi panjang yang bersudut melengkung dengan menggunakan metode dalam kelas Outline. Penyedia garis luar default untuk tampilan memperoleh garis luar dari latar belakang tampilan. Untuk mencegah tampilan mentransmisikan bayangan, setel penyedia garis luarnya ke null.

Memangkas Tampilan

Memangkas tampilan memudahkan Anda mengubah bentuk tampilan. Anda bisa memangkas tampilan agar konsistensi dengan elemen desain lainnya atau mengubah bentuk tampilan untuk merespons masukan pengguna. Anda bisa memangkas tampilan hingga area garis luarnya dengan menggunakan metode View.setClipToOutline() atau atribut android:clipToOutline. Hanya garis-garis luar persegi panjang, lingkaran, dan persegi panjang bersudut bulat yang mendukung pemangkasan, seperti yang ditentukan oleh metode Outline.canClip().

Untuk memangkas tampilan ke bentuk sumber daya dapat digambar, atur itu sebagai latar belakang tampilan (seperti yang ditampilkan di atas) dan panggil metode View.setClipToOutline().

Memangkas tampilan adalah operasi yang mahal; jadi, jangan animasikan bentuk yang Anda gunakan untuk memangkas tampilan. Untuk memperoleh efek ini, gunakan animasi Reveal Effect.

Situs ini menggunakan cookies untuk menyimpan preferensi Anda tentang bahasa di situs tertentu dan opsi tampilan.

Dapatkan berita dan tips terbaru dari developer Android yang akan membantu Anda mencapai kesuksesan di Google Play.

* Wajib Diisi

Hore!

Ikuti Google Developers di WeChat

Buka situs ini dalam bahasa ?

Anda meminta halaman dalam bahasa , namun preferensi bahasa untuk situs ini adalah .

Ingin mengubah preferensi bahasa dan mengakses situs ini dalam bahasa ? Jika nanti Anda ingin mengubah preferensi bahasa, gunakan menu bahasa di bagian bawah setiap halaman.

Kelas ini memerlukan tingkat API atau yang lebih tinggi

Dokumen ini tersembunyi karena level API yang Anda pilih untuk dokumentasi ini adalah . Anda dapat mengubah level API dokumentasi dengan pemilih di atas menu navigasi sebelah kiri.

Untuk informasi lebih lanjut tentang menentukan level API yang diperlukan aplikasi Anda, baca Mendukung Versi Platform Yang Berbeda.

Take a short survey?
Help us improve the Android developer experience. (April 2018 — Developer Survey)