web-dev-qa-db-ja.com

ジェットパックナビゲーションを使用した下部ナビゲーションセットアップへのカスタム遷移アニメーションの追加

Jetpackコンポーネントを使用するアプリに取り組んでいます。 guide で説明されているように、下部のナビゲーションを3つのフラグメントでつなぎました。ただし、対応するナビゲーションボタンを押してフラグメントを切り替えるときに、遷移アニメーションを変更する方法がわかりません。

私の知る限り、トランジションを作成するには2つの方法があります。

  • これらをnavigate()のオプションとして渡すと、この場合は明示的に呼び出されません。
  • アニメーション属性を持つアクションを使用するが、これらのアクションを使用するようにナビゲーションに指示する方法がわからない。多分それに特定のIDを与えることはうまくいくでしょうか?

では、BottomNavigation.setupWithNavController(navController)の使用をあきらめることなく、カスタムトランジションアニメーションを設定するにはどうすればよいですか。

12
aksh1618

R.anim.nav_default_ [Enter/Exit/PopEnter/PopExit]アニメーションファイルのバージョンを作成し、それらをアニメーションリソースディレクトリに配置することで、この動作を実現できると思います。その場合、コンポーネントはこれらのファイルをデフォルトのアニメーションに使用します。それはそのように機能するべきではないように感じますが、現時点では機能します。

1
Garry McKee

できないと思いますが、解決策に興味があります。

これが役立つ場合の回避策は次のとおりです。

下部のナビゲーションをナビゲーションコントローラーに接続しないでください(ガイドに示されていることを実行しないでください)。ハンドラーを次のように設定して、遷移を自分で管理します。

    bottomNav!!.setOnNavigationItemSelectedListener { item ->
        selectFragment(item)
        false
    }

次に、各フラグメント間の遷移を作成し、ハンドラーで自分で管理します。以下は3の例です。

private fun selectFragment(item: MenuItem) {
    if (selectedItem == -1)
        navController.navigate(item.itemId)
    else
        navController.navigate(
                when (item.itemId) {
                    R.id.interviewsFragment ->
                        if (selectedItem == R.id.personsFragment)
                            R.id.action_personsFragment_to_interviewsFragment
                        else
                            R.id.action_questionListsFragment_to_interviewsFragment
                    R.id.personsFragment ->
                        if (selectedItem == R.id.interviewsFragment)
                            R.id.action_interviewsFragment_to_personsFragment
                        else
                            R.id.action_questionListsFragment_to_personsFragment
                    R.id.questionListsFragment ->
                        if (selectedItem == R.id.interviewsFragment)
                            R.id.action_interviewsFragment_to_questionListsFragment
                        else
                            R.id.action_personsFragment_to_questionListsFragment
                    else -> item.itemId
                })

    selectedItem = item.itemId


    // uncheck the other items.
    for (i in 0 until bottomNav!!.menu.size()) {
        val menuItem = bottomNav!!.menu.getItem(i)
        if (menuItem.itemId == item.itemId) menuItem.isChecked = true
    }
}

ナビゲーションマップでアニメーションを定義します。これは3つのフラグメントの例であり、アニメーションは選択されたアイテムに向かって移動するため、自然に感じられます。

<fragment
    Android:id="@+id/interviewsFragment"
    Android:name="com.unludo.interview.interview.list.InterviewsFragment"
    Android:label="InterviewsFragment" >
    <action
        Android:id="@+id/action_interviewsFragment_to_personsFragment"
        app:destination="@id/personsFragment"
        app:enterAnim="@anim/enter_from_right"
        app:exitAnim="@anim/exit_to_left" />
    <action
        Android:id="@+id/action_interviewsFragment_to_questionListsFragment"
        app:destination="@id/questionListsFragment"
        app:enterAnim="@anim/enter_from_right"
        app:exitAnim="@anim/exit_to_left" />
</fragment>
<fragment
    Android:id="@+id/personsFragment"
    Android:name="com.unludo.interview.persons.list.PersonsFragment"
    Android:label="PersonsFragment" >
    <action
        Android:id="@+id/action_personsFragment_to_interviewsFragment"
        app:destination="@id/interviewsFragment"
        app:enterAnim="@anim/enter_from_left"
        app:exitAnim="@anim/exit_to_right" />
    <action
        Android:id="@+id/action_personsFragment_to_questionListsFragment"
        app:destination="@id/questionListsFragment"
        app:enterAnim="@anim/enter_from_right"
        app:exitAnim="@anim/exit_to_left" />
</fragment>
<fragment
    Android:id="@+id/questionListsFragment"
    Android:name="com.unludo.interview.questions.lists.QuestionListsFragment"
    Android:label="QuestionListsFragment" >
    <action
        Android:id="@+id/action_questionListsFragment_to_personsFragment"
        app:destination="@id/personsFragment"
        app:enterAnim="@anim/enter_from_left"
        app:exitAnim="@anim/exit_to_right" />
    <action
        Android:id="@+id/action_questionListsFragment_to_interviewsFragment"
        app:destination="@id/interviewsFragment"
        app:enterAnim="@anim/enter_from_left"
        app:exitAnim="@anim/exit_to_right" />
</fragment>

この動作はコンポーネント自体で管理できると思いますが、今のところ、手動​​で管理する必要があると思います。

乾杯:)

1
unludo