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

建立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,Google官方出了這個，強烈推薦使用。

上面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/，轉載請註明出處。