序言:RecyclerView是ListView的更新版
CardView則是Google提供的一個卡片式視圖元件
一:兩種開發工具的導包使用
eclipce
第一步:通過SDK manager下載下傳/更新Android Support Libraries(5.0版本最新為21)
第二步:導入CardView和RecyclerView項目(都在support v7中)
1.在Eclipse中點選Import,導入Android項目
2.導入CardView和RecycleView,路徑為your sdk path\extras\android\support\v7\cardview(RecycleView則為相同目錄下的recyclerview)
3.導入時記得将工程copy到本地并建議重命名,這樣友善以後管理例如:
第三步:設定Library
1..将兩個工程設定為Library
2..在主工程中引入這兩個Library例如:
通過這三步就可以将這兩個包導入進來了。
Android Studio
Android Stuido相對于Eclipse簡單的多:
第一步:
首先要確定已經将Android Support Libraries更新到最新.
第二步:
打開項目中的build.gradle檔案,在dependencies中添加如下代碼。
dependencies {
compile 'com.android.support:recyclerview-v7:21.+'
compile 'com.android.support:cardview-v7:21.+'
}
第三步:
重新Build一下工程。
Build完成後就會發現這兩個包就已經導入進來了
二:
主題:
首先這個黑色基調的主題是使用了Material.Dark.ActionBar樣式。
設定方法:修改values-v21檔案夾下styles.xml檔案:
<resources>
<style name="AppTheme" parent="android:ThemeOverlay.Material.Dark.ActionBar">
</style>
</resources>
布局檔案:
recycler_view.xml(RecyclerView布局檔案):
FrameLayout裡包含了RecyclerView控件
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MyActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MyActivity" />
</FrameLayout>
card_view.xml(CardView布局檔案):
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:orientation="horizontal"
card_view:cardBackgroundColor="@color/cardview_dark_background"
card_view:cardCornerRadius="5dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:padding="5dp" >
<ImageView
android:id="@+id/pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop" />
<TextView
android:clickable="true"
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:gravity="right|bottom"
android:textColor="@android:color/white"
android:textSize="24sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
CardView視圖中包含了一個ImageView和一個TextView分别顯示圖檔和文字資訊
唯一需要介紹的就是在布局檔案中使用了,如下兩個屬性:
card_view:cardBackgroundColor="@color/cardview_dark_background"
card_view:cardCornerRadius="5dp"
他倆的作用分别是設定CardView的背景顔色和外圍的圓角大小(注意要使用card_view命名空間)
三:例子
(封裝資料的Model類):
public class Actor
{
String name;
String picName;
public Actor(String name, String picName)
{
this.name = name;
this.picName = picName;
}
public int getImageResourceId( Context context )
{
try
{
return context.getResources().getIdentifier(this.picName, "drawable", context.getPackageName());
}
catch (Exception e)
{
e.printStackTrace();
return -;
}
}
}
封裝了演員的名字和圖檔名,getImageResourceId()方法的作用就是根據圖檔命找到系統資源
MyActivity(程式主要制Activity)
public class MyActivity
extends Activity
{
private RecyclerView mRecyclerView;
private MyAdapter myAdapter;
private List<Actor> actors = new ArrayList<Actor>();
private String[] names = { "朱茵", "張柏芝", "張敏", "鞏俐", "黃聖依", "趙薇", "莫文蔚", "如花" };
private String[] pics = { "p1", "p2", "p3", "p4", "p5", "p6", "p7", "p8" };
@Override
protected void onCreate( Bundle savedInstanceState )
{
super.onCreate(savedInstanceState);
setContentView(R.layout.recycler_view);
actors.add(new Actor("朱茵", "p1"));
getActionBar().setTitle("那些年我們追的星女郎");
// 拿到RecyclerView
mRecyclerView = (RecyclerView) findViewById(R.id.list);
// 設定LinearLayoutManager
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
// 設定ItemAnimator
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
// 設定固定大小
mRecyclerView.setHasFixedSize(true);
// 初始化自定義的擴充卡
myAdapter = new MyAdapter(this, actors);
// 為mRecyclerView設定擴充卡
mRecyclerView.setAdapter(myAdapter);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch(item.getItemId()) {
// 當點選actionbar上的添加按鈕時,向adapter中添加一個新資料并通知重新整理
case R.id.action_add:
if (myAdapter.getItemCount() != names.length) {
actors.add(new Actor(names[myAdapter.getItemCount()], pics[myAdapter.getItemCount()]));
mRecyclerView.scrollToPosition(myAdapter.getItemCount() - );
myAdapter.notifyDataSetChanged();
}
return true;
// 當點選actionbar上的删除按鈕時,向adapter中移除最後一個資料并通知重新整理
case R.id.action_remove:
if (myAdapter.getItemCount() != ) {
actors.remove(myAdapter.getItemCount()-);
mRecyclerView.scrollToPosition(myAdapter.getItemCount() - );
myAdapter.notifyDataSetChanged();
}
return true;
}
return super.onOptionsItemSelected(item);
}
}
MyAdapter(自定義擴充卡類)
public class MyAdapter
extends RecyclerView.Adapter<MyAdapter.ViewHolder>
{
private List<Actor> actors;
private Context mContext;
public MyAdapter( Context context , List<Actor> actors)
{
this.mContext = context;
this.actors = actors;
}
@Override
public ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i )
{
// 給ViewHolder設定布局檔案
View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_view, viewGroup, false);
return new ViewHolder(v);
}
@Override
public void onBindViewHolder( ViewHolder viewHolder, int i )
{
// 給ViewHolder設定元素
Actor p = actors.get(i);
viewHolder.mTextView.setText(p.name);
viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));
}
@Override
public int getItemCount()
{
// 傳回資料總數
return actors == null ? : actors.size();
}
// 重寫的自定義ViewHolder
public static class ViewHolder
extends RecyclerView.ViewHolder
{
public TextView mTextView;
public ImageView mImageView;
public ViewHolder( View v )
{
super(v);
mTextView = (TextView) v.findViewById(R.id.name);
mImageView = (ImageView) v.findViewById(R.id.pic);
}
}
}
四:小結
RecyclerView:
了解為之前的ListView,不過需要設定LinearLayoutManager(目前資料不多我也有點迷糊以後再補充)和ItemAnimator(為每個條目設定操作動畫)兩個新屬性
RecyclerView.Adapter:
了解為預設自帶和基于ViewHolder的新的擴充卡,隻不過回調方法稍有不同,但本質都是一樣的。