建立Material Design風格的Android應用--建立列表和卡片

上次說過使用主題，應用Material Design的樣式，同時卡片佈局也是Material Design的重要組成部分，今天來寫寫。

引言

在程序中建立複雜的Material Design 樣式的 List和Card,可使用RecyclerView和CardView組件,這兩個組件是在最新的support v7包(version 21)中提供的。所以須要引入依賴包：

dependencies {
    compile 'com.android.support:appcompat-v7:+'
    compile 'com.android.support:cardview-v7:+'
    compile 'com.android.support:recyclerview-v7:+'
}

建立List

RecylerView組件是一個更加高效靈活的ListView。這個組件時一個顯示大數據集的容器，能夠有效的滾動，保持顯示必定數量的視圖。使用RecyclerView組件，當你有數據集，而且數據集的元素在運行時根據用戶的操做或者網絡事件改變。

RecylerView類簡化大數據集的顯示和處理，經過提供： 佈局管理者控制元素定位。 在通用的元素上操做上顯示默認的動畫，好比移除和增長元素。

使用RecyclerView組件，你須要指定一個Adapter和佈局管理器，建立一個Adapter繼承RecyclerView.Adapter類，具體的實現細節要根據數據集合視圖的類型變化，具體信息，看下面的例子。

一個佈局管理器定位Item視圖在RecyclerView中，決定何時去回收它當他再也不可見時。當重用（或者回收）一個視圖時，佈局管理器可能會請求適配器（Adapter）去替換子視圖中的內容用不一樣的內容。經過這種方式回收重用視圖，能夠減小view的建立和避免更多的findViewById()，從而提升性能。

RecyclerView提供瞭如下內建的佈局管理器：

LinearLayoutManager 顯示Item 在一個水平或者垂直的滾動列表中。 GridLayoutManager 顯示Item 做爲網格佈局。 StaggeredGridLayoutManager 顯示Item在交錯的網格佈局。

也能夠本身經過繼承RecyclerView.LayoutManager類建立自定義的佈局管理器。

RecylerView組件

動畫：

RecyclerView默認狀況下就有動畫，在刪除或者增長Ite的時候。若是須要自定義動畫，繼承RecyclerView.ItemAnimator類，而且使用RecyclerView.setItemAnimator()方法將定義的動畫設置到咱們的視圖中。

下面開始看例子： 1.首先在xml佈局文件增長一個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"/>

2.而後在咱們的Java代碼中使用，附加Adapter和數據就能夠顯示了。

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

3.Adapter提供訪問數據集中的Item，建立視圖映射到數據上，而且替換佈局的內容數據用新的item。下面的代碼顯示一個簡單的實現，使用TextView顯示簡單的String數組。

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

建立Card

CardView繼承FrameLayout類，經過它能夠顯示信息在卡片內部，而且在不一樣的平臺上有統一的樣式。CardView組件能夠有陰影和圓角。

建立有陰影的Card,使用card_view:cardElevation屬性。CardView 使用真實的高度和動態陰影在Android5.0(API 21)和更高版本，較早的版本則使用傳統的陰影。

使用這些屬性去定製CardView的外觀：

使用card_view:cardCornerRadius屬性設置圓角的半徑，在佈局文件中。 使用CardView.setRadius方法設置圓角的半徑在java代碼中。 設置卡片的背景顏色，使用card_view:cardBackgroundColor屬性。

下面是一個在xml佈局文件中包含一個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>

Card示例圖

亂彈

經過上面能夠看到RecyclerView。跟咱們常常使用的ListView很像，不過它的父類並非AbsListView,所以不能混着使用。可是在不少地方能夠替換ListView,經過ViewHolder,View重用，能夠看到這是一個更加高效的視圖組件，推薦使用。

CardView,本質上就是一個比較符合Material Design的組件，使用Card佈局，效果更好。不少人以前可能也使用一些CardUi,谷歌官方出了這個，強烈推薦使用。

上面RecyclerView和CardView,是分開寫的，可是咱們能夠用在一塊兒的哦，不要糊塗了呀。

參考資料：http://developer.android.com/training/material/lists-cards.html

原文地址：http://blog.isming.me/2014/10/21/creating-app-with-material-design-two-list/，轉載請註明出處。