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

?


2.初始化RecyclerView参数，设置layoutManager和adapter

?
3.创建一个adapter

?


CardView：

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



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

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

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

在布局中包含一个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
plaincopyprint?





dependencies {

compile 'com.android.support:recyclerview-v7:21.+'

compile 'com.android.support:cardview-v7:21.+'

}

第三步：

重新Build一下工程。



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



代码介绍：

主题：

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

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

[html] view
plaincopyprint?





<resources>

<style name="AppTheme" parent="android:ThemeOverlay.Material.Dark.ActionBar">

</style>

</resources>

布局文件：

recycler_view.xml（RecyclerView布局文件）:

[html] view
plaincopyprint?





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

FrameLayout里包含了RecyclerView控件

card_view.xml（CardView布局文件）：

[html] view
plaincopyprint?





<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分别显示图片和文字信息
唯一需要介绍的就是在布局文件中使用了，如下两个属性：

[html] view
plaincopyprint?





card_view:cardBackgroundColor="@color/cardview_dark_background"

card_view:cardCornerRadius="5dp"

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

代码：

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

[java] view
plaincopyprint?





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)

[java] view
plaincopyprint?





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() - 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（自定义适配器类）

[java] view
plaincopyprint?





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 ? 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的新的适配器，只不过回调方法稍有不同，但本质都是一样的。

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