把Fragment变成Composable的踩坑

把Fragment变成Composable的踩坑

Why

在编写Compose时候如果遇到需要加载其他Fragment就比较麻烦，而且很多时候这种Fragment还是xml或者第三方SDK提供的。下面提供一些解决方案。

Option 1

google也意识到这个问题，所以提供了AndroidViewBinding，可以把Fragment通过包装成AndroidView，就可以在Composable中随意使用了。AndroidViewBinding在组合项退出组合时会移除 fragment。

官方文档：Compose 中的 fragment

//源码
@Composable
fun <T : ViewBinding> AndroidViewBinding(
    factory: (inflater: LayoutInflater, parent: ViewGroup, attachToParent: Boolean) -> T,
    modifier: Modifier = Modifier,
    update: T.() -> Unit = {} //view inflate 完成时候回调
) { ...

• 首先需要添加ui-viewbinding依赖，并且开启viewBinding。

// gradle
buildFeatures {
    ...
    viewBinding true
}
...
implementation("androidx.compose.ui:ui-viewbinding")

• 创建xml布局，在android:name="MyFragment"添加Fragment的名字和包名路径

<androidx.fragment.app.FragmentContainerView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/fragment_container_view"
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:name="com.example.MyFragment" />

• 在Composable函数中如下调用，如果您需要在同一布局中使用多个 fragment，请确保您已为每个 FragmentContainerView 定义唯一 ID。

@Composable
fun FragmentInComposeExample() {
    AndroidViewBinding(MyFragmentLayoutBinding::inflate) {
        val myFragment = fragmentContainerView.getFragment<MyFragment>()
        // ...
    }
}

这种方式默认支持空构造函数的Fragment，如果是带有参数或者需要arguments传递数据的，需要改造成调用方法传递或者callbak方式，官方建议使用FragmentFactory。

class MyFragmentFactory extends FragmentFactory {
   @NonNull
   @Override
   public Fragment instantiate(@NonNull ClassLoader classLoader, @NonNull String className) {
       Class extends Fragment> clazz = loadFragmentClass(classLoader, className);
       if (clazz == MainFragment.class) {
       //这次处理传递参数
          return new MainFragment(anyArg1, anyArg2);
       } else {
           return super.instantiate(classLoader, className);
       }
   }
}

//使用
getSupportFragmentManager().setFragmentFactory(fragmentFactory)

请参考此文： FragmentFactory ：功能详解&使用场景

Option 2

如果我们可以new Fragment或者有fragment实例，如何加载到Composable中呢。

思路：fragmentManager把framgnt add之后，fragment自己getView，然后包装成AndroidView即可。修改下AndroidViewBinding源码就可以得到如下代码：

@Composable
fun FragmentComposable(
    fragment: Fragment,
    modifier: Modifier = Modifier,
    update: (Fragment) -> Unit = {}
) {
    val fragmentTag = remember { mutableStateOf(fragment.javaClass.name) }
    val localContext = LocalContext.current
    
    AndroidView(
        modifier = modifier,
        factory = { context ->
            require(!fragment.isAdded) { "fragment must not attach to any host" }
            (localContext as? FragmentActivity)?.supportFragmentManager
                ?.beginTransaction()
                ?.setReorderingAllowed(true)
                ?.add(fragment, fragmentTag.value)
                ?.commitNowAllowingStateLoss()
            fragment.requireView()
        },
        update = { update(fragment) }
    )

    DisposableEffect(localContext) {
        val fragmentManager = (localContext as? FragmentActivity)?.supportFragmentManager
        val existingFragment = fragmentManager?.findFragmentByTag(fragmentTag.value)
        onDispose {
            if (existingFragment != null && !fragmentManager.isStateSaved) {
                // If the state isn't saved, that means that some state change
                // has removed this Composable from the hierarchy
                fragmentManager
                    .beginTransaction()
                    .remove(existingFragment)
                    .commitAllowingStateLoss()
            }
        }
    }
}

Issue Note

其实里面有个巨坑。如果你的Fragment中还通过fragmentManager进行了navigation的实现，你会发现你的其他Fragment生命周期会异常，返回了却onDestoryView，onDestory不回调。

• 方案1中 官方建议把所有的子Fragment通过childFragmentManager来加载，这样子Fragment依赖与父对象，当父亲被回退出去后，子类Fragment全部自动销毁了，会正常被childFragmentManager处理生命周期。

• 方案1中 Fragment嵌套需要用FragmentContainerView来包装持有。下面是源码解析，只保留了核心处理的地方

@Composable
fun <T : ViewBinding> AndroidViewBinding(
    factory: (inflater: LayoutInflater, parent: ViewGroup, attachToParent: Boolean) -> T,
    modifier: Modifier = Modifier,
    update: T.() -> Unit = {}
) {
    // fragmentContainerView的集合
    val fragmentContainerViews = remember { mutableStateListOf<FragmentContainerView>() }
    val viewBlock: (Context) -> View = remember(localView) {
        { context ->
            ...
            val viewBinding = ...
            fragmentContainerViews.clear()
            val rootGroup = viewBinding.root as? ViewGroup
            if (rootGroup != null) {
            //递归找到 并且加入集合
                findFragmentContainerViews(rootGroup, fragmentContainerViews)
            }
            viewBinding.root
        }
    }
    
    ...
    //遍历所有找到View每个都注册一个 DisposableEffect用来处理销毁
    fragmentContainerViews.fastForEach { container ->
        DisposableEffect(localContext, container) {
            // Find the right FragmentManager
            val fragmentManager = parentFragment?.childFragmentManager
                ?: (localContext as? FragmentActivity)?.supportFragmentManager
            // Now find the fragment inflated via the FragmentContainerView
            val existingFragment = fragmentManager?.findFragmentById(container.id)
            onDispose {
                if (existingFragment != null && !fragmentManager.isStateSaved) {
                    // If the state isn't saved, that means that some state change
                    // has removed this Composable from the hierarchy
                    fragmentManager.commit {
                        remove(existingFragment)
                    }
                }
            }
        }
    }
}

思考和完善

很多时候我们的业务很复杂改动Fragment的导航方式成本很高，如何无缝兼容呢。于是有了如下思考

• 监听Fragment的出入堆栈，在Composable销毁时候处理所有堆栈中的fragment
• 子Fragment是通过childFragmentManager处理不需要而外处理，只需要管理parentFragment
• 实际操作中parentFragmentManager实现的导航，中间会发生popback，如何防止出栈的Fragment出现内存泄露问题
• 实际操作中 fragmentManager.beginTransaction().remove(existingFragment)只会执行fragment的onDestoryView方法，onDestory不触发，原来是用了addToBackStack

最终实现如下

import android.widget.FrameLayout
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.viewinterop.AndroidView
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentOnAttachListener
import androidx.fragment.app.findFragment
import java.lang.ref.WeakReference

/**
 * Make fragment as Composable by AndroidView
 *
 * @param fragment fragment
 * @param fm add fragment by FragmentManager, can be childFragmentManager
 * @param update The callback to be invoked after the layout is inflated.
 */
@Composable
fun <T : Fragment> FragmentComposable(
    modifier: Modifier = Modifier,
    fragment: T,
    update: (T) -> Unit = {}
) {
    val localView = LocalView.current
    // Find the parent fragment, if one exists. This will let us ensure that
    // fragments inflated via a FragmentContainerView are properly nested
    // (which, in turn, allows the fragments to properly save/restore their state)
    val parentFragment = remember(localView) {
        try {
            localView.findFragment<Fragment>().takeIf { it.isAdded }
        } catch (e: IllegalStateException) {
            // findFragment throws if no parent fragment is found
            null
        }
    }

    val fragments = remember { mutableListOf<WeakReference<Fragment>>() }

    val attachListener = remember {
        FragmentOnAttachListener { _, fragment ->
            Log.d("FragmentComposable", "fragment: $fragment")
            fragments += WeakReference(fragment)
        }
    }

    val localContext = LocalContext.current

    DisposableEffect(localContext) {
        val fragmentManager = parentFragment?.childFragmentManager
            ?: (localContext as? FragmentActivity)?.supportFragmentManager
        fragmentManager?.addFragmentOnAttachListener(attachListener)

        onDispose {
            fragmentManager?.removeFragmentOnAttachListener(attachListener)
            if (fragmentManager?.isStateSaved == false) {
                fragmentManager.popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE)
                fragments
                    .filter { it.get()?.isRemoving == false }
                    .reversed()
                    .forEach { existingFragment ->
                        Log.d("FragmentComposable", "remove:${existingFragment.get()}")
                        fragmentManager
                            .beginTransaction()
                            .remove(existingFragment.get()!!)
                            .commitAllowingStateLoss()
                    }
            }
        }
    }

    AndroidView(
        modifier = modifier,
        factory = { context ->
            FrameLayout(context).apply {
                id = System.currentTimeMillis().toInt()
                require(!fragment.isAdded) { "$fragment must not attach to any host" }
                val fragmentManager = parentFragment?.childFragmentManager
                    ?: (localContext as? FragmentActivity)?.supportFragmentManager
                fragmentManager
                    ?.beginTransaction()
                    ?.setReorderingAllowed(true)
                    ?.replace(this.id, fragment, fragment.javaClass.name)
                    ?.commitAllowingStateLoss()
                fragments.clear()
            }
        },
        update = { update(fragment) }
    )
}