Kotlin中animateLayoutChanges的使用

最新推荐文章于 2024-07-04 22:20:42 发布
最新推荐文章于 2024-07-04 22:20:42 发布
阅读量298 收藏
点赞数
分类专栏： kotlin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jingerlovexiaojie/article/details/116590694
版权

实现如下的动画效果：

核心代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#AAA8A7"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_hotel_complete_itinerary"
        android:orientation="vertical">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/cl_tab"
            android:layout_width="match_parent"
            android:layout_height="54dp"
            android:animateLayoutChanges="true"
            android:background="@drawable/bg_itinerary_tab_left_background"
            android:orientation="horizontal"
            android:paddingBottom="9dp">

            <TextView
                android:id="@+id/tv_tab_drop_off"
                android:layout_width="0dp"
                android:layout_height="26dp"
                android:layout_weight="1"
                android:gravity="center"
                android:includeFontPadding="false"
                android:text="老公"
                android:textColor="#292929"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/tv_tab_pick_up"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <View
                android:id="@+id/indicator_drop_off"
                android:layout_width="16dp"
                android:layout_height="5dp"
                android:layout_marginTop="4dp"
                android:background="@drawable/shape_hotel_tab_indicator"
                app:layout_constraintEnd_toStartOf="@+id/tv_tab_pick_up"
                app:layout_constraintHorizontal_bias="0.494"
                app:layout_constraintStart_toStartOf="@+id/tv_tab_drop_off"
                app:layout_constraintTop_toBottomOf="@+id/tv_tab_drop_off" />

            <TextView
                android:id="@+id/tv_tab_pick_up"
                android:layout_width="0dp"
                android:layout_height="26dp"
                android:gravity="center"
                android:includeFontPadding="false"
                android:text="老婆"
                android:textColor="@color/colorAccent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/tv_tab_drop_off"
                app:layout_constraintTop_toTopOf="parent"
                tools:layout_editor_absoluteY="5dp" />

            <View
                android:id="@+id/indicator_pick_up"
                android:layout_width="16dp"
                android:layout_height="5dp"
                android:background="@drawable/shape_hotel_tab_indicator"
                android:visibility="invisible"
                app:layout_constraintEnd_toEndOf="@+id/tv_tab_pick_up"
                app:layout_constraintHorizontal_bias="0.494"
                app:layout_constraintStart_toEndOf="@+id/tv_tab_drop_off"
                app:layout_constraintTop_toBottomOf="@+id/tv_tab_pick_up" />

        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/cl_ticket"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true"
            android:background="#fff">

            <TextView
                android:id="@+id/tv_ticket_code"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="12dp"
                android:fontFamily="sans-serif-medium"
                android:hint="请选择你喜欢的水果"
                android:textColor="#292929"
                android:textColorHint="#80646B7F"
                android:textSize="17sp"
                app:layout_constraintEnd_toStartOf="@+id/iv_ticket_arrow"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/tv_flight_hint"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="4dp"
                android:text="今天口红打八折哟"
                android:textColor="#f5a632"
                android:visibility="gone"
                app:layout_constraintStart_toStartOf="@+id/tv_ticket_code"
                app:layout_constraintTop_toBottomOf="@+id/tv_ticket_code" />

            <TextView
                android:id="@+id/tv_ticket_info"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:textColor="#292929"
                android:visibility="gone"
                app:layout_constraintEnd_toStartOf="@+id/iv_ticket_arrow"
                app:layout_constraintStart_toStartOf="@+id/tv_ticket_code"
                app:layout_constraintTop_toBottomOf="@+id/tv_flight_hint"
                tools:text="" />

            <ImageView
                android:id="@+id/iv_ticket_arrow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="20dp"
                android:src="@drawable/ic_arrow_grey_right"
                app:layout_constraintBottom_toBottomOf="@+id/tv_ticket_code"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="@+id/tv_ticket_code" />

            <View
                android:id="@+id/divider_ticket"
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:layout_marginTop="20dp"
                android:background="#e6eaf0"
                app:layout_constraintEnd_toEndOf="@id/iv_ticket_arrow"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tv_ticket_info" />

            <TextView
                android:id="@+id/tv_passenger_location"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="12dp"
                android:layout_marginTop="20dp"
                android:fontFamily="sans-serif-medium"
                android:hint="请输入您的手机号"
                android:textColor="#292929"
                android:textColorHint="#80646B7F"
                android:textSize="17sp"
                app:layout_constraintEnd_toStartOf="@+id/iv_passenger_location_arrow"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/divider_ticket" />

            <ImageView
                android:id="@+id/iv_passenger_location_arrow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="20dp"
                android:src="@drawable/ic_arrow_grey_right"
                app:layout_constraintBottom_toBottomOf="@+id/tv_passenger_location"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="@+id/tv_passenger_location" />

            <View
                android:id="@+id/divider_passenger_location"
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:layout_marginTop="20dp"
                android:background="#e6eaf0"
                app:layout_constraintEnd_toEndOf="@id/iv_ticket_arrow"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tv_passenger_location" />

            <TextView
                android:id="@+id/tv_ride_time"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="12dp"
                android:layout_marginTop="20dp"
                android:fontFamily="sans-serif-medium"
                android:hint="请选择喜欢的坚果"
                android:textColor="#292929"
                android:textColorHint="#80646B7F"
                android:textSize="17sp"
                app:layout_constraintEnd_toStartOf="@+id/iv_ride_time_arrow"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/divider_passenger_location" />

            <ImageView
                android:id="@+id/iv_ride_time_arrow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="20dp"
                android:src="@drawable/ic_arrow_grey_right"
                app:layout_constraintBottom_toBottomOf="@+id/tv_ride_time"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="@+id/tv_ride_time" />

            <Button
                android:id="@+id/button_reserve"
                android:layout_width="0dp"
                android:layout_height="46dp"
                android:layout_marginStart="30dp"
                android:layout_marginTop="20dp"
                android:layout_marginEnd="30dp"
                android:layout_marginBottom="24dp"
                android:background="@drawable/shape_corner_blue"
                android:text="确认"
                android:textColor="#80FFFFFF"
                android:textSize="17dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tv_ride_time" />

            <androidx.constraintlayout.widget.Group
                android:id="@+id/group_ride_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone"
                app:constraint_referenced_ids="tv_ride_time,iv_ride_time_arrow"
                tools:visibility="visible" />

            <androidx.constraintlayout.widget.Group
                android:id="@+id/group_passenger_location"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:constraint_referenced_ids="tv_passenger_location,iv_passenger_location_arrow"
                tools:visibility="visible" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </LinearLayout>


