Skip to content

Most visited

Recently visited

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,請參閱定義自訂動畫

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

在 WeChat 上追蹤 Google Developers

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience. (Dec 2017 Android Platform & Tools Survey)