Android Material设计中列表和卡片的创建方法解析

5.0提供了两个新的Widget,它们使用了Material Design 的style和animation:

  • RecyclerView 一个更可插拔式的ListView,它支持不同的布局类型,并且性能有了改进。(列表式)
  • CardView 一个能让你在其内显示重要信息,并保持连贯的视觉和感觉的卡片。(卡片式)

它两位于 sdk/extras/android/support/v7/cardview 和 sdk/extras/android/support/v7/RecyclerView


创建列表
RecyclerView组件是一个更先进和灵活的版本的列表视图。这个小部件是一个非常有效率的容器,通过有限的views,可以滚动显示大型数据集。
RecyclerView组件数据集合的元素,可在运行时根据用户操作或网络事件进行改变。
RecyclerView类简化了显示和处理大型数据集,它提供了:

  • 布局管理器
  • 常见的默认动画item操作,如删除、添加项目

你可以在RecyclerView中灵活定义 布局管理器和动画

要使用RecyclerView组件,您必须指定一个适配器和布局管理器。创建一个适配器,继承RecyclerView.Adapter类。有关更多信息,请参见下面的例子。
RecyclerView并确定重用项目视图时,布局管理器的利用item的方法,不再是对用户可见。重用(或回收)视图,布局管理器可能会问适配器,替换内容为不同的数据集的元素。回收view时,以这种方式来改进性能:避免创建不必要的view或执行消耗大的findViewById()查询。

RecyclerView提供了如下管理器:

  • LinearLayoutManager  横向或纵向的滚动列表
  • GridLayoutManager  网格列表
  • StaggeredGridLayoutManager  交错的网格列表

要创建一个自定义布局管理器,需要继承RecyclerView.LayoutManager类

动画:
添加和删除item的动画,在RecyclerView默认启用。定制这些动画,需要继承RecyclerView.ItemAnimator类并使用RecyclerView.setItemAnimator()方法。

例子:
layout

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

    // use this setting to improve performance if you know that changes
    // in content do not change the layout size of the RecyclerView
    mRecyclerView.setHasFixedSize(true); //使用固定size 以优化性能 

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

adapter

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
  private String[] mDataset; 

  // Provide a reference to the views for each data item
  // Complex data items may need more than one view per item, and
  // you provide access to all the views for a data item in a view holder
  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
    TextView v = (TextView)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,以卡片式显示一致的外观。它可以有阴影和圆角
创建一个有阴影的卡片,使用card_view:cardElevation属性。

使用这些属性来定制CardView组件的外观:

  • 在你的布局设置圆角半径,使用card_view:cardCornerRadius属性
  • 在代码中设置圆角半径,使用CardView.setRadius方法
  • 设置卡片的背景颜色,使用card_view:cardBackgroundColor属性

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

添加依赖:
gradle依赖

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

