Представление фрагмента поверх фрагмента с прозрачным фоном

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)
        }
    }

}

Редактирование награды:

Я хочу показать фрагмент поверх Фрагментt на графике навигации, как видно на изображении Эйфелевой башни. В iOS это будет похоже на презентацию: на весь экран. Я не хочу использовать DialogFragment, так как у меня гораздо больше контроля над анимацией представлений в обычном фрагменте.

Answer 1

Вы пытаетесь добавить модальное диалоговое окно к графику навигации в качестве обычного пункта назначения. NavController всегда будет показывать только один пункт назначения за раз, и они не будут сложены. Фрагмент удаляется из вида, когда NavController показывает другой. Он не предназначен для функционирования так, как вы хотите.

Вам необходимо создать 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 с помощью анимации окна и пользовательского стиля, см. этот ответ .

Для более сложных видов, требующих жизненного цикла, следует использовать DialogFragment (например, при отображении карты в диалоговом окне). Начиная с навигации 2.1.0-alpha03 <dialog> пункты назначения поддерживаются. Это все еще в альфа / бета-версии.

Edit:

Если вы хотите очень точный контроль над анимацией, вы можете добавить вид к вашему макету следующим образом:

<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>

Поскольку элемент находится после хоста nav в макете, он будет отображаться поверх него. Помните, что кнопки или другие элементы, имеющие набор свойств elevation, могут отображаться поверх него.

Наконец, перезаписать свой 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.

Вы также можете использовать новое действие с прозрачным фоном для диалога и отключить анимацию для этого действия, чтобы вы могли вручную анимировать представления в действии. Деятельность может быть прозрачной на 100%.