1page.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
22arti 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
25bayangannya: tampilan dengan nilai Z lebih tinggi menghasilkan bayangan lebih besar dan lebih halus. Tampilan dengan nilai Z lebih tinggi menutupi
26tampilan 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,
29yang dipangkas oleh induk secara default.</p>
30
31<p>Elevasi juga berguna untuk membuat animasi tempat memunculkan widget untuk sementara di atas
32bidang 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
36di 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
55metode {@link android.view.View#setElevation View.setElevation()}.</p>
56
57<p>Untuk mengatur transformasi tampilan, gunakan metode {@link android.view.View#setTranslationZ
58View.setTranslationZ()}.</p>
59
60<p>Metode {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} dan {@link
61android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} yang baru memudahkan
62Anda 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}
67untuk menetapkan animasi ini secara deklaratif. Ini khususnya berguna bila
68perubahan 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
78bidang riak untuk umpan balik sentuh.</p>
79
80<p>Perhatikan tampilan ini, yang didefinisikan dengan drawable latar belakang:</p>
81
82<pre>
83&lt;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&lt;!-- res/drawable/myrect.xml -->
94&lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
95       android:shape="rectangle">
96    &lt;solid android:color="#42000000" />
97    &lt;corners android:radius="5dp" />
98&lt;/shape>
99</pre>
100
101<p>Tampilan ini menghasilkan bayangan dengan sudut membulat, karena drawable latar belakang mendefinisikan
102garis 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
110android.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
114kelas {@link android.graphics.Outline}. Penyedia garis luar default untuk tampilan memperoleh garis luar
115dari latar belakang tampilan. Untuk mencegah tampilan menghasilkan bayangan, atur penyedia garis luarnya
116ke <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
122konsistensi dengan elemen desain lainnya atau mengubah bentuk tampilan untuk merespons input pengguna.
123Anda bisa memangkas tampilan hingga area garis luarnya dengan menggunakan metode {@link android.view.View#setClipToOutline
124View.setClipToOutline()} atau atribut <code>android:clipToOutline</code>. Hanya
125garis-garis luar persegi panjang, lingkaran, dan persegi panjang bersudut bulat yang mendukung pemangkasan, seperti yang ditentukan oleh
126metode {@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
133untuk memangkas tampilan. Untuk memperoleh efek ini, gunakan animasi <a href="{@docRoot}training/material/animations.html#Reveal">Reveal Effect</a>.</p>
134