相关推荐

  • Android实现卡片翻转动画

    最近项目上用到了卡片的翻转效果,大致研究了下,也参考了网上的一些Demo,简单实现如下: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/card_main_container&

  • Material Design系列之自定义Behavior支持所有View

    本文实例为大家分享了Android自定义Behavior支持所有View ,供大家参考,具体内容如下 一.实现效果图 这个右下角的FAB,动画当然可以多种多样,可以放在界面的任何地方,我们这里只举个例子.但是v7包中提供的Behavior目前只能是FloatingActionButton来用,所以今天我们实现的这个Behavior是支持所有的View的,可以用在ImageView.Button.Layout,只要是继承View的类都可以用. 二.自定义Behavior和动画的封装 我们知道Beh

  • 学习使用Material Design控件(一)

    Google 发布的Material Design支持库,对我们的APP设计有很大的影响,如果重新设计APP,支持库应该直接用V4提升到V7了,我们可以用Toolbar代替ActionBar,以及引入了RecycleView, SnakeBar等新控件. 我写了一个Demo来学习使用这些新控件. 新建项目,加入依赖包 我们使用Android Studio来开发这个Demo,在Android Studio新建一个项目,修改App Module的build.gradle文件,把compileSdkV

  • 学习使用Material Design控件(三)使用CardView实现卡片效果

    本文主要介绍CardView的使用,CardView是继承自FrameLayout,使用比较简单,只需要用CardView包含其他View就可以实现卡片效果了. 实现效果如下: 加入依赖库 dependencies { -. compile 'com.android.support:cardview-v7:22.2.0' } Layout布局 <android.support.v7.widget.CardView android:layout_width="match_parent&quo

  • Material Design系列之Behavior实现支付密码弹窗和商品属性选择效果

    今天的效果在支付宝.淘宝.京东等电商App中很常见.比如支付宝输入密码弹窗.商城下单时选择商品属性时,从下面浮动上来一个PopupWindow,那么今天就带大家用Behavior来实现这两个效果,结果你会发现简直只需要一行代码. 总结下现在用的APP: 1. 仿支付宝弹出的输入支付密码窗口. 2. 仿淘宝/天猫弹出商品属性选择框. 3. 知乎首页上下滑动隐藏ToolBar和NavigationBar. 4. - 系列博客: 1. Material Design系列,Behavior之Bottom

  • 学习使用Material Design控件(二)使用DrawerLayout实现侧滑菜单栏效果

    本文介绍如何使用DrawerLayout和NavigationView实现侧滑菜单栏的效果. 效果如下: Layout布局 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+

  • Android编程重写ViewGroup实现卡片布局的方法

    本文实例讲述了Android编程重写ViewGroup实现卡片布局的方法.分享给大家供大家参考,具体如下: 实现效果如图: 实现思路 1. 重写onMeasure(int widthMeasureSpec, int heightMeasureSpec)设置每个子View的大小 2. 重写onLayout(boolean changed, int l, int t, int r, int b) 设置每个子View的位置 第一步:新建FlowLayout继承ViewGroup package com

  • 微信小程序之MaterialDesign--input组件详解

    主要通过input输入事件配合css的transform动态改变实现这种效果. 实际调试过程中,input组件bindinput事件触发后回调的detail对象,在模拟器中含有cursor属性,在真机中(测过安卓,ios没测过)却没有该属性,最后选择detail对象中的value属性的值的长度来同步输入的位数. bindfocus事件最好不要添加改变css的代码 . 预览图片: JS: //index.js //获取应用实例 var app = getApp() Page({ data: { v

  • Material Design系列之Behavior上滑显示返回顶部按钮

    效果预览 源码在文章末尾. 引文 有时候我们的页面内容过长的时候,滑动到页面底部用户再滑动到顶部很麻烦,Android不像iOS可以点击statusBar回到顶部,一般都是双击Toolbar/ActionBar或者在底部放一个按钮. 今天就底部放一个回到顶部按钮这个效果来做一个基于Behavior的实现.那么我们传统的方式来做就是监听这个滑动View,比如:ScrollView/ListView/RecyclerView/GridView等,那么如果我们使用了CoordinatorLayout,

  • Android仿探探卡片式滑动效果实现

    前言 第一次进入探探软件界面,就被这种通过卡片式滑动来选择"喜欢/不喜欢"的设计所吸引了.当时就非常想通过自己来实现这种仿探探式的效果,然而却没什么思路.不过毋庸置疑的是,这种效果的原理肯定和 ListView / RecyclerView 类似,涉及到 Item View 的回收和重用,否则早就因为大量的 Item View 而 OOM 了. 再到后来,看到许多大神也推出了同样仿探探效果的博客,从头到尾阅读下来,写得通俗易懂,基本上没什么问题.于是,实现仿探探效果的想法再次出现在脑海

  • Material Design系列之Behavior实现Android知乎首页

    本博客目的:仿知乎首页向上滑动时动画隐藏Toolbar.FlocationActionButton.Tab导航,下滑时显示,如果和你的期望不同,那么你可以不需要看了,免的浪费你的宝贵时间噢. 效果预览 知乎效果: 本博客实现效果: 今天效果的源代码下载链接在文章末尾. 实现分析 这个效果其实并不难实现,但是它的用处很大,当用户手指上滑,屏幕上显示下方内容的时候,隐藏Toolbar.Tab导航.FAB来腾出更大的空间显示内容,让用户爽.简单粗暴,但这就是我们的目的. 首先就是头部的Toolbar,

随机推荐