1 page.title=S dng Ch Material 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="#ColorPalette">Ty chnh Bng mu</a></li> 10 <li><a href="#StatusBar">Ty chnh Thanh Trng thi</a></li> 11 <li><a href="#Inheritance">To Ch Dng xem Ring</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 22 <p>Ch material mi cung cp:</p> 23 24 <ul> 25 <li>Widget h thng cho php bn t bng mu ca chng</li> 26 <li>Hot hnh phn hi chm cho widget h thng</li> 27 <li>Hot hnh chuyn tip hot ng</li> 28 </ul> 29 30 <p>Bn c th ty chnh din mo ca ch material 31 theo nhn din thng hiu ca mnh bng mt bng mu m bn kim sot. Bn c th nhum mu thanh hnh ng v 32 thanh trng thi bng cch s dng cc thuc tnh ch nh minh ha trong <a href="#fig3">Hnh 3</a>.</p> 33 34 <p>Widget h thng c mt thit k mi v hot hnh phn hi chm. Bn c th ty chnh 35 bng mu, hot hnh phn hi chm v chuyn tip hot ng cho ng dng ca mnh.</p> 36 37 <p>Ch material c nh ngha l:</p> 38 39 <ul> 40 <li><code>@android:style/Theme.Material</code> (phin bn ti)</li> 41 <li><code>@android:style/Theme.Material.Light</code> (phin bn sng)</li> 42 <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li> 43 </ul> 44 45 <p> bit danh sch cc kiu material m bn c th s dng, hy xem ti liu tham chiu API cho 46 {@link android.R.style R.style}.</p> 47 48 <!-- two columns, dark/light material theme example --> 49 <div style="width:700px;margin-top:25px;margin-bottom:10px"> 50 <div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 51 <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238"> 52 <div style="width:170px;margin:0 auto"> 53 <p style="margin-top:8px;font-size:12px"><strong>Hnh 1</strong>. Giao din material ti</p> 54 </div> 55 </div> 56 <div style="float:left;width:250px;margin-right:0px;"> 57 <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238"> 58 <div style="width:170px;margin:0 auto"> 59 <p style="margin-top:8px;font-size:12px"><strong>Hnh 2</strong>. Giao din material sng</p> 60 </div> 61 </div> 62 <br style="clear:left"> 63 </div> 64 65 <p class="note"> 66 <strong>Lu :</strong> Ch material ch sn c trong Android 5.0 (API mc 21) tr 67 ln. <a href="{@docRoot}tools/support-library/features.html#v7">Th vin H tr v7</a> 68 cung cp ch mang phong cch material design cho mt s widget v h tr ty chnh 69 bng mu. bit thm thng tin, hy xem phn 70 <a href="{@docRoot}training/material/compatibility.html">Duy tr Tnh tng thch</a>. 71 </p> 72 73 74 <h2 id="ColorPalette">Ty chnh Bng mu</h2> 75 76 <p style="margin-bottom:30px"> ty chnh cc mu c bn ca ch cho ph hp vi nhn hiu ca bn, hy nh ngha 77 mu ty chnh ca bn bng thuc tnh ch khi bn k tha t ch material:</p> 78 79 <pre> 80 <resources> 81 <!-- inherit from the material theme --> 82 <style name="AppTheme" parent="android:Theme.Material"> 83 <!-- Main theme colors --> 84 <!-- your app branding color for the app bar --> 85 <item name="android:colorPrimary">@color/primary</item> 86 <!-- darker variant for the status bar and contextual app bars --> 87 <item name="android:colorPrimaryDark">@color/primary_dark</item> 88 <!-- theme UI controls like checkboxes and text fields --> 89 <item name="android:colorAccent">@color/accent</item> 90 </style> 91 </resources> 92 </pre> 93 94 <div style="float:right;margin-left:25px;margin-top:20px;margin-bottom:10px" id="fig3"> 95 <img src="{@docRoot}training/material/images/ThemeColors.png" width="250" height="445" /> 96 <p class="img-caption" style="margin-bottom:0px"> 97 <strong>Hnh 3.</strong> Ty chnh ch material.</p> 98 </div> 99 100 101 <h2 id="StatusBar">Ty chnh Thanh Trng thi</h2> 102 103 <p>Ch material cho php bn d dng ty chnh thanh trng thi bn c th quy nh 104 mu cho ph hp vi nhn hiu ca mnh v m bo tng phn hin th biu tng trng thi mu trng. 105 t mu ty chnh cho thanh trng thi, hy s dng thuc tnh <code>android:statusBarColor</code> khi 106 bn m rng ch material. Theo mc nh, <code>android:statusBarColor</code> k tha 107 gi tr ca <code>android:colorPrimaryDark</code>.</p> 108 109 <p>Bn cng c th t v pha sau thanh trng thi. V d, nu bn mun hin th 110 thanh trng thi trong sut trn mt nh chp, vi graddien hi ti m bo biu tng 111 trng thi mu trng nhn thy c. lm vy, hy t thuc tnh <code>android:statusBarColor</code> thnh 112 <code>@android:color/transparent</code> v iu chnh c ca s nu cn. Bn cng c th 113 s dng phng thc {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} cho hot hnh 114 hoc hiu ng m dn.</p> 115 116 <p class="note"> 117 <strong>Lu :</strong> Thanh trng thi cn lun c mt bn v r rng t 118 thanh cng c chnh, tr trng hp bn hin th ni dung hnh nh hoc phng tin phong ph t cnh ti cnh pha sau 119 nhng thanh ny v khi bn s dng gradient m bo rng cc biu tng vn nhn thy c. 120 </p> 121 122 <p>Khi bn ty chnh thanh iu hng v trng thi, hy khin c hai u trong sut hoc ch sa i 123 thanh trng thi. Thanh iu hng nn gi li mu en trong mi trng hp khc.</p> 124 125 126 <h2 id="Inheritance">To Ch Dng xem Ring</h3> 127 128 <p>Nhng phn t trong nh ngha b tr XML c th quy nh thuc tnh <code>android:theme</code> 129 tham chiu ti mt ti nguyn ch . Thuc tnh ny sa i ch cho phn t v bt c 130 phn t con no, iu ny c ch i vi vic thay i bng mu ca ch trong mt phn c th 131 ca giao din.</p> 132
