Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Android 5.0 Lollipop中新的Activity过渡效果介绍

by
Difficulty:IntermediateLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Pengfei Xu (you can also view the original English article)

What You'll Be Creating

介绍

Material Design说明中最有趣的一方面就是各个Activity在切换时保持的视觉连串性。 仅需几行代码,新的Lollipop API让你可以在两个Activity之间添加富有含义的过渡效果,多亏了有无缝持续动画。 这打破了之前Android版本中经典的Activity之间的界限,并且能够让用户理解页面元素是如何从一个位置移动到另一个位置。

在本教程中,我会通过创建一个符合谷歌Material Design规范的示例应用,来向你展示如何制作这样的效果。

先决条件

在本教程中,我假设你已熟悉Android开发并且使用Android Studio作为你的开发工具。 我会广泛地使用Android Intent,采用Activity生命周期的一些基本知识,和API 21中引入的新的RecyclerView控件。 我并不打算去深究这个class类,但是,如果你非常感兴趣,你可以在这儿Tuts+ RecyclerView教程找到极佳的解释。

1. 创建第一个Activity

本应用的基本结构清晰明了。 有两个Activity,一个主Activity:MainActivity.java,用作展示item列表;第二个Activity:DetailActivity.java,用作展示之前列表项选中item的详情。

第一步:RecyclerView控件

展示item列表,main activity会使用Android Lollipop中引入的RecyclerView控件。 你需要做的第一件事,添加下面一行代码到你项目中build.grade文件的dependencies部分里,使得项目能向下兼容。

第二步:定义数据

为了尽可能的简洁代码,我们不会为程序定义数据库或类似的数据源。 相反,我们会使用一个自定义类,Contact。 每一个item会有一个name、color和基本联系信息。 以下是Contact类的大体实现。

最终你会得到一个能够很好地承载你所关注信息的类。 但是我们需要填充一些数据。 在Contact类的起始位置,添加下面的代码以填充数据集。

定义数据为publicstatic,项目中每个类都可以读取该数据。 在现在的情况下,我们通过写进类中的代码来模拟从数据库获取数据的行为。

第三步:定义主布局Main Layouts

main activity的布局文件很简单,因为会把list列表数据填充满整个屏幕。 布局layout文件包含一个RelativeLayout相对布局作为根布局——使用LinearLayout一样可行——并且添加一个RecyclerView作为其唯一子布局。

因为RecyclerView只管理其子元素,你则需要一个布局文件来定义item的布局。 我们想要contact联系人列表的item布局的左边是一个有色彩的圆,所以你需要先在drawable目录下定义circle.xml

你现在已经集齐所有的元素,可以定义item的布局了。

第四步:通过RecyclerView展示数据

我们就快完成本教程的第一部分了。 你还需要重写RecyclerView.ViewHolderRecyclerView.Adapter,并在main activity的onCreate方法中为view做相应绑定。 在此,RecyclerView.ViewHolder实现类需要能够处理点击事件,所以你需要添加一个点击事件的相应实现类。 下面让我们开始定义处理点击事件的实现类吧。

RecyclerView.Adapter实现类需要做详细的解析,这个类里我称之为DataManager。 这个类负责加载数据并将数据添加到视图列表里的视图中。 DataManager类也会包含RecyclerView.ViewHolder的属性。

最后,在onCreate方法中的setContentView代码后添加以下代码。 至此,main activity就基本完成,可以展示列表数据了。

编译后运行程序效果见下图。

First Activity when completed

2.创建Detail详情Activity

第一步:布局

第二个activity就简单多了。 通过contact联系人列表选中的ID来重新获取第一个activity没有展示的额外信息。

从view设计的角度来看,这个activity的布局很重要,因为它是应用程序中最重要的部分。 但是XML文件中要关注的并不太重要。 布局文件是一系列以合适方式排布的TextView实例,同时使用了RelativeLayoutLinearLayout。 以下是布局文件代码:

第二步:通过Intent发送并接受ID数据

