1 page.title=nh ngha bng v Dng xem Ct hnh 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2>Bi hc ny hng dn bn cch</h2> 8 <ol> 9 <li><a href="#Elevation">Gn cao cho Dng xem ca Bn</a></li> 10 <li><a href="#Shadows">Ty chnh bng v Vin ca Dng xem</a></li> 11 <li><a href="#Clip">Dng xem Ct hnh</a></li> 12 </ol> 13 <h2>Bn cng nn c</h2> 14 <ul> 15 <li><a href="http://www.google.com/design/spec">c t phong cch Material Design</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Material Design trn Android</a></li> 17 </ul> 18 </div> 19 </div> 20 21 <p>Material design gii thiu cao cho phn t UI. cao gip ngi dng hiu c 22 tm quan trng tng i ca tng phn t v tp chung s ch ca h vo tc v hin c.</p> 23 24 <p> cao ca mt dng xem, c biu din bng thuc tnh Z, s xc nh din mo trc quan ca 25 bng : dng xem c gi tr Z cao hn s bng ln hn, mm hn. Dng xem c gi tr Z cao hn s che khut dng xem 26 c gi tr Z thp hn; tuy nhin, gi tr Z ca mt dng xem khng nh hng ti kch c ca dng xem.</p> 27 28 <p> bng c v bi dng xem m ca dng xem cao hn, do vy n ph thuc vo tiu chun ct dng xem, 29 c ct bi dng xem m theo mc nh.</p> 30 31 <p> cao cng hu ch trong vic to hot hnh ni widget tm thi dng cao hn 32 mt phng dng xem khi thc hin mt hnh ng no .</p> 33 34 <p> bit thm thng tin v cao trong material design, hy xem 35 <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">i tng 36 trong khng gian 3D</a>.</p> 37 38 39 <h2 id="Elevation">Gn cao cho Dng xem ca Bn</h2> 40 41 <p>Gi tr Z ca mt dng xem c hai thnh phn: 42 43 <ul> 44 <li> cao: Thnh phn tnh.</li> 45 <li> dch: Thnh phn ng c s dng cho hot hnh.</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>Hnh 1</strong> - bng cho cc cao dng xem khc nhau.</p> 52 53 <p> t cao ca dng xem trong mt nh ngha b tr, hy s dng thuc tnh <code>android:elevation</code> 54 . t cao ca dng xem trong m ca mt hot ng, hy s dng phng thc 55 {@link android.view.View#setElevation View.setElevation()}.</p> 56 57 <p> t dch ca dng xem, hy s dng phng thc {@link android.view.View#setTranslationZ 58 View.setTranslationZ()}.</p> 59 60 <p>Cc phng thc {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} v {@link 61 android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} mi cho php 62 bn d dng to hiu ng hot hnh cho cao ca dng xem. bit thm thng tin, hy xem ti liu tham kho API cho 63 {@link android.view.ViewPropertyAnimator} v hng dn cho nh pht trin v <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Hot hnh Thuc tnh</a> 64 .</p> 65 66 <p>Bn cng c th s dng {@link android.animation.StateListAnimator} 67 quy nh nhng hot hnh ny bng cch khai bo. iu ny c bit hu ch i vi trng hp cc thay i 68 trng thi s kch hot hot hnh nh khi ngi dng nhn mt nt. bit thm thng tin, hy xem phn 69 <a href="{@docRoot}training/material/animations.html#ViewState">To Hiu ng Hot hnh Thay i Trng thi Xem</a>.</p> 70 71 <p>Gi tr Z c o bng dp (im nh c lp vi mt ).</p> 72 73 74 <h2 id="Shadows">Ty chnh bng v Vin ca Dng xem</h2> 75 76 <p>Cc gii hn ni dung v c ca nn dng xem s xc nh hnh dng mc nh ca bng. 77 <strong>Vin</strong> biu th hnh dng ngoi ca mt i tng ha v nh ngha vng 78 gn sng cho phn hi chm.</p> 79 80 <p>Hy cn nhc dng xem sau c nh ngha vi ni dung v c lm nn:</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>Ni dung v c lm nn c nh ngha l mt hnh ch nht vi gc bo trn:</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>Dng xem s to bng c gc bo trn do ni dung v c lm nn s nh ngha 102 vin ca dng xem. Khi cung cp vin ty chnh, n ghi hnh dng mc nh ca bng dng xem.</p> 103 104 <p> nh ngha vin ty chnh cho mt dng xem trong m ca bn:<p> 105 106 <ol> 107 <li>M rng lp {@link android.view.ViewOutlineProvider}.</li> 108 <li>Ghi phng thc {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li> 109 <li>Gn trnh cung cp vin mi cho dng xem ca bn bng phng thc {@link 110 android.view.View#setOutlineProvider View.setOutlineProvider()}.</li> 111 </ol> 112 113 <p>Bn c th to vin hnh bu dc v hnh ch nht c gc bo trn bng cch s dng cc phng thc trong lp 114 {@link android.graphics.Outline}. Trnh cung cp vin mc nh cho dng xem s ly vin 115 t nn ca dng xem. ngn dng xem bng, hy t trnh cung cp vin ca n 116 thnh <code>null</code>.</p> 117 118 119 <h2 id="Clip">Dng xem Ct hnh</h2> 120 121 <p>Dng xem ct hnh cho php bn d dng thay i hnh dng ca mt dng xem. Bn c th ct hnh dng xem 122 nht qun vi cc phn t thit k khc hoc thay i hnh dng ca mt dng xem p ng li thng tin u vo ca ngi dng. 123 Bn c th ct mt dng xem thnh vng vin ca n bng cch s dng phng thc {@link android.view.View#setClipToOutline 124 View.setClipToOutline()} hoc thuc tnh <code>android:clipToOutline</code>. Ch 125 vin l hnh ch nht, hnh trn v hnh ch nht bo trn mi h tr ct hnh nh c xc nh bi phng thc 126 {@link android.graphics.Outline#canClip Outline.canClip()}.</p> 127 128 <p> ct dng xem thnh hnh dng ca mt ni dung v c, hy t ni dung v c lm nn ca dng xem 129 (nh minh ha bn trn) v gi phng thc {@link android.view.View#setClipToOutline View.setClipToOutline()} 130 .</p> 131 132 <p>Ct dng xem l mt thao tc tn km, v vy ng to hiu ng hot hnh cho hnh dng bn s dng 133 ct dng xem. t c hiu ng ny, hy s dng hot hnh <a href="{@docRoot}training/material/animations.html#Reveal">Hiu ng L ra</a>.</p> 134
