ANDROID L - Material Design详解（UI控件）

UI控件

在Android L中新增了两个控件分别是RecyclerView，CardView ：

RecyclerView：

RecyclerView是ListView的升级版，它提供了更好的性能而且更容易使用。

RecyclerView这个控件是一个可以装载大量的视图集合，并且可以非常效率的进行回收和滚动。当你list中的元素经常动态改变时可以使用RecyclerView控件。

RecyclerView非常容易使用，它提供了如下两个功能：

为每个条目位置提供了layout管理器（RecyclerView.setLayoutManager）

为每个条目设置了操作动画（RecyclerView.setItemAnimator）

下面的例子介绍了如何定义和使用一个RecyclerView：

1.在布局文件中添加一个RecyclerView

?

1 2 3 4 5 6

<!-- 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.初始化RecyclerView参数，设置layoutManager和adapter

?

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

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);               // improve performance if you know that changes in content           // do not change the 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

?

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

public class MyAdapter  extends RecyclerView.Adapter<MyAdapter.ViewHolder> {       private String[] mDataset;           // Provide a reference to the type of views that you are using       // (custom viewholder)       public static class ViewHolder  extends RecyclerView.ViewHolder {           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;       }  }

CardView：

CardView继承自FrameLayout，允许你在card视图中显示信息. CardView也可以设置阴影和圆角。（其实现在很多应用都自定义了Card视图，Google这回将card视图作为基本控件，可以拿来直接使用了）

Layout中为CardView设置圆角使用card_view:cardCornerRadius属性

代码中为CardView设置圆角使用CardView.setRadius方法

为CardView设置背景颜色使用card_view:cardBackgroundColor属性

在布局中包含一个CardView，如下：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!-- 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 >

兼容性：

RecyclerView，CardView都包含在Android L Developer Preview Support Library中，所以他们可以在之前的版本中使用，只会有一些限制。

RecyclerView是ListView的升级版

CardView则是Google提供的一个卡片式视图组件

本例就是使用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中添加如下代码。

[html]  view plain copy print ?

1. dependencies {  
2.     compile 'com.android.support:recyclerview-v7:21.+'  
3.     compile 'com.android.support:cardview-v7:21.+'  
4. }  

第三步：

重新Build一下工程。

Build完成后就会发现这两个包就已经导入进来了

代码介绍：

主题：

首先这个黑色基调的主题是使用了Material.Dark.ActionBar样式。

设置方法：修改values-v21文件夹下styles.xml文件：

[html]  view plain copy print ?

1. <resources>  
2.     <style name="AppTheme" parent="android:ThemeOverlay.Material.Dark.ActionBar">  
3.     </style>  
4. </resources>  

布局文件：

recycler_view.xml（RecyclerView布局文件）:

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     tools:context=".MyActivity">  
7.   
8.     <android.support.v7.widget.RecyclerView  
9.         android:id="@+id/list"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="match_parent"  
12.         tools:context=".MyActivity" />  
13. </FrameLayout>  

FrameLayout里包含了RecyclerView控件

card_view.xml（CardView布局文件）：

[html]  view plain copy print ?

1. <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:card_view="http://schemas.android.com/apk/res-auto"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:layout_margin="5dp"  
6.     android:orientation="horizontal"  
7.     card_view:cardBackgroundColor="@color/cardview_dark_background"  
8.     card_view:cardCornerRadius="5dp" >  
9.   
10.     <RelativeLayout  
11.         android:layout_width="match_parent"  
12.         android:layout_height="100dp"  
13.         android:padding="5dp" >  
14.   
15.         <ImageView  
16.             android:id="@+id/pic"  
17.             android:layout_width="match_parent"  
18.             android:layout_height="match_parent"  
19.             android:layout_centerInParent="true"  
20.             android:scaleType="centerCrop" />  
21.   
22.         <TextView  
23.             android:clickable="true"  
24.             android:id="@+id/name"  
25.             android:layout_width="match_parent"  
26.             android:layout_height="match_parent"  
27.             android:layout_marginBottom="10dp"  
28.             android:layout_marginRight="10dp"  
29.             android:gravity="right|bottom"  
30.             android:textColor="@android:color/white"  
31.             android:textSize="24sp" />  
32.     </RelativeLayout>  
33.   
34. </android.support.v7.widget.CardView>  

CardView视图中包含了一个ImageView和一个TextView分别显示图片和文字信息

唯一需要介绍的就是在布局文件中使用了，如下两个属性：

[html]  view plain copy print ?

1. card_view:cardBackgroundColor="@color/cardview_dark_background"  
2.    card_view:cardCornerRadius="5dp"  

他俩的作用分别是设置CardView的背景颜色和外围的圆角大小（注意要使用card_view命名空间）

代码：

Actor类（封装数据的Model类）：

[java]  view plain copy print ?

1. public class Actor  
2. {  
3.     String name;  
4.   
5.     String picName;  
6.   
7.     public Actor(String name, String picName)  
8.     {  
9.         this.name = name;  
10.         this.picName = picName;  
11.     }  
12.   
13.     public int getImageResourceId( Context context )  
14.     {  
15.         try  
16.         {  
17.             return context.getResources().getIdentifier(this.picName, "drawable", context.getPackageName());  
18.   
19.         }  
20.         catch (Exception e)  
21.         {  
22.             e.printStackTrace();  
23.             return -1;  
24.         }  
25.     }  
26. }  

封装了演员的名字和图片名，getImageResourceId()方法的作用就是根据图片命找到系统资源

MyActivity(程序主控制Activity)

[java]  view plain copy print ?

1. public class MyActivity  
2.     extends Activity  
3. {  
4.   
5.     private RecyclerView mRecyclerView;  
6.   
7.     private MyAdapter myAdapter;  
8.   
9.     private List<Actor> actors = new ArrayList<Actor>();  
10.   
11.     private String[] names = { "朱茵", "张柏芝", "张敏", "巩俐", "黄圣依", "赵薇", "莫文蔚", "如花" };  
12.   
13.     private String[] pics = { "p1", "p2", "p3", "p4", "p5", "p6", "p7", "p8" };  
14.   
15.     @Override  
16.     protected void onCreate( Bundle savedInstanceState )  
17.     {  
18.         super.onCreate(savedInstanceState);  
19.         setContentView(R.layout.recycler_view);  
20.   
21.         actors.add(new Actor("朱茵", "p1"));  
22.         getActionBar().setTitle("那些年我们追的星女郎");  
23.   
24.         // 拿到RecyclerView  
25.         mRecyclerView = (RecyclerView) findViewById(R.id.list);  
26.         // 设置LinearLayoutManager  
27.         mRecyclerView.setLayoutManager(new LinearLayoutManager(this));  
28.         // 设置ItemAnimator  
29.         mRecyclerView.setItemAnimator(new DefaultItemAnimator());  
30.         // 设置固定大小  
31.         mRecyclerView.setHasFixedSize(true);  
32.         // 初始化自定义的适配器  
33.         myAdapter = new MyAdapter(this, actors);  
34.         // 为mRecyclerView设置适配器  
35.         mRecyclerView.setAdapter(myAdapter);  
36.   
37.     }  
38.   
39.     @Override  
40.     public boolean onCreateOptionsMenu(Menu menu) {  
41.         getMenuInflater().inflate(R.menu.menu, menu);  
42.         return true;  
43.     }  
44.   
45.     @Override  
46.     public boolean onOptionsItemSelected(MenuItem item) {  
47.         switch(item.getItemId()) {  
48.             // 当点击actionbar上的添加按钮时，向adapter中添加一个新数据并通知刷新  
49.             case R.id.action_add:  
50.                 if (myAdapter.getItemCount() != names.length) {  
51.                     actors.add(new Actor(names[myAdapter.getItemCount()], pics[myAdapter.getItemCount()]));  
52.                     mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);  
53.                     myAdapter.notifyDataSetChanged();  
54.                 }  
55.                 return true;  
56.             // 当点击actionbar上的删除按钮时，向adapter中移除最后一个数据并通知刷新  
57.             case R.id.action_remove:  
58.                 if (myAdapter.getItemCount() != 0) {  
59.                     actors.remove(myAdapter.getItemCount()-1);  
60.                     mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);  
61.                     myAdapter.notifyDataSetChanged();  
62.                 }  
63.                 return true;  
64.         }  
65.         return super.onOptionsItemSelected(item);  
66.     }  
67.   
68. }  

