page.title=開始使用 @jd:body

本課程示範

套用材料設計風格
設計版面配置
指定視圖中的高度
建立清單和卡片
自訂動畫

您也應該閱讀

如果要使用材料設計建立應用程式：

請閱讀材料設計規格。
對應用程式套用材料設計風格。
依照材料設計指南建立版面配置。
指定視圖的高度來投射出陰影。
使用系統小工具製作清單和卡片。
自訂應用程式中的動畫。

維持向下相容性

您可在應用程式中加入多種材料設計功能，同時維持與 Android 5.0 之前版本的相容性。如需詳細資訊，請參閱維持相容性。

更新應用程式以納入材料設計功能

如要更新現有應用程式以納入材料設計功能，請依照下列材料設計指南更新版面配置。同時確保加入深度、輕觸回饋和動畫。

使用材料設計建立新應用程式

如果您要使用材料設計功能建立新應用程式，材料設計指南可以提供一致性的設計架構。請依照下列指南，使用 Android 架構中的新功能來設計和開發應用程式。

套用材料設計風格

如要在應用程式中套用材料設計風格，請指定一個繼承自 android:Theme.Material 的樣式：

<!-- res/values/styles.xml -->
<resources>
  <!-- your theme inherits from the material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- theme customizations -->
  </style>
</resources>

材料設計風格提供已更新的系統小工具，可讓您設定系統小工具的色板和預設動畫，作為輕觸回饋與操作行為轉換。如需詳細資訊，請參閱使用材料設計風格。

設計版面配置

除了套用和自訂材料設計風格之外，您的版面配置也必須遵守材料設計指南。當您設計版面配置時，請注意下列事項：

基準線網格
邊線
間距
輕觸目標大小
版面配置結構

指定視圖中的高度

檢視可以投射出陰影，因此檢視的高度值會決定陰影的大小及其繪製順序。如要設定視圖的高度，請在版面配置中使用 android:elevation 屬性：

<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" />

您可以使用新的 translationZ 屬性建立動畫，來反映視圖高度的短暫變化。高度變化可以用來回應輕觸手勢。

如需詳細資訊，請參閱定義陰影和裁剪檢視。

建立清單和卡片

{@link android.support.v7.widget.RecyclerView} 是一個更容易插入的 {@link android.widget.ListView} 版本，可支援不同的版面配置類型並提供更好的效能。{@link android.support.v7.widget.CardView} 可讓您在不同的應用程式之間以一致的外觀顯示卡片內部的資訊。下列程式碼範例示範如何在版面配置中加入 {@link android.support.v7.widget.CardView}：

<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>

如需詳細資訊，請參閱建立清單和卡片。

自訂動畫

Android 5.0 (API 級別 21) 包含許多新的 API 以便在應用程式中建立自訂動畫。例如，您可以啟用操作行為轉換，並在操作行為內部定義離開轉換：

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());
    }
}

當您從這個操作行為開始另一個操作行為時，就會啟動離開轉換。

如需深入了解新的動畫 API，請參閱定義自訂動畫。