首页 > 代码库 > Material Design UI Widgets

Material Design UI Widgets

2024-08-07 02:29:09   220人阅读

 Android L 开发者预览支持库提供两个新的Widgets，RecyclerView和CardView。使用这两个Widgets可以显示复杂的Listview和卡片布局，这两个Widgets默认使用Material design。

 

RecyclerView

    RecyclerView是一个更高级柔性版本的Listview，RecyclerView是一个能包含很多视图的容器，它能完美的处理循环和滚动。在item动态变化的Listview使用RecyclerView。

 

RecyclerView使用很简单，因为它提供了：

1、定位item的布局管理器

2、常见的item操作默认动画

 

你能够灵活的为RecyclerView自定义布局管理器和动画。

使用RecyclerView，必须使用指定一个adapter、定义一个布局管理器。创建adapter必须继承自RecyclerView.Adapter。实施的细节需要看数据类型和需要的视图。

   RecyclerView widget

 

 

    RecyclerView 提供了 LayoutManager，RecylerView 不负责子 View 的布局，我们可以自定义 LayoutManager 来实现不同的布局效果，目前只提供了LinearLayoutManager。 LinearLayoutManager 可以指定方向，默认是垂直， 可以指定水平， 这样就轻松实现了水平的 ListView。

 

RecyclerView Demo：

1、布局文件

 

[html] view plaincopyprint?
 
  1. <!-- A RecyclerView with some commonly used attributes -->  
  2. <android.support.v7.widget.RecyclerView  
  3.     android:id="@+id/my_recycler_view"  
  4.     android:scrollbars="vertical"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"/>  


2、Activity文件

[java] view plaincopyprint?
 
  1. public class MyActivity extends Activity {  
  2.     private RecyclerView mRecyclerView;  
  3.     private RecyclerView.Adapter mAdapter;  
  4.     private RecyclerView.LayoutManager mLayoutManager;  
  5.   
  6.     @Override  
  7.     protected void onCreate(Bundle savedInstanceState) {  
  8.         super.onCreate(savedInstanceState);  
  9.         setContentView(R.layout.my_activity);  
  10.         mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);  
  11.   
  12.         // improve performance if you know that changes in content  
  13.         // do not change the size of the RecyclerView  
  14.         mRecyclerView.setHasFixedSize(true);  
  15.   
  16.         // use a linear layout manager  
  17.         mLayoutManager = new LinearLayoutManager(this);  
  18.         mRecyclerView.setLayoutManager(mLayoutManager);  
  19.   
  20.         // specify an adapter (see also next example)  
  21.         mAdapter = new MyAdapter(myDataset);  
  22.         mRecyclerView.setAdapter(mAdapter);  
  23.     }  
  24.     ...  
  25. }  
  26. To create a simple adapter:  
  27.   
  28. public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {  
  29.     private String[] mDataset;  
  30.   
  31.     // Provide a reference to the type of views that you are using  
  32.     // (custom viewholder)  
  33.     public static class ViewHolder extends RecyclerView.ViewHolder {  
  34.         public TextView mTextView;  
  35.         public ViewHolder(TextView v) {  
  36.             super(v);  
  37.             mTextView = v;  
  38.         }  
  39.     }  
  40.   
  41.     // Provide a suitable constructor (depends on the kind of dataset)  
  42.     public MyAdapter(String[] myDataset) {  
  43.         mDataset = myDataset;  
  44.     }  
  45.   
  46.     // Create new views (invoked by the layout manager)  
  47.     @Override  
  48.     public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,  
  49.                                                    int viewType) {  
  50.         // create a new view  
  51.         View v = LayoutInflater.from(parent.getContext())  
  52.                                .inflate(R.layout.my_text_view, null);  
  53.         // set the view‘s size, margins, paddings and layout parameters  
  54.         ...  
  55.         ViewHolder vh = new ViewHolder(v);  
  56.         return vh;  
  57.     }  
  58.   
  59.     // Replace the contents of a view (invoked by the layout manager)  
  60.     @Override  
  61.     public void onBindViewHolder(ViewHolder holder, int position) {  
  62.         // - get element from your dataset at this position  
  63.         // - replace the contents of the view with that element  
  64.         holder.mTextView.setText(mDataset[position]);  
  65.   
  66.     }  
  67.   
  68.     // Return the size of your dataset (invoked by the layout manager)  
  69.     @Override  
  70.     public int getItemCount() {  
  71.         return mDataset.length;  
  72.     }  
  73. }  


3、Recycler adapter

 

 

[java] view plaincopyprint?
 
  1. public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {  
  2.     private String[] mDataset;  
  3.   
  4.     // Provide a reference to the type of views that you are using  
  5.     // (custom viewholder)  
  6.     public static class ViewHolder extends RecyclerView.ViewHolder {  
  7.         public TextView mTextView;  
  8.         public ViewHolder(TextView v) {  
  9.             super(v);  
  10.             mTextView = v;  
  11.         }  
  12.     }  
  13.   
  14.     // Provide a suitable constructor (depends on the kind of dataset)  
  15.     public MyAdapter(String[] myDataset) {  
  16.         mDataset = myDataset;  
  17.     }  
  18.   
  19.     // Create new views (invoked by the layout manager)  
  20.     @Override  
  21.     public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,  
  22.                                                    int viewType) {  
  23.         // create a new view  
  24.         View v = LayoutInflater.from(parent.getContext())  
  25.                                .inflate(R.layout.my_text_view, null);  
  26.         // set the view‘s size, margins, paddings and layout parameters  
  27.         ...  
  28.         ViewHolder vh = new ViewHolder(v);  
  29.         return vh;  
  30.     }  
  31.   
  32.     // Replace the contents of a view (invoked by the layout manager)  
  33.     @Override  
  34.     public void onBindViewHolder(ViewHolder holder, int position) {  
  35.         // - get element from your dataset at this position  
  36.         // - replace the contents of the view with that element  
  37.         holder.mTextView.setText(mDataset[position]);  
  38.   
  39.     }  
  40.   
  41.     // Return the size of your dataset (invoked by the layout manager)  
  42.     @Override  
  43.     public int getItemCount() {  
  44.         return mDataset.length;  
  45.     }  
  46. }  


RecyclerView 的标准化了 ViewHolder， 编写 Adapter 面向的是 ViewHoder 而不在是View 了， 复用的逻辑被封装了， 写起来更加简单。

 

 

CardView

 

 

CardView继承自FrameLayout类，可以在一个卡片布局中一致性的显示内容，卡片可以包含圆角和阴影。

 

可以使用android:elevation属性，创建一个阴影的卡片。

 

怎样指定CardView的属性：

1、使用android:cardCornerRadius属性指定圆角半径

2、使用CardView.setRadius 设置圆角半径。

3、使用 android:cardBackgroundColor属性设置卡片颜色

 

在创建布局文件中创建CardView：

 

[html] view plaincopyprint?
 
    1. <!-- A CardView that contains a TextView -->  
    2. <android.support.v7.widget.CardView  
    3.     xmlns:card_view="http://schemas.android.com/apk/res-auto"  
    4.     android:id="@+id/card_view"  
    5.     android:layout_gravity="center"  
    6.     android:layout_width="200dp"  
    7.     android:layout_height="200dp"  
    8.     card_view:cardCornerRadius="4dp">  
    9.   
    10.     <TextView  
    11.         android:id="@+id/info_text"  
    12.         android:layout_width="match_parent"  
    13.         android:layout_height="match_parent" />  
    14. </android.support.v7.widget.CardView>  

Material Design UI Widgets


联系
我们