MyAdapter（自定义适配器类）

[java]  view plain copy print ?

1. public class MyAdapter  
2.     extends RecyclerView.Adapter<MyAdapter.ViewHolder>  
3. {  
4.   
5.     private List<Actor> actors;  
6.   
7.     private Context mContext;  
8.   
9.     public MyAdapter( Context context , List<Actor> actors)  
10.     {  
11.         this.mContext = context;  
12.         this.actors = actors;  
13.     }  
14.   
15.     @Override  
16.     public ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i )  
17.     {  
18.         // 给ViewHolder设置布局文件  
19.         View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_view, viewGroup, false);  
20.         return new ViewHolder(v);  
21.     }  
22.   
23.     @Override  
24.     public void onBindViewHolder( ViewHolder viewHolder, int i )  
25.     {  
26.         // 给ViewHolder设置元素  
27.         Actor p = actors.get(i);  
28.         viewHolder.mTextView.setText(p.name);  
29.         viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));  
30.     }  
31.   
32.     @Override  
33.     public int getItemCount()  
34.     {  
35.         // 返回数据总数  
36.         return actors == null ? 0 : actors.size();  
37.     }  
38.   
39.     // 重写的自定义ViewHolder  
40.     public static class ViewHolder  
41.         extends RecyclerView.ViewHolder  
42.     {  
43.         public TextView mTextView;  
44.   
45.         public ImageView mImageView;  
46.   
47.         public ViewHolder( View v )  
48.         {  
49.             super(v);  
50.             mTextView = (TextView) v.findViewById(R.id.name);  
51.             mImageView = (ImageView) v.findViewById(R.id.pic);  
52.         }  
53.     }  
54. }  

所有代码介绍完毕了，可以总结为以下两点：

RecyclerView：

理解为之前的ListView，不过需要设置LinearLayoutManager（目前资料不多我也有点迷糊以后再补充）和ItemAnimator（为每个条目设置操作动画）两个新属性

RecyclerView.Adapter：

理解为默认自带和基于ViewHolder的新的适配器，只不过回调方法稍有不同，但本质都是一样的。

代码下载地址：https://github.com/a396901990/AndroidDemo