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

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

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

引言

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

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

创建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组件

RecylerView组件

动画:

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

下面开始看例子:

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

  1. <!-- A RecyclerView with some commonly used attributes --> 
  2.  
  3. <android.support.v7.widget.RecyclerView 
  4.  
  5. android:id="@+id/my_recycler_view" 
  6.  
  7. android:scrollbars="vertical" 
  8.  
  9. android:layout_width="match_parent" 
  10.  
  11. android:layout_height="match_parent"/>

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

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

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

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

创建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. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  2.  
  3. xmlns:tools="http://schemas.android.com/tools" 
  4.  
  5. xmlns:card_view="http://schemas.android.com/apk/res-auto" 
  6.  
  7. ... > 
  8.  
  9. <!-- A CardView that contains a TextView --> 
  10.  
  11. <android.support.v7.widget.CardView 
  12.  
  13. xmlns:card_view="http://schemas.android.com/apk/res-auto" 
  14.  
  15. android:id="@+id/card_view" 
  16.  
  17. android:layout_gravity="center" 
  18.  
  19. android:layout_width="200dp" 
  20.  
  21. android:layout_height="200dp" 
  22.  
  23. card_view:cardCornerRadius="4dp"> 
  24.  
  25. <TextView 
  26.  
  27. android:id="@+id/info_text" 
  28.  
  29. android:layout_width="match_parent" 
  30.  
  31. android:layout_height="match_parent" /> 
  32.  
  33. </android.support.v7.widget.CardView> 
  34.  
  35. </LinearLayout> 

Card示例图

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/,转载请注明出处。

责任编辑:闫佳明 来源: blog.isming.me
相关推荐

2016-02-02 10:03:15

chromeMaterial De

2015-08-07 10:24:17

AndroidMaterialDes

2014-08-07 14:19:46

Material DeGoogle

2014-08-21 15:29:29

Material De概述

2017-02-14 13:35:15

AndroidMaterial De动画

2014-12-08 14:35:51

Material De真实动作

2017-02-20 16:03:35

Android We谷歌硬件

2015-07-21 15:02:37

设计扁平

2014-12-08 15:03:17

Material De图像

2014-12-08 13:40:10

Material De色彩

2014-09-10 10:35:11

Material De设计原则

2016-08-10 13:00:07

ChromeMaterial DeMaterial

2014-12-08 14:15:48

Material De字体排版

2021-04-26 18:48:48

微应用React

2014-08-21 15:40:53

Material De真实动作

2014-08-19 16:10:05

Material DeUI设计趋势

2014-07-22 10:44:21

Material De

2014-09-22 14:36:01

移动应用iOSAndroid

2013-08-13 11:25:56

屏幕尺寸Android应用

2022-01-20 20:08:38

MaterialpalettesMaterial 3
点赞
收藏

51CTO技术栈公众号