脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android用ConstraintLayout实现动画

Android利用ConstraintLayout实现漂亮的动画详解

 更新时间：2017年05月26日 11:04:32   投稿：daisy  
最近在无意中看到一篇关于ConstraintLayout的文章，ConstraintLayout是Android Studio 2.2中主要的新增功能之一，下面这篇文章主要给大家介绍了关于Android利用ConstraintLayout实现漂亮的动画的相关资料，需要的朋友可以参考下。

前言

最近ConstrainLayout是Android中比较火的一个东西。ConstrainLayout可以使View层级扁平化，提升性能，支持任意的边框，其目的就是修复之前layout的一些短板。其实ConstrainLayout还有一个大多数人没有注意到的特性：可以利用Constrainlayout快速构建漂亮的动画效果。

方法

我这里假设已经你已经掌握了Constrainlayout基本知识（比如：app:layout_constraintLeft_toLeftOf等）。Constrainlayout可以通过TransitionManager 在两组constraints之间执行动画（需要API>19或者使用support library），以下是一个demo。

Simple demo


我们先写一个xml布局：

<!-- activity_main.xml -->
<android.support.constraint.ConstraintLayout ...>

 <ImageView
 android:id="@+id/image"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 ... />

 <Button ... />

</android.support.constraint.ConstraintLayout>

到目前为止，这只是一个普通的xml布局，我们再定义另一个布局：

<!-- activity_main_alt.xml -->
<android.support.constraint.ConstraintLayout ...>

 <ImageView
 android:id="@+id/image"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 **app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintBottom_toBottomOf="parent"**
 ... />

 <Button ... />

</android.support.constraint.ConstraintLayout>

这两个布局只有ImageView的高度不同，为了执行动画，只需要在Activity中写几行代码即可：

override fun onCreate(savedInstanceState: Bundle?) {
 ...
 val constraintSet1 = ConstraintSet()
 constraintSet1.clone(constraintLayout)
 val constraintSet2 = ConstraintSet()
 constraintSet2.clone(this, R.layout.activity_main_alt)

 var changed = false
 findViewById(R.id.button).setOnClickListener {
 TransitionManager.beginDelayedTransition(constraintLayout)
 val constraint = if (changed) constraintSet1 else constraintSet2
 constraint.applyTo(constraintLayout)
 changed = !changed
 }
}

代码使用Kotlin写的，即使没有学过，基本也没有什么障碍，不过还是很有必要学习一下的。

代码中我们使用TransitionManager在Constrainlayout中启动了一个延时动画，TransitionManager在交换两种布局时会自动使用动画。

重复的xml Layout

这种方式使用了两个xml布局，是否重复了呢，没有人喜欢重复的代码。

其实没有你想的那么糟糕，如果为了动画的目的定义多余的xml，可以省略所有的非布局属性（如textSize等属性）。Constrainlayout会自动捕获所有layout的基本约束属性并抛弃其中的一些。

如果你还是想避免重复的代码，还可以在代码中动态修改约束属性：

override fun onCreate(savedInstanceState: Bundle?) {
 ...
 val constraintSet1 = ConstraintSet()
 constraintSet1.clone(constraintLayout)
 val constraintSet2 = ConstraintSet()
 constraintSet2.clone(constraintLayout)
 constraintSet2.centerVertically(R.id.image, 0)

 var changed = false
 findViewById(R.id.button).setOnClickListener {
 TransitionManager.beginDelayedTransition(constraintLayout)
 val constraint = if (changed) constraintSet1 else constraintSet2
 constraint.applyTo(constraintLayout)
 changed = !changed
 }
}

使用transition 框架也可以实现这些动画

当然可以这样，我们可以通过使用transition框架或者使用属性设置也可以实现动画。然而，当需要的动画可通过使用特定的约束来实现时，ConstrainLayout的方法就很有效，否则就需要大量的代码来实现动画效果。

另一个使用场景是当很多元素需要动效时，看一个例子：

使用ConstrainLayout可以实现以上的效果，通过指定不同的xml，动画就会自动执行。

注意事项

1. 启动动画的方法：

TransitionManager.beginDelayedTransition(constraintLayout)

2. 自定义动画

还可以自定义Transition：

val transition = AutoTransition()
transition.duration = 1000
TransitionManager.beginDelayedTransition(
 constraintLayout, transition)

3. 嵌套问题

ConstraintLayout只可以对其直接子View执行动画，这就意味着它不能很好地处理嵌套的ViewGroup。在以上的例子中，CardView中的TextView还需要手动处理动画，也许可以通过嵌套ConstrainLayout来实现，但是我并没有进行实验。

4. 非布局属性

ConstraintLayout只支持约束布局的动画，不支持其他属性（如坐标修改，文字修改等）。

5. 其他

如果动态修改ConstraintLayout中元素的基本布局属性（比如使用translationY），动画后并不会同步这个变更，也就是说动画执行后，之前修改的属性将会复原。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • android ScrollView实现水平滑动回弹

    android ScrollView实现水平滑动回弹

    这篇文章主要为大家详细介绍了android ScrollView实现水平滑动回弹，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Android Studio设置绘制布局时的视图

    Android Studio设置绘制布局时的视图

    这篇文章介绍了Android Studio设置绘制布局时视图的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • Android保存Activity状态的方法

    Android保存Activity状态的方法

    这篇文章主要介绍了Android保存Activity状态的方法,结合实例形式较为详细的分析了Android保存Activity状态的原理、实现步骤及相关注意事项,需要的朋友可以参考下
    2016-08-08
  • Android开发实战之漂亮的ViewPager引导页

    Android开发实战之漂亮的ViewPager引导页

    这篇文章主要介绍了Android开发实战中漂亮ViewPager引导页的制作过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Android入门之使用SQLite内嵌式数据库详解

    Android入门之使用SQLite内嵌式数据库详解

    Android内带SQLite内嵌式数据库了。这对于我们存储一些更复杂的结构化数据带来了极大的便利。本文就来和大家聊聊具体的使用方法，希望对大家有所帮助
    2022-12-12
  • Android编程之页面切换测试实例

    Android编程之页面切换测试实例

    这篇文章主要介绍了Android编程之页面切换测试,实例分析了Android实现页面点击切换的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • Android Toast提示封装实例代码

    Android Toast提示封装实例代码

    这篇文章主要介绍了Android Toast提示封装实例代码的相关资料,需要的朋友可以参考下
    2017-06-06
  • Android仿微信朋友圈实现滚动条下拉反弹效果

    Android仿微信朋友圈实现滚动条下拉反弹效果

    这篇文章主要为大家介绍了Android仿微信朋友圈实现滚动条下拉反弹效果，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • android全局监控click事件的四种方式(小结)

    android全局监控click事件的四种方式(小结)

    本篇文章主要介绍了android全局监控click事件的四种方式(小结)，详细介绍如何在全局上去监听 click 点击事件，并做些通用处理或是拦截，有兴趣的可以了解一下
    2017-08-08
  • Android自定义ViewGroup实现标签浮动效果

    Android自定义ViewGroup实现标签浮动效果

    这篇文章主要为大家详细介绍了Android自定义ViewGroup实现标签浮动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-06-06

最新评论