如何用Kotlin实现将一个Fragment叠加在另一Fragment上层并设置半透明背景

前提准备 #

首先确认你的两个Fragment均已正常实现：底层为BottomFragment、上层叠加层为OverlayFragment，宿主Activity采用FrameLayout作为Fragment承载容器（FrameLayout默认按添加顺序层级叠加，最符合该需求）。

步骤1：为上层Fragment设置半透明背景 #

在上层Fragment的布局文件（例如fragment_overlay.xml）的根节点设置半透明背景，背景色采用ARGB格式：前两位为透明度（00=完全透明，FF=完全不透明），后六位为色值。示例如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    <!-- 80%透明度的黑色背景，可自行调整透明度数值 -->
    android:background="#CC000000"
    android:orientation="vertical"
    android:gravity="center">

    <!-- 此处放置上层Fragment的业务内容，例如按钮、文本等 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="上层Fragment内容"
        android:textColor="@color/white"
        android:textSize="24sp"/>

</LinearLayout>

如果上层不需要铺满全屏，可将根布局背景设为全透明，仅给内容区域设置半透明背景即可。

步骤2：配置宿主Activity布局 #

宿主Activity的根布局使用FrameLayout作为Fragment容器，示例activity_main.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

步骤3：Kotlin代码实现Fragment叠加 #

注意叠加时使用add方法而非replace，replace会移除容器内已存在的Fragment，无法实现叠加效果。

宿主Activity代码示例 #

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

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

        // 页面初始化时先添加底层Fragment
        if (savedInstanceState == null) {
            supportFragmentManager.beginTransaction()
                .add(R.id.fragment_container, BottomFragment())
                .commit()
        }

        // 按需触发上层Fragment展示，例如点击按钮时调用该方法
        showOverlayFragment()
    }

    private fun showOverlayFragment() {
        val overlayFragment = OverlayFragment()
        supportFragmentManager.beginTransaction()
            // 直接add到同一容器，会自动叠加在已有的Fragment上层
            .add(R.id.fragment_container, overlayFragment)
            // 可选：加入返回栈，点击物理返回键可关闭上层Fragment回到底层页面
            .addToBackStack(null)
            .commit()
    }
}

上层Fragment基础代码示例 #

class OverlayFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_overlay, container, false)
    }
}

底层Fragment按常规Fragment实现即可，无需额外修改。

注意事项 #

• 半透明背景的透明度可按需调整，ARGB首位透明度取值范围为00~FF，数值越大透明度越低
• 如果使用Navigation组件实现Fragment跳转，可给上层Fragment的 destination 配置enterAnim、exitAnim等过渡动画，同时设置背景半透明即可实现相同效果
• 若上层Fragment存在EditText等输入控件，无需额外配置软键盘适配，和普通Fragment逻辑一致

内容的提问来源于stack exchange，提问作者Aydev