Skip to content

Most visited

Recently visited

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.+'
}
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)