因为两个activity是通过intent连接的,你需要发送相应的信息给第二个activity来使其理解你需要显示哪个contact联系人的详情。

可以选择变量的位置作为引用。 item在视图列表中的位置和在数组中的位置是一致的,所以使用位置这个数字作为唯一的标识是可以的。

以上方法是可行的,但是如果你采用这种方式,出于某些原因,数据集在运行时是动态变化的,这时位置的引用关系就不会取到你想要的数据。 这就是为什么使用ID效果更好。 以下是Contact类中定义的getId方法。

按照下面的方法编辑onItemClick方法来处理列表项的点击事件。

DetailsActivity会通过Intent的extras属性收到信息,并且通过ID引用获得正确的数据来构造正确的对象。 详情见以下代码。

和之前RecyclerView中的onCreateViewHolder方法一样,这个view使用findViewById方法找到控件并使用setText方法填充数据。 如下,我们通过下面的方法来给展示姓名的TextView填充数据。

其他的内容区域也使用同样的方法填充数据。 这样,第二个activity就完成啦。

Second Activity when completed

3. 关联变化

我们终于到了本教程的核心了,使用Lollipop中最新的共享元素过渡动画作为两个activity的过渡动画。

第一步:配置你的项目

首先你要做的是编辑values-v21目录下的style.xml文件。 通过这样的方法,你可以设置过渡动画的内容,并设置两个activity不共享view的进入和消失的方式。

请注意这时你的项目的最高支持版本(同时编译项目使用的最低版本)至少为Android API 21

这个动画在低于Lollipop版本的系统中会被忽略从而不执行。 不幸的是,由于性能上的原因,AppCompat兼容包没有为这些动画提供完全的向下兼容。

第二步:在Layout文件中指定变换控件的名字

当你编辑了style.xml文件后,你需要指明视图间两个共享元素之间的关联。

在此示例中,共享的视图元素是包括contact联系人姓名、一个电话号码和一个彩色圆形的控件。 视图中的每个元素,你都要为其指定一个共同的变换名称。 出于这个原因,我们在再strings.xml资源文件中加入下列元素。

然后,在layout文件的三个元素中添加android:transitionName属性并赋予相对应的值。 下面是彩色圆元素的代码示例:

正是这个属性,Android系统会知道两个activity的视图间哪个view为共享元素并且在过渡中添加正确的动画。 另外两个view采取同样的处理。

第三步:配置Intent

从view视图的编码角度看,你需要在intent中绑定特定ActivityOptions对象。 你所需的方法是makeSceneTransitionAnimation,这个方法接受的参数为context上下文对象和共享元素数组。 在RecyclerViewonItemClick方法中,将之前的Intent修改为下面的实现:

实现每个共享元素的动画,你需要在makeSceneTransitionAnimation方法中添加一个新的Pair对象。 每个Pair对象包含两个值,第一个值是动画起始view对象的引用,第二个值是该view对象transitionName属性的

导入Pair类的时候需要注意下。 你需要导入android.support.v4.util包下的Pair类,而不是android.util包下的Pair类。 同时,谨记使用ActivityCompat.startActivity方法而不是startActivity方法,否则,你的程序在API低于16的系统中无法运行。

完结。 撒花。 就是这么简单。

总结

在本教程中,你学到了如何给共用一个或更多的元素的两个activity添加漂亮无缝的过渡动画,获得视觉上愉悦的同时展示了富有含义的持续动画。

你通过制作两个activity中第一个展示contact联系人列表的activity开始了本教程。 随后你又完成了第二个activity,设计它的布局,并且想办法实现了在两个activity间传递一个唯一引用。 最终,你了解了makeSceneTransitionAnimation方法的运作方式,XML文件中的transitionName属性简直是神来之笔。

贴心小提示: style之细节

真正创造一个Material Design风格的应用,就像之前截屏展示的那样,你还需要改变应用的主题颜色。 在values-21目录下编辑你的主题基准来实现这个效果。

关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.