当前位置: 首页 > 科技观察

移动开发指南:AndroidTransitionFramework简介_0

时间:2023-03-21 14:14:51 科技观察

【译文】AndroidTransition框架允许我们在应用程序用户界面中配置各种外观变化。您可以在应用程序屏幕内制作动画转换,将每个阶段定义为一个场景,并控制应用程序如何从一个显示场景转换到另一个显示场景。在今天的文章中,我们将构建一个简单的应用程序并为其创建一组动画过渡。要完成此任务,您需要做的就是准备XML格式的布局和可绘制文件,然后在Java中配置和应用此转换机制。我们将定义两种场景,其中同一组视图项目将在设备屏幕上以不同方式排列。当你使用Transition框架时,Android会在两个场景之间的过渡过程中自动完成动画过渡效果。1.创建应用程序第一步作为本教程的第一步,我们首先在我们选择的IDE中创建一个新应用程序。您至少需要SDK19才能使这些Transition类工作,因此如果我们想要支持其他早期版本,我们需要采取一些额外的步骤。首先为应用程序指定一个主Activity和布局文件,并选择start_layout.xml作为布局的名称。然后我们将添加其他布局文件并使用Transition机制在不同的显示布局之间切换。下面的截图展示了这个过程在AndroidStudio中的具体实现过程。第二步,我们在Transition中准备一些drawable图形以供使用。我们将准备四个圆形图案,每个图案填充不同的渐变色。在示例应用程序的可绘制资源目录中,首先创建一个名为shape1.xml的新文件。使用以下代码添加图形:上面的代码构建了一个填充了渐变颜色的圆形图案。四个图形在大小和样式上完全一样,只是颜色不同而已。当然,你可能需要为不同像素密度的设备准备多个不同版本的图形。使用以下代码创建shape2.xml:现在添加shape3.xml:***添加shape4.xml:我们将在两种布局场景中将这些图形用作ImageButton#p#2.创建布局场景***接下来,我们需要定义两种类型的场景,它们会在几种XML布局之间进行转换,第一种是处理你在创建应用程序时已经添加的主布局文件,即start_layout.xml,打开它并切换到XML编辑选项卡。将RelativeLayout与以下代码一起使用:"match_parent"android:layout_height="match_parent"android:background="#ff000000"android:id="@+id/base"tools:context=".TransitionsActivity">我们为此添加了背景色带ID的布局。这个ID的作用是保证Android处理不同场景之间的过渡,你会在第二个场景中再次使用同一个ID。当我们在两个场景之间进行转换时,Android会为每个场景中具有相同ID的视图设置动画转换。如果两者不具有相同的ID,Android系统会将它们视为完全不同的项,并简单地通过淡入或淡出来处理它们的过渡效果。在RelativeLayout中,为我们之前创建好的每个图形创建ImageButton:需要注意的是每个图形按钮都有自己的ID——和我们创建的第一个一样当然是第二个布局-加上onClick属性然后我们将这个方法添加到主Activity并在用户单击任何图形时启动转换过程。现在我们将在IDE中看到整个布局的预览,但在某些情况下,您必须在设备或模拟器上实际运行应用程序才能看到它的渐变和/或透明度。这些图形排列在屏幕的四个角,具体效果如下图所示。我们在第二步中创建的第一个布局方案将显示为过渡过程的初始状态。现在让我们为我们的场景创建第二个布局文件作为过渡过程的结束状态。在我们的应用程序布局资源目录中添加一个新文件,将其命名为end_layout.xml。切换到文档标签并输入以下代码:现在我们花点时间看一下上面的布局代码,除了每个图形按钮的位置不同外,和第一个布局完全一样。每个图形已经从起始位置移动到它的对角线位置,因此转场过程会调换每个图形的位置,即引导到屏幕上的对角线位置。#p#3.不同场景之间的转场第一步既然我们已经定义了两组布局,那么我们现在要做的就是使用过渡机制来完成两者之间的移动过程。在应用程序中打开主Activity类。您将需要使用以下导入语句:importandroidimportandroid.transition.Scene;importandroid.transition.Transition;importandroid.view.View;importandroid.view.ViewGroup;importandroid.view.animation.AccelerateDecelerateInterpolator;importandroid.widget.RelativeLayout;在Activity类声明中,bef在onCreate方法中,我们需要添加如下实例变量来应用transition机制:第二步现在让我们为过渡做准备,整个过程将在用户点击任意图形时正式开始。在onCreate中,我们希望在IDE已经输入的现有代码之后添加以下内容://getthelayoutIDRelativeLayoutbaseLayout=(RelativeLayout)findViewById(R.id.base);//firstsceneViewGroupstartViews=(ViewGroup)getLayoutInflater().inflate(R.layout.start_layout,baseLayout,false);//secondsceneViewGroupendViews=(ViewGroup)getLayoutInflater().inflate(R.layout.end_layout,baseLayout,false);我们首先需要定义基本场景,也就是我们布局两个场景文件内设置的ID为includedlayout。接下来,我们还需要定义两个场景作为过渡过程的开始和结束状态,并为它们指定布局文件名和包含的基本场景。这样,Android就可以根据我们的需要在两个场景之间进行转换,将不同场景中任何具有相同ID的视图元素都视为同一个对象,从而在切换场景时显示动画场景。改变效果。接下来,我们定义两个场景作为过渡过程的开始和结束状态,还是在onCreate中://createthetwoscenescene1=newScene(baseLayout,startViews);scene2=newScene(baseLayout,endViews);我们要结合基本布局和相关的场景布局传递给每个构造函数。我们现在可以在定义过渡过程时参考这些场景。第三步,我们准备执行transition,还是在onCreate://createtransition,setpropertiestransition=newAutoTransition();transition.setDuration(5000);transition.setInterpolator(newAccelerateDecelerateInterpolator());//initializeflagstart=true;Android提供了一系列的过渡类型可供选择,你可以根据需要的场景变化方式使用不同的动画效果。在今天的例子中,我们选择了AutoTransition,这样Android会根据两个变化场景的属性来计算如何实现transition。感兴趣的朋友也可以点击此处查看更多与Transitionreferences相关的选项。我们为过渡设置持续时间和插值器。如果需要,您还可以为整个更改机制设置启动延迟。***,我们通过初始化将布尔标志设置为真。为简单起见,我们将单击任何形状来激活场景开关,但这只是为了演示示例的实际功能。第四步,大家一定要记住,我们在创建布局XML文件的时候,已经给图形按钮添加了onClick属性。现在我们要将此方法添加到活动中:publicvoidchangeScene(Viewv){//checkflagif(start){TransitionManager.go(scene2,transition);start=false;}else{TransitionManager.go(scene1,transition);start=true;}}我们使用Activity来实现从当前场景到另一组场景的转换,其中布尔标志会跟踪我们当前使用的场景类型。我们还指定了之前已经创建好的Transition对象,保证switch的执行过程符合预期的效果。您现在应该能够运行您的应用程序并在您单击任何形状时看到转换流程。每次我们点击时,过渡过程都会慢慢地将每个图形移动到屏幕上的对角线位置,再次点击会将其带回原来的位置。内容总结在今天的文章中,我们其实只是初步了解了使用AndroidTransition框架可以实现什么样的设计方案和转场效果。要在您的应用程序中引入更多的过渡机制,您可以单击此处查看TransitionManager类中的其他方法,包括beginDelayedTransition和transitionTo。此外,您可能希望尝试使用TransitionSet来组合多种过渡机制,例如同时使用来自不同过渡机制的渐变和移动效果。根据转场机制的复杂程度,你可能还需要使用TransitionValues类,它可以提供对应转场相关的数据值引用能力。如果大家还想了解更多场景处理相关的技术手段,也可以点击这里查看Scene类的相关说明。原文链接:AnIntroductiontoAndroidTransitions核子可乐翻译