Android Material設(shè)計中列表和卡片的創(chuàng)建方法解析
5.0提供了兩個新的Widget,它們使用了Material Design 的style和animation:
- RecyclerView 一個更可插拔式的ListView,它支持不同的布局類型,并且性能有了改進。(列表式)
- CardView 一個能讓你在其內(nèi)顯示重要信息,并保持連貫的視覺和感覺的卡片。(卡片式)
它兩位于 sdk/extras/android/support/v7/cardview 和 sdk/extras/android/support/v7/RecyclerView

創(chuàng)建列表
RecyclerView組件是一個更先進和靈活的版本的列表視圖。這個小部件是一個非常有效率的容器,通過有限的views,可以滾動顯示大型數(shù)據(jù)集。
RecyclerView組件數(shù)據(jù)集合的元素,可在運行時根據(jù)用戶操作或網(wǎng)絡(luò)事件進行改變。
RecyclerView類簡化了顯示和處理大型數(shù)據(jù)集,它提供了:
- 布局管理器
- 常見的默認動畫item操作,如刪除、添加項目
你可以在RecyclerView中靈活定義 布局管理器和動畫

要使用RecyclerView組件,您必須指定一個適配器和布局管理器。創(chuàng)建一個適配器,繼承RecyclerView.Adapter類。有關(guān)更多信息,請參見下面的例子。
RecyclerView并確定重用項目視圖時,布局管理器的利用item的方法,不再是對用戶可見。重用(或回收)視圖,布局管理器可能會問適配器,替換內(nèi)容為不同的數(shù)據(jù)集的元素。回收view時,以這種方式來改進性能:避免創(chuàng)建不必要的view或執(zhí)行消耗大的findViewById()查詢。
RecyclerView提供了如下管理器:
- LinearLayoutManager 橫向或縱向的滾動列表
- GridLayoutManager 網(wǎng)格列表
- StaggeredGridLayoutManager 交錯的網(wǎng)格列表
要創(chuàng)建一個自定義布局管理器,需要繼承RecyclerView.LayoutManager類
動畫:
添加和刪除item的動畫,在RecyclerView默認啟用。定制這些動畫,需要繼承RecyclerView.ItemAnimator類并使用RecyclerView.setItemAnimator()方法。
例子:
layout
<!-- 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"/>
activity
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); //使用固定size 以優(yōu)化性能
// 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);
}
...
}
adapter
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
TextView v = (TextView)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;
}
}
創(chuàng)建卡片
CardView繼承自FrameLayout,以卡片式顯示一致的外觀。它可以有陰影和圓角
創(chuàng)建一個有陰影的卡片,使用card_view:cardElevation屬性。
使用這些屬性來定制CardView組件的外觀:
- 在你的布局設(shè)置圓角半徑,使用card_view:cardCornerRadius屬性
- 在代碼中設(shè)置圓角半徑,使用CardView.setRadius方法
- 設(shè)置卡片的背景顏色,使用card_view:cardBackgroundColor屬性
例
<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>
添加依賴:
gradle依賴
dependencies {
...
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
相關(guān)文章
全面解析Android應(yīng)用開發(fā)中Activity類的用法
這篇文章主要介紹了Android應(yīng)用開發(fā)中Activity類的用法,包括Activity間的數(shù)據(jù)傳遞以及Activity的創(chuàng)建方式等,需要的朋友可以參考下2016-02-02
詳解Android自定義控件屬性TypedArray以及attrs
這篇文章主要為大家介紹了android自定義控件屬性TypedArray以及attrs,感興趣的小伙伴們可以參考一下2016-01-01
Android中RecycleView與ViewPager沖突的解決方法及原理
這篇文章主要給大家介紹了關(guān)于Android中RecycleView與ViewPager沖突的解決方法及原理的相關(guān)資料,以及ViewPager嵌套RecycleView卡頓問題的處理方法,文中通過示例代碼介紹的非常狎昵,需要的朋友可以參考下2018-07-07
Android GPS室內(nèi)定位問題的解決方法(location為null)
這篇文章主要為大家詳細介紹了Android GPS室內(nèi)定位問題的解決方法,location為null,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02

