创建MaterialDesign风格的Android应用:创建列表和卡片

上次说过使用主题，应用Material Design的样式，同时卡片布局也是Material Design的重要组成部分，今天来写写。

创新互联建站是一家集网站建设,易门企业网站建设,易门品牌网站建设,网站定制,易门网站建设报价,网络营销,网络优化,易门网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

引言

在程序中创建复杂的Material Design 样式的 List和Card,可以使用RecyclerView和CardView组件,这两个组件是在***的support v7包(version 21)中提供的。因此需要引入依赖包：

 
 
 
 
    
  
  
  
  
  1. dependencies { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. compile 'com.android.support:appcompat-v7:+' 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. compile 'com.android.support:cardview-v7:+' 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. compile 'com.android.support:recyclerview-v7:+' 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. } 
    10.

创建List

RecylerView组件是一个更加高效灵活的ListView。这个组件时一个显示大数据集的容器，可以有效的滚动，保持显示一定数量的视图。使用RecyclerView组件，当你有数据集，并且数据集的元素在运行时根据用户的操作或者网络事件改变。

RecylerView类简化大数据集的显示和处理，通过提供：

布局管理者控制元素定位。

在通用的元素上操作上显示默认的动画，比如移除和增加元素。

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

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

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

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

GridLayoutManager 显示Item 作为网格布局。

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

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

RecylerView组件

动画：

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

下面开始看例子：

1.首先在xml布局文件增加一个RecyclerView

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.   
  
  
  
  4.  
    5.   
  
  
  
  5. android:id="@+id/my_recycler_view" 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. android:scrollbars="vertical" 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. android:layout_width="match_parent" 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. android:layout_height="match_parent"/> 
    12.

2.然后在我们的Java代码中使用，附加Adapter和数据就可以显示了。

 
 
 
 
    
  
  
  
  
  1. public class MyActivity extends Activity { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. private RecyclerView mRecyclerView; 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. private RecyclerView.Adapter mAdapter; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. private RecyclerView.LayoutManager mLayoutManager; 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. @Override 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. protected void onCreate(Bundle savedInstanceState) { 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. super.onCreate(savedInstanceState); 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. setContentView(R.layout.my_activity); 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view); 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19. // use this setting to improve performance if you know that changes 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21. // in content do not change the layout size of the RecyclerView 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23. mRecyclerView.setHasFixedSize(true); 
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25. // use a linear layout manager 
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27. mLayoutManager = new LinearLayoutManager(this); 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29. mRecyclerView.setLayoutManager(mLayoutManager); 
    30.   
  
  
  
  30.  
    31.   
  
  
  
  31. // specify an adapter (see also next example) 
    32.   
  
  
  
  32.  
    33.   
  
  
  
  33. mAdapter = new MyAdapter(myDataset); 
    34.   
  
  
  
  34.  
    35.   
  
  
  
  35. mRecyclerView.setAdapter(mAdapter); 
    36.   
  
  
  
  36.  
    37.   
  
  
  
  37. } 
    38.   
  
  
  
  38. ... 
    39.   
  
  
  
  39. } 
    40.

