上一篇是使用Material Design 创建App翻译系列—-材料主题的使用(Using Material Theme),进入正题:


想要在应用里创建Material Design风格的复杂列表和卡片,能够使用RecyclerView 和 CardView 控件。

创建列表

RecyclerView 控件是一个比ListView更加优越和灵活的控件。这个控件是一个通过有限个数的视图来显示大型数据集并能够高效滚动的容器。 当你有数据集合是基于用户动作或者网络事件而在执行时改变数据元素的时候你能够使用RecyclerView控件。

RecyclerView类通过提供下面内容。来简化显示和处理大型数据集:

1. 针对每项item的布局管理(LayoutManager)

2. 针对每项item共同的操作(比如:item项的删除和加入)的默认动画

也能够为RecyclerView控件灵活的声明自己定义LayoutManager布局管理和Animation动画。

RecyclerView的使用,你能够指定一个Adapter适配器和一个LayoutManager布局管理器。然后通过继承RecyclerView.Adapter类来创建Adapter适配器。详细的实现还得根据你指定的数据集和视图类型。

在RecyclerView里布局管理器(LayoutManager)用来定位item。而且决定当item视图不可见时,何时重用item视图。对于重用视图。布局管理器会通知适配器用数据集里不同的数据元素替换被重用视图里的数据内容。用回收视图的方式提高性能来避免创建不必要的视图或者执行高代价的 findViewById()查询方法。

RecyclerView 提供了一下默认的几种布局管理器(LayoutManager):

1. LinearLayoutManager 线性布局管理器。用横向或纵向滚动列表的形式显示。

2. GridLayoutManager 网格布局管理器,用网格的形式显示。

3. StaggeredGridLayoutManager 交错瀑布流布局管理器。用交错的瀑布流网格的形式显示。

也能够继承Recycl.LayoutManager来创建自己定义的LayoutManager布局管理器类。

动画

在RecyclerView里添加和删除item的动画默认是开启的。想要自己定义这些动画,能够继承RecyclerView.ItemAnimator类而且通过RecyclerView.setItemAnimator()方法来使用动画。

演示样例

下面代码示范了怎样将RecyclerView加入到布局中:

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

一旦在布局里加入了RecyclerView控件后,取得一个对象,连接上布局管理器,而且为显示数据加入一个适配器:

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);
// 假设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);
}
...
}

这个适配器提供在你的数据集中訪问Item, 为Item创建View, 当原Item不可见的一些View的内容替换成新的Item数据。下面的代码演示样例展示了一个简单的实现通过一个TextView为一个由一些字符串数组组成数据集:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private String[] mDataset; // 为每一个有复杂数据的item提供一个视图的引用
public static class ViewHolder extends RecyclerView.ViewHolder {
// each data item is just a string in this case
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, parent, false);
// 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 继承至FrameLayout类而且同意在这平台上有一致外观的在卡片里显示信息。CardView控件同意拥有阴影和圆角。

使用card_view:cardElevation属性创建一个带有阴影的卡片。在Android5.0(API Level 21)及其以上系统版本号里。CardView使用了真实的深度和动态阴影,而且兼容到早期版本号上的标志性阴影的实现。

详情请看:Maintaining Compatibility.

使用例如以下属性去自己定义CardView控件的外观:

1. 在布局里,用card_view:cardCornerRadius属性设置圆角的半径。

2. 在代码里,用CardView.setRadius方法设置圆角的半径。

3. 用card_view:cardBackgroundColor属性来设置卡片的背景颜色。

下面代码显示在布局里怎样使用CardView控件:

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

详情请看。CardView的API 參考。

加入相关的依赖包

RecyclerView 和 CardView控件是 v7 Support Libraries库的一部分。想要在项目里使用这些控件。须要加入例如以下依赖包到app的module中:

dependencies {
...
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}

以上翻译内容中外部链接的部分,以后会逐步翻译出来,眼下链接是官方的站点,假设须要查看的朋友,请先翻墙。

