本文主要介紹Android L新增加的兩個UI控件RecyclerView,CardView的導入和使用。
RecyclerView:ListView的升級版,它提供了更好的性能而且更容易使用。該控件是一個可以裝載大量的視圖集合,並且可以非常效率的進行回收和滾動。當你list中的元素經常動態改變時可以使用RecyclerView控件。它提供瞭如下兩個功能:
1、爲每個條目位置提供了layout管理器(RecyclerView.setLayoutManager)
2、爲每個條目設置了操作動畫(RecyclerView.setItemAnimator)
CardView:Google提供的一個卡片式視圖組件。CardView繼承自FrameLayout,允許你在Card視圖中顯示信息, CardView也可以設置陰影和圓角。(其實現在很多應用都自定義了Card視圖,Google這回將Card視圖作爲基本控件,可以拿來直接使用了。)
本例就是一個使用RecyclerView來展示多個CardView的一個小例子,先看下效果圖:
導入RecyclerView,CardView
由於RecyclerView,CardView是放在support library v7包中,所以我們想要使用就必須要導包。
下面就介紹下在Eclipse和Android Studio中是如何導入這兩個包的。
Eclipse:
第一步:通過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中添加如下代碼。
1
2
3
4
|
dependencies { compile 'com.android.support:recyclerview-v7:21.+' compile 'com.android.support:cardview-v7:21.+' } |
第三步:重新Build一下工程,Build完成後就會發現這兩個包就已經導入進來了。
代碼介紹:
主題:
首先這個黑色基調的主題是使用了Material.Dark.ActionBar樣式。
設置方法:修改values-v21文件夾下styles.xml文件:
1
2
3
4
|
< resources > < style name = "AppTheme" parent = "android:ThemeOverlay.Material.Dark.ActionBar" > </ style > </ resources > |
佈局文件:
recycler_view.xml(RecyclerView佈局文件):
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<? xml version = "1.0" encoding = "utf-8" ?> 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 > |
FrameLayout裏包含了RecyclerView控件。
card_view.xml(CardView佈局文件):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
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分別顯示圖片和文字信息。
唯一需要介紹的就是在佈局文件中使用了,如下兩個屬性:
1
2
|
card_view:cardBackgroundColor= "@color/cardview_dark_background" card_view:cardCornerRadius= "5dp" |
他倆的作用分別是設置CardView的背景顏色和外圍的圓角大小(注意要使用card_view命名空間)
代碼:
Actor類(封裝數據的Model類):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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 - 1 ; } } } |
封裝了演員的名字和圖片名,getImageResourceId()方法的作用就是根據圖片命找到系統資源。
MyActivity(程序主控制Activity)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
public class MyActivity extends Activity { private RecyclerView mRecyclerView; private MyAdapter myAdapter; private Listactors = new ArrayList(); 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() - 1 ); myAdapter.notifyDataSetChanged(); } return true ; // 當點擊actionbar上的刪除按鈕時,向adapter中移除最後一個數據並通知刷新 case R.id.action_remove: if (myAdapter.getItemCount() != 0 ) { actors.remove(myAdapter.getItemCount()- 1 ); mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1 ); myAdapter.notifyDataSetChanged(); } return true ; } return super .onOptionsItemSelected(item); } } |
MyAdapter(自定義適配器類)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
public class MyAdapter extends RecyclerView.Adapter{ private Listactors; private Context mContext; public MyAdapter( Context context , Listactors) { 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 ? 0 : 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的新的適配器,只不過回調方法稍有不同,但本質都是一樣的。