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
http://blog.csdn.net/jjwwmlp456/article/details/46775489
http://blog.csdn.net/ljx19900116/article/details/41806881

导入依赖包

RecyclerView介绍

CardView介绍

RecyclerView创建

XML布局

Activity代码

Adapter代码

CardView创建

XML布局

效果图

参考

更多相关文章

随机推荐