Android:Material Design(四) UI控件

Android:Material Design(一) 概述

Android:Material Design(二) Material主题

Android:Material Design(三) 动画

Android:Material Design(四) UI控件

Android:Material Design(五) 视图和阴影

Android:Material Design(六) 使用Drawable

Android:Material Design(七) 兼容性

本文主要介绍Android L新增加的两个UI控件RecyclerView，CardView的导入和使用。

导入依赖包

这两个组件是在最新的support v7包(version 21)中提供的。因此需要引入依赖包：

dependencies {
compile 'com.android.support:cardview-v7:+'
compile 'com.android.support:recyclerview-v7:+'
}

RecyclerView介绍

RecyclerView：大家都知道ListView在我们开发中很常用，Android5.0的到来，它给我们带来了一个替代ListView的新的控件，也可以说是ListView的升级版，那就是RecyclerView。它提供了更好的性能而且更容易使用。该控件是一个可以装载大量的视图集合，并且可以非常效率的进行回收和滚动。当你list中的元素经常动态改变时可以使用RecyclerView控件。

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

使用RecyclerView组件，你需要指定一个Adapter和布局管理器，创建一个Adapter继承RecyclerView.Adapter类，具体的实现细节要根据数据集合视图的类型变化，具体信息，看下面的例子。

一个布局管理器定位Item视图在RecyclerView中，决定什么时候去回收它当他不再可见时。当重用（或者回收）一个视图时，布局管理器可能会请求适配器（Adapter）去替换子视图中的内容用不同的内容。通过这种方式回收重用视图，可以减少view的创建和避免更多的findViewById()，从而提高性能。

RecyclerView提供了以下内建的布局管理器：

LinearLayoutManager 显示Item 在一个水平或者垂直的滚动列表中。

GridLayoutManager 显示Item 作为网格布局。

StaggeredGridLayoutManager 显示Item在交错的网格布局。

也可以自己通过继承RecyclerView.LayoutManager类创建自定义的布局管理器。



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

RecyclerView默认情况下就有动画，在删除或者增加Ite的时候。如果需要自定义动画，继承RecyclerView.ItemAnimator类，并且使用RecyclerView.setItemAnimator()方法将定义的动画设置到我们的视图中。

CardView介绍

CardView继承FrameLayout类，通过它可以显示信息在卡片内部，并且在不同的平台上有统一的样式。CardView组件可以有阴影和圆角。

创建有阴影的Card,使用card_view:cardElevation属性。CardView 使用真实的高度和动态阴影在Android5.0(API 21)和更高版本，较早的版本则使用传统的阴影。

使用这些属性去定制CardView的外观：

card_view:cardElevation属性创建有阴影的Card

card_view:cardCornerRadius属性设置圆角的半径，在布局文件中

card_view:cardBackgroundColor属性设置卡片的背景颜色

card_view:cardCornerRadius属性设置外围的圆角大小

CardView.setRadius方法设置圆角的半径在java代码中

RecyclerView创建

XML布局

<RelativeLayout 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=".MainActivity"
>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
tools:listitem="@layout/list_basic_item"
/>

</RelativeLayout>

Activity代码

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);
mRecyclerView.setHasFixedSize(true); //使用固定size 以优化性能
// 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);
}
}

Adapter代码

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
List<Actor> actors = new ArrayList<Actor>();
private Context context;
public MyAdapter(Context context, List<Actor> actors) {
this.context = context;
this.actors = actors;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v= LayoutInflater.from(context).inflate(R.layout.card_view,parent,false);
return new ViewHolder(v);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
// 给ViewHolder设置元素
Actor p = actors.get(position);
holder.mTextView.setText(p.name);        holder.mImageView.setImageDrawable(context.getDrawable(p.getImageResourceId(context)));
}
@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);
}
}
}

CardView创建

XML布局

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

效果图

RecyclerView_CardView源代码下载

参考

http://www.open-open.com/lib/view/open1416664070023.html

http://blog.isming.me/2014/10/21/creating-app-with-material-design-two-list/

http://www.devstore.cn/new/newInfo/868.html

/article/2234757.html

/article/7811563.html