直接前往內容

最常造訪的網頁

最近瀏覽的網頁

navigation

建立清單和卡片

如要在應用程式中使用材料設計樣式建立複雜的清單和卡片,可以使用 RecyclerViewCardView 小工具。

建立清單

RecyclerView 小工具是比較進階和彈性的 ListView 版本。 這個小工具是一個用來顯示大型資料集的容器,只要維護少數幾個視圖,就可極有效率地捲動資料集。 當您的資料集元素在執行階段會根據使用者操作動作或網路事件而變更,請使用 RecyclerView 小工具。

RecyclerView 類別會提供下列項目,簡化大型資料集的顯示和處理方式:

您也可針對 RecyclerView 小工具定義自訂的版面配置管理員。

圖 1.RecyclerView 小工具。

如果要使用 RecyclerView 小工具,您必須指定配接器和版面配置管理員。 如要建立配接器,請延伸 RecyclerView.Adapter 類別。實作的詳細情形根據您的資料集和檢視類型而定。 如需詳細資訊,請參閱下面的範例

圖 2 - 含有 RecyclerView 的清單。

版面配置管理員會將 RecyclerView 內的項目視圖定位,並判斷何時要重複使用使用者不會再看到的項目視圖。 如要重複使用 (或回收) 某個視圖,版面配置管理員會要求配接器以資料集中不同的元素,取代視圖的內容。 使用此方式回收視圖可避免建立不必要的視圖或執行耗費資源的 findViewById() 查詢,以增進效能。

RecyclerView 提供下列內建的版面配置管理員:

如要建立自訂版面配置管理員,請延伸 RecyclerView.LayoutManager 類別。

動畫

RecyclerView 中,預設已啟用新增和移除項目的動畫。如果要自訂這些動畫,請延伸 RecyclerView.ItemAnimator 類別並使用 RecyclerView.setItemAnimator() 方法。

範例

下列程式碼範例示範如何在版面配置中加入 RecyclerView

<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

一旦您在版面配置中加入 RecyclerView 小工具之後,先取得該物件的控制代碼、將控制代碼連線到版面配置管理員,再連接配接器以便顯示資料:

public class MyActivity extends Activity {
    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

        // use this setting to improve performance if you know that changes
        // in content do not change the layout size of the RecyclerView
        mRecyclerView.setHasFixedSize(true);

        // use a linear layout manager
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);

        // specify an adapter (see also next example)
        mAdapter = new MyAdapter(myDataset);
        mRecyclerView.setAdapter(mAdapter);
    }
    ...
}

配接器可存取資料集中的項目、建立項目的視圖,並在原來的項目無法再顯示時,使用新的資料項目取代某些視圖的內容。 下列程式碼範例簡單實作一個由使用 TextView 小工具顯示的字串陣列所組成的資料集:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private String[] mDataset;

    // Provide a reference to the views for each data item
    // Complex data items may need more than one view per item, and
    // you provide access to all the views for a data item in a view holder
    public static class ViewHolder extends RecyclerView.ViewHolder {
        // each data item is just a string in this case
        public TextView mTextView;
        public ViewHolder(TextView v) {
            super(v);
            mTextView = v;
        }
    }

    // Provide a suitable constructor (depends on the kind of dataset)
    public MyAdapter(String[] myDataset) {
        mDataset = myDataset;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        // create a new view
        View v = LayoutInflater.from(parent.getContext())
                               .inflate(R.layout.my_text_view, parent, false);
        // set the view's size, margins, paddings and layout parameters
        ...
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - get element from your dataset at this position
        // - replace the contents of the view with that element
        holder.mTextView.setText(mDataset[position]);

    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return mDataset.length;
    }
}

圖 3.卡片範例。

建立卡片

CardView 會延伸FrameLayout 類別,讓您跨平台以一致的外觀顯示卡片內部的資訊。CardView 小工具可以有陰影和圓形邊角。

如要建立有陰影的卡片,請使用 card_view:cardElevation 屬性。在 Android 5.0 (API 級別 21) 以及以上版本,CardView 使用實際高度和動態陰影,但在較舊的版本上只能有計畫地實作陰影。如需詳細資訊,請參閱維持相容性

使用下列屬性可自訂 CardView 小工具的外觀:

下列程式碼範例示範如何在版面配置中加入 CardView小工具:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>
</LinearLayout>

如需詳細資訊,請參閱 CardView 的 API 參考資料。

新增相依性

RecyclerViewCardView 小工具都屬於 v7 支援程式庫。 如要在專案中使用這些小工具,請在應用程式的模組中加入下列 Gradle 相依性

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
    compile 'com.android.support:recyclerview-v7:21.0.+'
}
本網站使用 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)