将 XML ShimmerFrameLayout 转换为 Composable 函数答案

【问题标题】：Convert XML ShimmerFrameLayout into Composable function将 XML ShimmerFrameLayout 转换为 Composable 函数
【发布时间】：2021-05-03 15:28:01
【问题描述】：

我是 android jetpack compose 的新手我想为 Android 实现 微光效果。根据给定的in this documentation

使用 xml 方法可以正常工作，但我想对 compose 函数 做同样的事情（简而言之，将 XML 嵌入到可组合函数中）。

这里是 XML 代码：shimmer_view.xml

<com.facebook.shimmer.ShimmerFrameLayout 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"
    tools:context=".presentation.ui.recipe_list.UserListFragment"
    android:id="@+id/shimmerFrameLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:shimmer_auto_start="true"
    >
    <include layout="@layout/shimmer_placeholder_card" />
</com.facebook.shimmer.ShimmerFrameLayout>

我想在上面的 xml 文件中使用的片段

class UserListFragment: Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
//        Traditional Approach Working Fine.

//        val view = inflater.inflate(R.layout.shimmer_view, container, false)
//        return view



//       ComposeView inside fragment

        val composeView = ComposeView(requireContext()).apply {
            setContent {
                Text(text = "Welcome in  Compose-World ")

//                Here i want To use xml file as a Compose View
            }
        }
        return  composeView
    }
}

是否可以将 shimmer_view.xml 膨胀或转换为可组合函数？

或

以某种方式将此 xml 嵌入到 compose 函数中。

如果有的话，请分享示例代码以供参考。它会帮助我们。

谢谢

【问题讨论】：

标签： android xml android-jetpack-compose

【解决方案1】：

我创建了这个函数来帮助我将 XML 布局扩展为可组合实例：

@Composable
fun createAndroidViewForXMLLayout(@LayoutRes resId: Int) {
    val context = LocalContext.current
    val your_xml_Layout = remember(resId, context) {
    LayoutInflater.from(context).inflate(resId,null)
    }
AndroidView({ your_xml_Layout })
}

在你的情况下，你只需要像这里一样调用这个函数：

class UserListFragment: Fragment() {

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View {

    val composeView = ComposeView(requireContext()).apply {
        setContent {
            Text(text = "Welcome in  Compose-World ")
            // Here you add the function with the id of your layout **"R.layout.shimmer_view"**
            createAndroidViewForXMLLayout(R.layout.shimmer_view)
        }
    }
    return  composeView
}
}

【讨论】：

【解决方案2】：

这是一个可组合项，可在另一个可组合项中为您提供微光效果：

@Composable
fun Shimmer(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
    val context = LocalContext.current
    val shimmer = remember {
        ShimmerFrameLayout(context).apply {
            addView(ComposeView(context).apply {
                setContent(content)
            })
        }
    }

    AndroidView(
        modifier = modifier,
        factory = { shimmer }
    ) { it.startShimmer() }
}

并将其用作：

Shimmer {
    // Your placeholder
    Box(modifier = Modifier.size(100.dp).background(Color.LightGray))
}

【讨论】：