本人所有文章首先釋出于個人部落格,歡迎關注,位址:http://blog.isming.me
上次說過使用主題,應用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元件
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示例圖
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/,轉載請注明出處。