</RelativeLayout>

在布局文件里加上android:animateLayoutChanges="true"即可实现上面的动画效果

package com.example.animationdemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import kotlinx.android.synthetic.main.activity_main.*
import org.jetbrains.anko.backgroundResource
import org.jetbrains.anko.textColorResource

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        tv_tab_drop_off.setOnClickListener {
            typeDropOff()
        }

        tv_tab_pick_up.setOnClickListener {
            typePickUp()
        }
    }

    private fun typeDropOff() {
        cl_tab.backgroundResource = R.drawable.bg_itinerary_tab_left_background
        tv_tab_drop_off.textColorResource = R.color.text_color_primary
        indicator_drop_off.visibility = View.VISIBLE
        tv_tab_pick_up.textColorResource = R.color.colorAccent
        indicator_pick_up.visibility = View.INVISIBLE
        tv_ticket_code.hint = "请选择你喜欢的水果"
        tv_ticket_code.text = ""
        tv_flight_hint.visibility= View.GONE
        tv_ticket_info.visibility = View.GONE
        tv_passenger_location.hint = "请输入您的手机号"
        tv_passenger_location.text = ""
        tv_ride_time.text =""
        group_ride_time.visibility = View.VISIBLE
        button_reserve.isEnabled = false
        button_reserve.textColorResource = R.color.half_white
    }

    private fun typePickUp() {
        cl_tab.backgroundResource = R.drawable.bg_itinerary_tab_right_background
        tv_tab_drop_off.textColorResource = R.color.colorAccent
        indicator_drop_off.visibility = View.INVISIBLE
        tv_tab_pick_up.textColorResource = R.color.text_color_primary
        indicator_pick_up.visibility = View.VISIBLE
        tv_ticket_code.hint = "请选择你喜欢的水果"
        tv_ticket_code.text = ""
        tv_ticket_info.visibility = View.GONE
        tv_flight_hint.visibility= View.VISIBLE
        tv_passenger_location.hint = "请选择你喜欢的护肤品"
        tv_passenger_location.text = ""
        tv_ride_time.text = ""
        group_ride_time.visibility = View.GONE
        button_reserve.isEnabled = false
        button_reserve.textColorResource = R.color.half_white
    }
}