3.Adapter提供访问数据集中的Item，创建视图映射到数据上，并且替换布局的内容数据用新的item。下面的代码显示一个简单的实现，使用TextView显示简单的String数组。

 
 
 
 
    
  
  
  
  
  1. public class MyAdapter extends RecyclerView.Adapter { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. private String[] mDataset; 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. // Provide a reference to the views for each data item 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. // Complex data items may need more than one view per item, and 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. // you provide access to all the views for a data item in a view holder 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. public static class ViewHolder extends RecyclerView.ViewHolder { 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. // each data item is just a string in this case 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. public TextView mTextView; 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. public ViewHolder(TextView v) { 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19. super(v); 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21. mTextView = v; 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23. } 
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25. } 
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27. // Provide a suitable constructor (depends on the kind of dataset) 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29. public MyAdapter(String[] myDataset) { 
    30.   
  
  
  
  30.  
    31.   
  
  
  
  31. mDataset = myDataset; 
    32.   
  
  
  
  32.  
    33.   
  
  
  
  33. } 
    34.   
  
  
  
  34.  
    35.   
  
  
  
  35. // Create new views (invoked by the layout manager) 
    36.   
  
  
  
  36.  
    37.   
  
  
  
  37. @Override 
    38.   
  
  
  
  38.  
    39.   
  
  
  
  39. public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, 
    40.   
  
  
  
  40.  
    41.   
  
  
  
  41. int viewType) { 
    42.   
  
  
  
  42.  
    43.   
  
  
  
  43. // create a new view 
    44.   
  
  
  
  44.  
    45.   
  
  
  
  45. View v = LayoutInflater.from(parent.getContext()) 
    46.   
  
  
  
  46.  
    47.   
  
  
  
  47. .inflate(R.layout.my_text_view, parent, false); 
    48.   
  
  
  
  48.  
    49.   
  
  
  
  49. // set the view's size, margins, paddings and layout parameters 
    50.   
  
  
  
  50.  
    51.   
  
  
  
  51. ... 
    52.   
  
  
  
  52.  
    53.   
  
  
  
  53. ViewHolder vh = new ViewHolder(v); 
    54.   
  
  
  
  54.  
    55.   
  
  
  
  55. return vh; 
    56.   
  
  
  
  56.  
    57.   
  
  
  
  57. } 
    58.   
  
  
  
  58.  
    59.   
  
  
  
  59. // Replace the contents of a view (invoked by the layout manager) 
    60.   
  
  
  
  60.  
    61.   
  
  
  
  61. @Override 
    62.   
  
  
  
  62.  
    63.   
  
  
  
  63. public void onBindViewHolder(ViewHolder holder, int position) { 
    64.   
  
  
  
  64.  
    65.   
  
  
  
  65. // - get element from your dataset at this position 
    66.   
  
  
  
  66.  
    67.   
  
  
  
  67. // - replace the contents of the view with that element 
    68.   
  
  
  
  68.  
    69.   
  
  
  
  69. holder.mTextView.setText(mDataset[position]); 
    70.   
  
  
  
  70.  
    71.   
  
  
  
  71. } 
    72.   
  
  
  
  72.  
    73.   
  
  
  
  73. // Return the size of your dataset (invoked by the layout manager) 
    74.   
  
  
  
  74.  
    75.   
  
  
  
  75. @Override 
    76.   
  
  
  
  76.  
    77.   
  
  
  
  77. public int getItemCount() { 
    78.   
  
  
  
  78.  
    79.   
  
  
  
  79. return mDataset.length; 
    80.   
  
  
  
  80.  
    81.   
  
  
  
  81. } 
    82.   
  
  
  
  82. } 
    83.

创建Card

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

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

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

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

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

设置卡片的背景颜色，使用card_view:cardBackgroundColor属性。 

下面是一个在xml布局文件中包含一个CardView的示例：

 
 
 
 
    
  
  
  
  
  1.   
  
  
  
  2.  
    3.   
  
  
  
  3. xmlns:tools="http://schemas.android.com/tools" 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. ... > 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.   
  
  
  
  12.  
    13.   
  
  
  
  13. xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. android:id="@+id/card_view" 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. android:layout_gravity="center" 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19. android:layout_width="200dp" 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21. android:layout_height="200dp" 
    22.   
  
  
  
  22.  
    23.   
  
  
  
  23. card_view:cardCornerRadius="4dp"> 
    24.   
  
  
  
  24.  
    25.   
  
  
  
  25.   
  
  
  
  26.  
    27.   
  
  
  
  27. android:id="@+id/info_text" 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29. android:layout_width="match_parent" 
    30.   
  
  
  
  30.  
    31.   
  
  
  
  31. android:layout_height="match_parent" /> 
    32.   
  
  
  
  32.  
    33.   
  
  
  
  33.  
    34.   
  
  
  
  34.  
    35.   
  
  
  
  35.  
    36.

Card示例图

乱弹

通过上面可以看到RecyclerView。跟我们经常使用的ListView很像，不过它的父类并不是AbsListView,因此不能混着使 用。但是在很多地方可以替换ListView,通过ViewHolder,View重用，可以看到这是一个更加高效的视图组件，推荐使用。

CardView,本质上就是一个比较符合Material Design的组件，使用Card布局，效果更好。很多人之前可能也使用一些CardUi,谷歌官方出了这个，强烈推荐使用。

上面RecyclerView和CardView,是分开写的，但是我们可以用在一起的哦，不要糊涂了呀。

参考资料：http://developer.android.com/training/material/lists-cards.html

原文地址：http://blog.isming.me/2014/10/21/creating-app-with-material-design-two-list/，转载请注明出处。

本文标题：创建MaterialDesign风格的Android应用:创建列表和卡片
标题路径：http://www.shufengxianlan.com/qtweb/news22/50472.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站导航知识

分类信息网站

网站设计制作　　 　成都申请ssl证书　　 　响应式网站　　 　发光字制作　　 　泸州叙永网站建设　　 　重庆小程序开发公司　　 　绵阳网站建设　　 　成都机柜租用　　 　禾巨建站　　 　成都定制网站建设　　 　电商网站建设　　 　校园网站建设方案　　 　簇桥薇薇新娘　　 　香港云虚拟主机　　 　php空间　　 　手机网站建设　　 　成都搬家公司　　 　成都APP定制开发　　 　成都小程序定制开发公司　　 　支点广告