使用Material Design 创建App翻译系列---列表和卡片集的创建的更多相关文章

  1. 使用Material Design 创建App翻译系列----材料主题的使用(Using Material Theme)

    上一篇是使用Material Design 创建App翻译系列--開始学习篇,进入正题: 新的材料主题提供了下面内容: 1. 提供了同意设置颜色板的系统部件组件. 2. 为这些系统组件提供了触摸反馈动 ...

  2. Android Material Design-Creating Apps with Material Design(用 Material Design设计App)-(零)

    转载请注明出处:http://blog.csdn.net/bbld_/article/details/40400031 翻译自:http://developer.android.com/trainin ...

  3. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第一章:创建基本的MVC Web站点

    在这一章中,我们将学习如何使用基架快速搭建和运行一个简单的Microsoft ASP.NET MVC Web站点.在我们马上投入学习和编码之前,我们首先了解一些有关ASP.NET MVC和Entity ...

  4. Material Design系列第一篇——Creating Apps with Material Design

    Creating Apps with Material Design //创建Material Design的App Material design is a comprehensive guide ...

  5. 【Android】进入Material Design时代

    由于本文引用了大量官方文档.图片资源,以及开源社区的Lib和相关图片资源,因此在转载的时候,务必注明来源,如果使用资源请注明资源的出处,尊重版权,尊重别人的劳动成果,谢谢! Material Desi ...

  6. 进入Material Design时代

    ------------------------------------------------------------------------------ GitHub:lightSky 微博:   ...

  7. flutter学习之二Material Design设计规范

    前言: 最近在自学flutter跨平台开发,从学习的过程来看真心感觉不是那么一件特别容易的事.不但要了解语法规则, 还要知晓常用控件,和一些扩展性的外延知识,所以套一句古人的话“路漫漫其修远矣,无将上 ...

  8. 【Material Design视觉设计语言】应用样式设计

    作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells Github:https://github.co ...

  9. 【Material Design视觉设计语言】应用布局设计

    [Material Design视觉设计语言]章节列表 [Material Design视觉设计语言]开篇 [Material Design视觉设计语言]Material Design设计概述 [Ma ...

随机推荐

  1. AC日记——可怜的狗狗 洛谷 P1533

    可怜的狗狗 思路: 主席树第k大: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 300001 #defin ...

  2. BC-NFS部署报错节点间磁盘wwid冲突

    1.在部署公司的BC-NFS产品时,填好IP选好磁盘后,点击“创建”,就抛出如下提示: 2.关闭虚机,再打开虚机的控制台,点击磁盘,自定义serial number 3.启动虚机,再次登陆,查看磁盘w ...

  3. Lucene.Net无障碍学习和使用:索引篇

    一.简单认识索引 Lucene.Net的应用相对比较简单.一段时间以来,我最多只是在项目中写点代码,利用一下它的类库而已,对很多名词术语不是很清晰,甚至理解 可能还有偏差.从我过去的博客你也可以看出, ...

  4. centos7 mariaDB安装

    参考:http://www.linuxidc.com/Linux/2016-03/128880.htm

  5. 为函数自定义bind方法实例页面

    HTML代码: <input id="button" type="button" value="点击我" /> <span ...

  6. ZOJ 2974 Just Pour the Water

    矩阵快速幂. 构造一个矩阵,$a[i][j]$表示一次操作后,$j$会从$i$那里得到水的比例.注意$k=0$的时候,要将$a[i][j]$置为$1$. #pragma comment(linker, ...

  7. Python开发基础-Day16import模块导入和包的调用

    模块概念 在Python中,一个.py文件就称之为一个模块(Module).使用模块组织代码,最大的好处是大大提高了代码的可维护性 模块一共三种:python标准库.第三方模块.应用程序自定义模块. ...

  8. 【状压dp】Islands and Bridges

    Islands and Bridges Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 11034   Accepted: 2 ...

  9. 【线段树】HDU1754-I hate it

    单点修改,区间最值的标程,没什么好说的. #include<iostream> #include<cstdio> #include<cstring> #includ ...

  10. jsp ajax实例讲解

    下面介绍JSP前台表单内容通过Ajax异步提交到后台Servlet进行校验(校验方式多种,包括提取数据库信息,校验用户名是否重复等),异步在JSP表单页面显示校验结果信息的基本过程. 一.说明: 1. ...