1page.title=使用材料設計風格 2 3@jd:body 4 5<div id="tb-wrapper"> 6<div id="tb"> 7<h2>本課程示範</h2> 8<ol> 9 <li><a href="#ColorPalette">自訂色板</a></li> 10 <li><a href="#StatusBar">自訂狀態列</a></li> 11 <li><a href="#Inheritance">設計風格個別視圖</a></li> 12</ol> 13<h2>您也應該閱讀</h2> 14<ul> 15 <li><a href="http://www.google.com/design/spec">材料設計規格</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Android 上的材料設計</a></li> 17</ul> 18</div> 19</div> 20 21 22<p>新的材料設計風格提供：</p> 23 24<ul> 25 <li>可設定其色板的系統小工具</li> 26 <li>系統小工具的輕觸回饋動畫</li> 27 <li>操作行為轉換動畫</li> 28</ul> 29 30<p>您可根據品牌特性，使用您控制的色板以自訂材料設計風格的外觀。 31您可以使用風格主題屬性，為行為欄和狀態列著色，如<a href="#fig3">圖 3</a> 所示。 32</p> 33 34<p>系統小工具經過全新設計，有輕觸回饋動畫。您可以為應用程式自訂色板、輕觸回饋動畫，以及操作行為轉換。 35</p> 36 37<p>材料設計風格定義為：</p> 38 39<ul> 40 <li><code>@android:style/Theme.Material</code> (深色版本)</li> 41 <li><code>@android:style/Theme.Material.Light</code> (淺色版本)</li> 42 <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li> 43</ul> 44 45<p>如需您可以使用的材料樣式清單，請參閱 {@link android.R.style R.style} 的 API 參考資料。 46</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>圖 1</strong>.深色材料設計風格</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>圖 2</strong>.淺色材料設計風格</p> 60 </div> 61</div> 62<br style="clear:left"> 63</div> 64 65<p class="note"> 66<strong>注意：</strong>材料設計風格只能在 Android 5.0 (API 級別 21) 及以上版本中使用。 67<a href="{@docRoot}tools/support-library/features.html#v7">v7 支援程式庫</a>針對某些小工具提供使用材料設計樣式的設計風格，並支援自訂色板。 68 69如需詳細資訊，請參閱<a href="{@docRoot}training/material/compatibility.html">維持相容性</a>。 70 71</p> 72 73 74<h2 id="ColorPalette">自訂色板</h2> 75 76<p style="margin-bottom:30px">如要自訂設計風格的基礎顏色來搭配您的品牌，在繼承材料設計風格時，請使用設計風格屬性定義您的自訂顏色： 77</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>圖 3.</strong>自訂材料設計風格。</p> 98</div> 99 100 101<h2 id="StatusBar">自訂狀態列</h2> 102 103<p>材料設計風格可讓您輕鬆自訂狀態列，因此，您可指定符合品牌的顏色，並提供足夠的對比來顯示白色的狀態圖示。 104如要設定狀態列的自訂顏色，請在延伸材料設計風格時使用 <code>android:statusBarColor</code> 屬性。 105 106<code>android:statusBarColor</code> 預設會繼承 <code>android:colorPrimaryDark</code> 的值。 107</p> 108 109<p>您也可以自行繪製狀態列。例如，若您想在相片上面顯示透明的狀態列，卻想搭配一點深色的漸層以確保白色的狀態圖示清晰可見。 110 111請將 <code>android:statusBarColor</code> 屬性設定為 <code>@android:color/transparent</code>，並且視需要調整視窗標幟。 112您也可以使用 {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} 方法顯示動畫或進行淡化。 113 114</p> 115 116<p class="note"> 117<strong>注意：</strong>狀態列應該與主要工具列有清楚區分的輪廓，除非您想在這些列後面顯示全版的豐富圖像或媒體內容，或使用漸層以確保圖示清晰可見。 118 119 120</p> 121 122<p>當您自訂瀏覽列和狀態列時，請讓兩者都變成透明，或者只修改狀態列。 123在其他所有狀況下，瀏覽列都必須保持黑色。</p> 124 125 126<h2 id="Inheritance">設計風格個別視圖</h3> 127 128<p>XML 版面配置定義中的元素可以指定 <code>android:theme</code> 屬性，參考設計風格資源。 129此屬性會修改元素和所有子元素的設計風格，對於改變介面特定部份的設計風格色板非常實用。 130 131</p> 132
