diff options
Diffstat (limited to 'docs/html-intl/intl/zh-tw/training/material/get-started.jd')
| -rw-r--r-- | docs/html-intl/intl/zh-tw/training/material/get-started.jd | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/docs/html-intl/intl/zh-tw/training/material/get-started.jd b/docs/html-intl/intl/zh-tw/training/material/get-started.jd new file mode 100644 index 000000000000..dfa0074e17ce --- /dev/null +++ b/docs/html-intl/intl/zh-tw/training/material/get-started.jd @@ -0,0 +1,171 @@ +page.title=開始使用 + +@jd:body + +<div id="tb-wrapper"> +<div id="tb"> +<h2>本課程示範</h2> +<ol> + <li><a href="#ApplyTheme">套用材料設計風格</a></li> + <li><a href="#Layouts">設計版面配置</a></li> + <li><a href="#Depth">指定視圖中的高度</a></li> + <li><a href="#ListsCards">建立清單和卡片</a></li> + <li><a href="#Animations">自訂動畫</a></li> +</ol> +<h2>您也應該閱讀</h2> +<ul> + <li><a href="http://www.google.com/design/spec">材料設計規格</a></li> + <li><a href="{@docRoot}design/material/index.html">Android 上的材料設計</a></li> +</ul> +</div> +</div> + + +<p>如果要使用材料設計建立應用程式：</p> + +<ol> + <li style="margin-bottom:10px"> + 請閱讀<a href="http://www.google.com/design/spec">材料設計規格</a>。</li> + <li style="margin-bottom:10px"> + 對應用程式套用材料<strong>設計風格</strong>。</li> + <li style="margin-bottom:10px"> + 依照材料設計指南建立<strong>版面配置</strong>。</li> + <li style="margin-bottom:10px"> + 指定視圖的<strong>高度</strong>來投射出陰影。</li> + <li style="margin-bottom:10px"> + 使用系統<strong>小工具</strong>製作清單和卡片。</li> + <li style="margin-bottom:10px"> + 自訂應用程式中的<strong>動畫</strong>。</li> +</ol> + +<h3>維持向下相容性</h3> + +<p>您可在應用程式中加入多種材料設計功能，同時維持與 Android 5.0 之前版本的相容性。 +如需詳細資訊，請參閱<a href="{@docRoot}training/material/compatibility.html">維持相容性</a>。 +</p> + +<h3>更新應用程式以納入材料設計功能</h3> + +<p>如要更新現有應用程式以納入材料設計功能，請依照下列材料設計指南更新版面配置。 +同時確保加入深度、輕觸回饋和動畫。 +</p> + +<h3>使用材料設計建立新應用程式</h3> + +<p>如果您要使用材料設計功能建立新應用程式，<a href="http://www.google.com/design/spec">材料設計指南</a>可以提供一致性的設計架構。 +請依照下列指南，使用 Android 架構中的新功能來設計和開發應用程式。 +</p> + + +<h2 id="ApplyTheme">套用材料設計風格</h2> + +<p>如要在應用程式中套用材料設計風格，請指定一個繼承自 <code>android:Theme.Material</code> 的樣式： +</p> + +<pre> +<!-- res/values/styles.xml --> +<resources> + <!-- your theme inherits from the material theme --> + <style name="AppTheme" parent="android:Theme.Material"> + <!-- theme customizations --> + </style> +</resources> +</pre> + +<p>材料設計風格提供已更新的系統小工具，可讓您設定系統小工具的色板和預設動畫，作為輕觸回饋與操作行為轉換。 +如需詳細資訊，請參閱<a href="{@docRoot}training/material/theme.html">使用材料設計風格</a>。 +</p> + + +<h2 id="Layouts">設計版面配置</h2> + +<p>除了套用和自訂材料設計風格之外，您的版面配置也必須遵守<a href="http://www.google.com/design/spec">材料設計指南</a>。 +當您設計版面配置時，請注意下列事項： +</p> + +<ul> +<li>基準線網格</li> +<li>邊線</li> +<li>間距</li> +<li>輕觸目標大小</li> +<li>版面配置結構</li> +</ul> + + +<h2 id="Depth">指定視圖中的高度</h2> + +<p>檢視可以投射出陰影，因此檢視的高度值會決定陰影的大小及其繪製順序。 +如要設定視圖的高度，請在版面配置中使用 <code>android:elevation</code> 屬性： +</p> + +<pre> +<TextView + android:id="@+id/my_textview" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:text="@string/next" + android:background="@color/white" + android:elevation="5dp" /> +</pre> + +<p>您可以使用新的 <code>translationZ</code> 屬性建立動畫，來反映視圖高度的短暫變化。 +高度變化可以用來<a href="{@docRoot}training/material/animations.html#ViewState">回應輕觸手勢</a>。 + +</p> + +<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪檢視</a>。 +</p> + + +<h2 id="ListsCards">建立清單和卡片</h2> + +<p>{@link android.support.v7.widget.RecyclerView} 是一個更容易插入的 {@link +android.widget.ListView} 版本，可支援不同的版面配置類型並提供更好的效能。{@link android.support.v7.widget.CardView} 可讓您在不同的應用程式之間以一致的外觀顯示卡片內部的資訊。 + +下列程式碼範例示範如何在版面配置中加入 {@link android.support.v7.widget.CardView}： +</p> + +<pre> +<android.support.v7.widget.CardView + android:id="@+id/card_view" + android:layout_width="200dp" + android:layout_height="200dp" + card_view:cardCornerRadius="3dp"> + ... +</android.support.v7.widget.CardView> +</pre> + +<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/lists-cards.html">建立清單和卡片</a>。 +</p> + + +<h2 id="Animations">自訂動畫</h2> + +<p>Android 5.0 (API 級別 21) 包含許多新的 API 以便在應用程式中建立自訂動畫。例如，您可以啟用操作行為轉換，並在操作行為內部定義離開轉換： + +</p> + +<pre> +public class MyActivity extends Activity { + + @Override + protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + // enable transitions + getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); + setContentView(R.layout.activity_my); + } + + public void onSomeButtonClicked(View view) { + getWindow().setExitTransition(new Explode()); + Intent intent = new Intent(this, MyOtherActivity.class); + startActivity(intent, + ActivityOptions + .makeSceneTransitionAnimation(this).toBundle()); + } +} +</pre> + +<p>當您從這個操作行為開始另一個操作行為時，就會啟動離開轉換。</p> + +<p>如需深入了解新的動畫 API，請參閱<a href="{@docRoot}training/material/animations.html">定義自訂動畫</a>。</p> |