直接前往內容

最常造訪的網頁

最近瀏覽的網頁

navigation

開始使用

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

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

維持向下相容性

您可在應用程式中加入多種材料設計功能,同時維持與 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 屬性建立動畫,來反映視圖高度的短暫變化。 高度變化可以用來回應輕觸手勢

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

建立清單和卡片

RecyclerView 是一個更容易插入的 ListView 版本,可支援不同的版面配置類型並提供更好的效能。CardView 可讓您在不同的應用程式之間以一致的外觀顯示卡片內部的資訊。 下列程式碼範例示範如何在版面配置中加入 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,請參閱定義自訂動畫

本網站使用 Cookie 儲存你在此指定的語言和顯示選項偏好設定。

掌握有關 Android 開發人員的最新消息和實用訣竅,協助你製作最受歡迎的 Google Play 內容。

* 必填欄位

訂閱成功!

在 WeChat 上追蹤 Google Developers

你要以瀏覽這個網站嗎?

你要求以顯示這個網頁,但你為此網站指定的語言偏好設定為

是否要變更語言偏好設定並改用瀏覽網站?稍後如要變更語言偏好設定,請利用位在每個網頁最下方的語言選單來調整設定。

你的 API 層級必須達 以上才能存取這個級別

本說明文件已隱藏,因為你為該文件選取的 API 層級為 。使用左側導覽列上方的選取工具即可變更說明文件的 API 層級。

如需進一步瞭解如何為應用程式指定 API 層級的相關資訊,請參閱 Supporting Different Platform Versions (支援不同的平台版本) (英文)。

Take a short survey?
Help us improve the Android developer experience. (April 2018 — Developer Survey)