源码地址：https://download.csdn.net/download/jingerlovexiaojie/18544209

程序员老林
关注
专栏目录
Android学习之界面篇（五）animateLayoutChanges
wangxin1248的博客
04-04 2193
在API 11之后，Android为了支持ViewGroup类控件，在添加和移除其中控件时自动添加动画，为我们提供了一个非常简单的属性：android:animateLayoutChanges=[true/false],所有派生自ViewGroup的控件都具有此属性，只要在XML中添加上这个属性，就能实现添加/删除其中控件时，带有默认动画了。 效果如下所示：
Kotlin如何直接使用控件ID原理详析
08-26
在上面的示例代码中，我们可以看到，MainActivity 中使用了 kotlinx.android.synthetic.main.activity_main.* 来import 布局文件中的控件对象。然后，在 onCreate() 方法中，我们可以直接使用控件 ID textview 来...
博客《Animation动画详解(十二)——animateLayoutChanges与LayoutTransition》对应源码
03-26
博客《Animation动画详解(十二)——animateLayoutChanges与LayoutTransition》所对应源码，博客地址：http://blog.csdn.net/harvic880925/article/details/50985596
自定义控件三部曲之动画篇(十二)——animateLayoutChanges与LayoutTransition
启舰
03-26 2万+
前言：生活不只眼前的苟且，还有诗和远方的田野 相关文章： 《Android自定义控件三部曲文章索引》:http://blog.csdn.net/harvic880925/article/details/50995268 前篇给大家讲了LayoutAnimation的知识，LayoutAnimation虽能实现ViewGroup的进入动画，但只能在创建时有效。在创建后，再往里...
Animating Layout Changes(以动画的形式改变布局)
a5597942的专栏
08-18 539
原文地址：https://developer.android.com/training/animation/layout.html 布局动画是预加载动画，每次 改变布局时候，系统就会运行这些动画。你所要做的就是告诉Android系统，你想要以动画形式来进行布局改变，然后系统就会自动的加上动画效果。 Tip: 如果你想自定义这些动画效果，你要创建LayoutTransition对象而且布局的时候
Android布局动画之animateLayoutChanges与LayoutTransition
热门推荐
zejian的博客
09-18 3万+
Android的布局动画 你所应该了解的一切   关于布局动画是针对ViewGroup而言的，意指ViewGroup在增加子View或者删除子View时其子View的过渡动画，在android官网有这么一个简单的例子，其效果如下，接下来我们就通过这个例子来入门 ![](http://img.blog.csdn.net/20160916212650776 ) 最简单的布局动画实现
Android-实现在Kotlin中更方便使用canvas
08-13
在Android开发中，Canvas是用于在屏幕上绘制2D图形的核心组件。Kotlin作为一种现代、简洁的编程语言，已经成为Android开发...在项目"Kanvas-master"中，你可能找到更多关于如何在Kotlin中优化Canvas使用的示例和实践。
Android在Kotlin中更好地使用LitePal
01-05
自从LitePal在2.0.0版本中全面支持了Kotlin之后，我也一直在思考如何让LitePal更好地融入和适配Kotlin语言，而不仅仅停留在简单的支持层面。 Kotlin确实是一门非常出色的语言，里面有许多优秀的特性是在Java中无法...
在Kotlin开发中如何使用集合详解
01-04
所以，下面就让我们来看一下怎样在 Kotlin 中使用集合吧。 Kotlin中的集合是基于 Java 集合的框架。本篇文章主要讲的是 kotlin.collections 包中的几个特性。 数据处理 Kotlin 中有一个拓展函数的特性，这个特性...
kotlin官方中文文档
04-09
文档中详细介绍了Kotlin的各个新特性，包括1.5.30及后续版本的更新内容。 Kotlin的基础部分包含了基本语法、习惯用法和编码规范。在语法方面，Kotlin支持空安全，提供了类型系统，包括基本类型、类型检测与转换，...
android动画--animateLayoutChanges与LayoutTransition
superbigcupid的专栏
08-10 537
原文地址：http://blog.csdn.net/harvic880925/article/details/50985596#t3上一篇给大家讲了LayoutAnimation的知识，LayoutAnimation虽能实现ViewGroup的进入动画，但只能在创建时有效。在创建后，再往里添加控件就不会再有动画。在API 11后，又添加了两个能实现在创建后添加控件仍能应用动画的方法，分别是andro
ViewGroup之android:animateLayoutChanges属性
true100的专栏
05-03 1525
/** * 该Demo了在XML中使用 * android:animateLayoutChanges属性，android:animateLayoutChanges=true * /false,所有派ViewGroup的子控件都具有此属性，能实现添加/删除其中控件时，带有默认动画了。 * * @description： * @author ldm * @date 2016-5-3 下午
android动画之布局动画,Android布局动画之animateLayoutChanges与LayoutTransition
weixin_29759387的博客
05-25 1001
关于布局动画是针对ViewGroup而言的，意指ViewGroup在增加子View或者删除子View时其子View的过渡动画，在Android官网有这么一个简单的例子，其效果如下，接下来我们就通过这个例子来入门最简单的布局动画实现事实上，实现上面ViewGroup的布局动画非常简单，我们只要给子View所在的ViewGroup的xml中添加下面的属性即可：android:animateLayout...
自定义控件动画篇（八）animateLayoutChanges与LayoutTransition的使用
最新发布
VitorLiu的博客
07-04 707
为了使用自定义动画，你需要创建实现Animator接口的类。例如，一个简单的淡入动画可以这样实现：Java// 开始时透明// 动画到完全不透明6 }7}类似地，你可以为其他动画类型创建相应的实现类。通过上述方法，你可以利用和来增强用户界面的视觉效果，使布局变化更加平滑和吸引人。
Kotlin实现propertyAnimator
yuanjw2014的专栏
07-07 652
项目要用到一个动画效果，正好最近在看kotlin相关的东西，用kotlin做了个Demoimport android.animation.ObjectAnimator import android.support.v7.app.AppCompatActivity import android.os.Bundle import kotlinx.android.synthetic.main.activi
布局动画 属性初始 android:animateLayoutChanges
小炫风技术旅行
08-16 2723
容器控件  android默认没有开启子控件变化的动画，也就是说animateLayoutChanges=false, animateLayoutChanges 属性 强调 必须api>=11 但是我测试了 在API=8上面没有报错，只是没有效果而已 android:animateLayoutChanges="true" 表示开启系统的布局动画 实例:xml <LinearLayou
Android 动画 Kotlin 教程
kmyhy的专栏
01-22 2562
原文：Android Animation Tutorial with Kotlin 作者：Lisa Luo 译者：kmyhy 更新说明：本教程由 Lisa Luo 更新至 Kotlin 和 Android Studio 3.0。原教程作者是 Artem Kholodnyi。 假若没有那些有趣的、漂亮的动画元素，很难想象手机的使用体验会是什么样子。这些动画不仅仅在整个 app 中
Android 属性动画（五）为 ViewGroup 布局更改添加动画效果
yingaizhu的博客
11-10 1449
    属性动画系统不但能轻松为视图对象本身添加动画效果，而且提供了对 ViewGroup 布局的更改添加动画效果的功能。     可使用 LayoutTransition 类为ViewGroup 内的布局更改添加动画效果。当向 ViewGroup 中添加或删除视图时，或者使用 setVisibility() 方法改变视图的可见性（VISIBLE、INVISIBLE 或 GONE）时，这些视图会经历出现和消失动画，或者以动画的形
Android一个简单带动画的展开收起功能
zhang106209的博客
09-28 1351
在Android上，布局的显示和隐藏往往很生硬，给人体验不好，本文使用 android:animateLayoutChanges属性，使得体验效果瞬间提升一个档次。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值