在具有透明背景的片段上呈现片段

Question

我正在使用 Jetpack 导航从片段过渡到细节片段。

我需要帮助展示细节片段超过显示它的片段。

查看下面的照片以了解我想要实现的目标：

我还在导航图中的动画中使用基本 fade_in / fade_out 进入退出。

这是我得到的结果：

如何设置过渡以便细节片段显示在呈现视图之上？

这是我的所有进度：

bottom_nav_menu

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
            android:id="@+id/fragment_tab1"
            android:title="Tab 1"/>

    <item
            android:id="@+id/fragment_tab2"
            android:title="Tab 2"/>

    <item
            android:id="@+id/fragment_tab3"
            android:title="Tab 3"/>

</menu>

nav_graph

<navigation 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:id="@+id/nav_graph"
            app:startDestination="@id/fragment_tab1">
    <fragment android:id="@+id/fragment_tab1" android:name="com.example.navgraphfragmentmodal.Tab1" android:label="fragment_tab1"
              tools:layout="@layout/fragment_tab1">
        <action android:id="@+id/toModal" app:destination="@id/modalFragment"/>
    </fragment>
    <fragment android:id="@+id/fragment_tab2" android:name="com.example.navgraphfragmentmodal.Tab2" android:label="fragment_tab2"
              tools:layout="@layout/fragment_tab2"/>
    <fragment android:id="@+id/fragment_tab3" android:name="com.example.navgraphfragmentmodal.Tab3"
              android:label="fragment_tab3" tools:layout="@layout/fragment_tab3"/>
    <fragment android:id="@+id/modalFragment" android:name="com.example.navgraphfragmentmodal.ModalFragment"
              android:label="fragment_modal" tools:layout="@layout/fragment_modal"/>
</navigation>

MainActivity.kt

class MainActivity : AppCompatActivity() {

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

        val navHostFragment = supportFragmentManager.findFragmentById(R.id.navigation_host_fragment) as NavHostFragment?
        NavigationUI.setupWithNavController(bottom_navigation_view, navHostFragment!!.navController)

        supportActionBar?.setDisplayShowHomeEnabled(true)
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        supportActionBar?.setDisplayShowHomeEnabled(false)
        if (item.itemId === android.R.id.home) {
            //Title bar back press triggers onBackPressed()
            onBackPressed()
            return true
        }
        return super.onOptionsItemSelected(item)
    }

    //Both navigation bar back press and title bar back press will trigger this method
    override fun onBackPressed() {
        supportActionBar?.setDisplayShowHomeEnabled(false)
        if (supportFragmentManager.backStackEntryCount > 0) {
            supportFragmentManager.popBackStack()
        } else {
            super.onBackPressed()
        }
    }
}

Tab1 片段（这是带有埃菲尔铁塔图像和按钮的片段）

class Tab1 : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_tab1, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        learnMoreButton.setOnClickListener {
            NavHostFragment.findNavController(this).navigate(R.id.modalFragment)
        }
    }

}

赏金编辑：

我希望在导航图中显示覆盖片段的片段，如埃菲尔铁塔图像所示。 在 iOS 中，这类似于演示文稿：全屏显示。 我 不希望 使用 DialogFragment，因为我到目前为止更好地控制普通片段中的视图动画。

Answer 1

您正在尝试将模态对话框添加到导航图中作为正常目的地。 NavController 将始终一次只显示一个目的地，并且它们不会堆叠。当 NavController 显示另一个片段时，一个片段将从视图中移除。它不会按照您希望的方式运行。

您需要用 UI 创建一个 AlertDialog 或 DialogFragment。在上面显示的情况下，AlertDialog 已经足够了。您可以像这样向 AlertDialog 添加自定义视图：

val dialog = AlertDialog.Builder(context)
    .setView(R.layout.your_layout)
    .show()

dialog.findViewById<View>(R.id.button).setOnClickListener {
   // Do somehting
   dialog.dismiss()
}

这允许您使用自定义视图创建对话框。它会像人们希望的那样工作：单击按钮关闭对话框并按下后退按钮。背景会自动变暗。

该对话框将具有默认形状，但您可以按照答案创建问题中显示的对话框的圆角。

你可以给AlertDialog添加动画window动画和自定义样式，参考this answer。

对于需要生命周期的更复杂的视图，应使用 DialogFragment（例如，在对话框中显示地图时）。从导航 2.1.0-alpha03 <dialog> 开始支持目的地。不过，这仍在 alpha/beta 中。

编辑：

如果你想对动画进行非常精细的控制，你可以像这样向你的布局添加一个视图：

<FrameLayout>

   <!-- Remove the defaultNavHost from this! -->
   <fragment android:id="@+id/navHost" android:name="...NavHost" />

   <FrameLayout android:id="@+id/dialog" android:background="#44000000" android:layout_width="match_parent" android:layout_height="match_parent">

       <FrameLayout android:id="@+id/dialogContent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center">

           <!-- Dialog contents -->

       </FramyLayout>

   </FrameLayout>

</FrameLayout>

因为该项目在布局中位于导航主机之后，所以它将呈现在它之上。请注意，具有 elevation 属性集的按钮或其他元素可能会出现在它的顶部。

最后，在 activity 中覆盖 onBackPressed() 以恢复导航行为：

override fun onBackPressed() {
    val dialog = findViewById<View>(R.id.dialog)
    val navController = (supportFragmentManager.findFragmentById(R.id.navHost) as NavHostFragment).navController
    if (dialog.visibility == View.VISIBLE) {
        hideDialog()
    } else if(navController.popBackStack()) {
        Log.i("MainActivity", "NavController handled back press")
    } else {
        super.onBackPressed()
    }
}

private fun showDialog() {
    findViewById<View>(R.id.dialog).visibility = View.VISIBLE
    // Intro animation
}

private fun hideDialog() {
    // Outro animation. Call the next line after the animation is done.
    findViewById<View>(R.id.dialog).visibility = View.GONE
}

这可能是您正在寻找的，但我不推荐它，而是使用 AlertDialog 或 DialogFragment。

您还可以为对话框使用透明背景的新 Activity 并禁用此 activity 上的动画，以便您可以手动为 activity 中的视图设置动画。活动可以100%透明。

在具有透明背景的片段上呈现片段

Presenting a fragment over a fragment with transparent background

android

android-fragments

android-navigation

android-transitions

android-jetpack