引言

本篇将介绍我最近在对 Android 项目进行功能开发时，对展开 View的一些笔记分享。

在日常项目开发中，通常会使用到如展开列表样式的布局实现，通常适用于用户个人页介绍用户信息或其他使用场景。

在阅读本文前，你需要了解：Android 简单过渡动画 AutoTransition()，Android Developer 中对于 AutoTransition的介绍如下：

Utility class for creating a default transition that automatically fades, moves, and resizes views during a scene change.

An AutoTransition can be described in a resource file by using the tag autoTransition, along with the other standard attributes of R.styleable.Transition.

本篇将介绍并实现如下展开效果：

---

Layout 准备

<?xml version="1.0" encoding="utf-8"?>
<!-- 外层mainView -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".ui.MainActivity">

    <LinearLayout
        android:id="@+id/topView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#CC000000"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:layout_width="96dp"
            android:layout_height="96dp"
            android:src="@mipmap/ic_launcher_round" />

        <!-- 展开 Button -->
        <Button
            android:id="@+id/expandButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="Expand" />

    </LinearLayout>

    <!-- 待隐藏的 hiddenView -->
    <View
        android:id="@+id/hiddenView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#82B1FF"
        android:orientation="horizontal"
        android:visibility="gone" />

</LinearLayout>

---

核心代码

// mainView：外层父布局，即：隐藏 View 的父布局；
// hiddenView：准备设置可见性的 View；
// function：可见性修改时，回调函数给外层进行额外操作，如：监听可见性动态切换按钮的 Icon，该函数可加可不加，根据实际情况添加即可。
fun expandView(
    mainView: ViewGroup,
    hiddenView: View,
    function: (isVisible: Boolean) -> Unit = {}
) {
    // 如果 View 已展开，则将其可见性修改为 GONE，在该方法里也可对切换展开按钮的 Icon 进行修改。
    if (hiddenView.visibility == View.VISIBLE) {
        function.invoke(hiddenView.isVisible)
        // 在将待隐藏 View 隐藏前，使用 AutoTransition() 简单过渡动画进行修饰，在动画结束后将 View 进行隐藏
        TransitionManager.beginDelayedTransition(mainView, AutoTransition())
        hiddenView.visibility = View.GONE
    }
    // 反之修改 View 可见性为 VISIBLE。
    else {
        function.invoke(hiddenView.isVisible)
        TransitionManager.beginDelayedTransition(mainView, AutoTransition())
        hiddenView.visibility = View.VISIBLE
    }
}

---

使用

binding.expandButton.setOnClickListener {
    UiUtil.expandView(
        mainView = binding.mainView,
        hiddenView = binding.hiddenView,
    ) {
        Log.d("TAG", "visible: $it")
    }
}

---