1 page.title=Mendefinisikan Bayangan dan Memangkas Tampilan 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2>Pelajaran ini mengajarkan Anda cara</h2> 8 <ol> 9 <li><a href="#Elevation">Menetapkan Elevasi pada Tampilan Anda</a></li> 10 <li><a href="#Shadows">Menyesuaikan Bayangan dan Garis Luar Tampilan</a></li> 11 <li><a href="#Clip">Memangkas Tampilan</a></li> 12 </ol> 13 <h2>Anda juga harus membaca</h2> 14 <ul> 15 <li><a href="http://www.google.com/design/spec">Spesifikasi desain bahan</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Desain bahan di Android</a></li> 17 </ul> 18 </div> 19 </div> 20 21 <p>Desain bahan memperkenalkan elevasi untuk elemen-elemen UI. Elevasi membantu pengguna memahami 22 arti penting relatif masing-masing elemen dan memfokuskan perhatian pada tugas yang ada.</p> 23 24 <p>Elevasi tampilan, yang dinyatakan dengan properti Z, menentukan tampilan visual 25 bayangannya: tampilan dengan nilai Z lebih tinggi menghasilkan bayangan lebih besar dan lebih halus. Tampilan dengan nilai Z lebih tinggi menutupi 26 tampilan dengan nilai Z lebih rendah; akan tetapi, nilai Z tampilan tidak memengaruhi ukuran tampilan.</p> 27 28 <p>Bayangan digambar oleh induk tampilan yang dinaikkan, sehingga terkena pemangkasan standar tampilan, 29 yang dipangkas oleh induk secara default.</p> 30 31 <p>Elevasi juga berguna untuk membuat animasi tempat memunculkan widget untuk sementara di atas 32 bidang tampilan saat melakukan beberapa tindakan.</p> 33 34 <p>Untuk informasi selengkapnya tentang elevasi dalam desain bahan, lihat 35 <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objek 36 di ruang 3D</a>.</p> 37 38 39 <h2 id="Elevation">Menetapkan Elevasi pada Tampilan Anda</h2> 40 41 <p>Nilai Z untuk tampilan memiliki dua komponen: 42 43 <ul> 44 <li>Elevasi: Komponen statis.</li> 45 <li>Transformasi: Komponen dinamis yang digunakan untuk animasi.</li> 46 </ul> 47 48 <p><code>Z = elevation + translationZ</code></p> 49 50 <img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" /> 51 <p class="img-caption"><strong>Gambar 1</strong> - Bayangan untuk berbagai elevasi tampilan.</p> 52 53 <p>Untuk mengatur elevasi tampilan dalam definisi layout, gunakan atribut <code>android:elevation</code>. 54 Untuk mengatur elevasi tampilan dalam kode aktivitas, gunakan 55 metode {@link android.view.View#setElevation View.setElevation()}.</p> 56 57 <p>Untuk mengatur transformasi tampilan, gunakan metode {@link android.view.View#setTranslationZ 58 View.setTranslationZ()}.</p> 59 60 <p>Metode {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} dan {@link 61 android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} yang baru memudahkan 62 Anda menganimasikan elevasi tampilan. Untuk informasi selengkapnya, lihat referensi API untuk 63 {@link android.view.ViewPropertyAnimator} dan panduan pengembang <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Animasi Properti</a>. 64 </p> 65 66 <p>Anda juga bisa menggunakan {@link android.animation.StateListAnimator} 67 untuk menetapkan animasi ini secara deklaratif. Ini khususnya berguna bila 68 perubahan status memicu animasi, seperti saat seorang pengguna menekan tombol. Untuk informasi selengkapnya, lihat 69 <a href="{@docRoot}training/material/animations.html#ViewState">Menganimasikan Perubahan Status Tampilan</a>.</p> 70 71 <p>Nilai Z diukur dengan satuan dp (density-independent pixel).</p> 72 73 74 <h2 id="Shadows">Menyesuaikan Bayangan dan Garis Luar Tampilan</h2> 75 76 <p>Batas-batas drawable latar belakang tampilan menentukan bentuk default bayangannya. 77 <strong>Garis luar</strong> menyatakan bentuk luar objek grafis dan mendefinisikan 78 bidang riak untuk umpan balik sentuh.</p> 79 80 <p>Perhatikan tampilan ini, yang didefinisikan dengan drawable latar belakang:</p> 81 82 <pre> 83 <TextView 84 android:id="@+id/myview" 85 ... 86 android:elevation="2dp" 87 android:background="@drawable/myrect" /> 88 </pre> 89 90 <p>Drawable latar belakang didefinisikan sebagai persegi panjang dengan sudut membulat:</p> 91 92 <pre> 93 <!-- res/drawable/myrect.xml --> 94 <shape xmlns:android="http://schemas.android.com/apk/res/android" 95 android:shape="rectangle"> 96 <solid android:color="#42000000" /> 97 <corners android:radius="5dp" /> 98 </shape> 99 </pre> 100 101 <p>Tampilan ini menghasilkan bayangan dengan sudut membulat, karena drawable latar belakang mendefinisikan 102 garis luar tampilan. Memberikan garis luar custom akan mengesampingkan bentuk default bayangan tampilan.</p> 103 104 <p>Untuk mendefinisikan garis luar custom suatu tampilan dalam kode Anda:<p> 105 106 <ol> 107 <li>Perluas kelas {@link android.view.ViewOutlineProvider}.</li> 108 <li>Kesampingkan metode {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li> 109 <li>Tetapkan penyedia garis luar baru untuk tampilan Anda dengan metode {@link 110 android.view.View#setOutlineProvider View.setOutlineProvider()}.</li> 111 </ol> 112 113 <p>Anda bisa membuat garis luar lonjong dan persegi panjang yang bersudut membulat dengan menggunakan metode dalam 114 kelas {@link android.graphics.Outline}. Penyedia garis luar default untuk tampilan memperoleh garis luar 115 dari latar belakang tampilan. Untuk mencegah tampilan menghasilkan bayangan, atur penyedia garis luarnya 116 ke <code>null</code>.</p> 117 118 119 <h2 id="Clip">Memangkas Tampilan</h2> 120 121 <p>Memangkas tampilan memudahkan Anda mengubah bentuk tampilan. Anda bisa memangkas tampilan agar 122 konsistensi dengan elemen desain lainnya atau mengubah bentuk tampilan untuk merespons input pengguna. 123 Anda bisa memangkas tampilan hingga area garis luarnya dengan menggunakan metode {@link android.view.View#setClipToOutline 124 View.setClipToOutline()} atau atribut <code>android:clipToOutline</code>. Hanya 125 garis-garis luar persegi panjang, lingkaran, dan persegi panjang bersudut bulat yang mendukung pemangkasan, seperti yang ditentukan oleh 126 metode {@link android.graphics.Outline#canClip Outline.canClip()}.</p> 127 128 <p>Untuk memangkas tampilan ke bentuk drawable, atur drawable sebagai latar belakang tampilan 129 (seperti yang ditampilkan di atas) dan panggil metode {@link android.view.View#setClipToOutline View.setClipToOutline()}. 130 </p> 131 132 <p>Memangkas tampilan adalah operasi yang mahal; jadi, jangan animasikan bentuk yang Anda gunakan 133 untuk memangkas tampilan. Untuk memperoleh efek ini, gunakan animasi <a href="{@docRoot}training/material/animations.html#Reveal">Reveal Effect</a>.</p> 134
