首页 > 代码库 > Material design之New Widgets（RecyclerView CardView）

Material design之New Widgets（RecyclerView CardView）

2024-07-11 16:38:54   221人阅读

New Widgets：提供了两个新的控件

  • RecyclerView
  • CardView

这两个控件包含在了Android L的support library中，

他们可以用于显示复杂的布局而且都默认采用了Material的风格。

RecyclerView

　　RecyclerView是更高级的Listview。他对包含在其中的item view做了优化，

可以实现在滚动的时候，回收在利用item view。其实这个功能就是listview中的

viewholder。

　　RecyclerView有如下两个特点：

  • 提供了一个layout manager用于定位item的位置
  • 增加和删除item的时候添加了动画效果

    • RecyclerView.ItemAnimator（定义动画的时候需要继承这个类）

    • RecyclerView.setItemAnimator（使用这个方法将定义的动画添加到RecyclerView中）

　　在使用RecyclerView的时候，还需要提供以下两个变量：

  • RecyclerView.Adapter(用于适配数据到列表)
  • RecyclerView.LayoutManager(用于管理item view，比如回收)

Examples

创建一个布局，然后添加一个RecyclerView和添加ListView一样

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

定义一个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);        // 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);    }    ...}

创建一个简单的适配器

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, null);        // 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，这个控件能够让你能用卡牌的方式来展示信息，

能够使所有的APP有统一的风格。这个控件能设置阴影和圆角。

　　CardView特别的属性如下：

  • android:cardCornerRadius：在布局中设置card圆角的大小
  • CardView.setRadius：在代码中设置card圆角的大小
  • android:cardBackgroundColor：在布局中设置card背景的颜色
  • android:elevation：设置阴影的大小

使用方式：

 

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

 


联系
我们