web-dev-qa-db-ja.com

ナビゲーションアーキテクチャコンポーネント-CollapsingToolbarを使用した詳細ビュー

新しいナビゲーションコンポーネントの提案されたプラクティスは、I/Oで次のテンプレートと提案された哲学とともに提示されました。

  1. アプリの1つのアクティビティ
  2. アクティビティにはツールバーと下部ナビゲーションバーが含まれています

典型的なアプリには、多くの場合、CollapsingToolbarを含む詳細ビューがあります。そのアーキテクチャの下でそれをどのように構築しますか？

  • ツールバーを各フラグメントXMLに移動しますか？
  • 折りたたみツールバーをプログラムで実装しますか？
  • 詳細フラグメントを独自のアクティビティに移動し（とにかく独自のディープリンクを使用する場合があります）、哲学を「破る」？
androidandroid-architecture-componentsandroid-jetpackandroid-architecture-navigation
29
Julian

典型的なアプリには、多くの場合、CollapsingToolbarを含む詳細ビューがあります。そのアーキテクチャの下でそれをどのように構築しますか？

すばらしい質問です。私もこれに少し苦労し、NavHostFragmentを持つアクティビティが1つ、理想的には他に何もないはずであるという結論に達しました。これにより、各画面に必要なすべてを表示する（または表示しない）ための究極の柔軟性が得られます。重要なのは、テーマがActionBarを削除することを確認してください。

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

次の質問につながります...

ツールバーを各フラグメントXMLに移動しますか？

私の意見では、うん！通常ActionBarを使用するすべてのことは、ツールバーを介して行うことができます。これは、ツールバーを使用して、過去にActionBarを使用した最も重要なこと（上方向のナビゲーション、タイトル、オプションメニューなど）を実行する方法を示す簡単なスニペットです。

toolbar.apply {
    setNavigationOnClickListener { findNavController().navigateUp() }
    setTitle(R.string.toolbar_title)
    inflateMenu(R.menu.fragment_menu)
    setOnMenuItemClickListener(::onMenuItemClick)
}

折りたたみツールバーをプログラムで実装しますか？

それはまさにあなたが何をしようとしているのかに依存しますが、ほとんどの場合、その必要はありません。 AppBarLayout、CollapsingToolbarLayout、およびToolbarをレイアウトにドロップして、通常と同じように使用できます。 AppBarLayoutにActionBarテーマオーバーレイを提供します。次に例を示します。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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/coordinatorLayout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <com.google.Android.material.appbar.AppBarLayout
        Android:id="@+id/appBarLayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">

        <com.google.Android.material.appbar.CollapsingToolbarLayout
            Android:id="@+id/collapsingToolbarLayout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:contentScrim="@color/primary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <androidx.appcompat.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:navigationIcon="@drawable/ic_up_white"/>

            ...

詳細フラグメントを独自のアクティビティに移動し（とにかく独自のディープリンクを使用する場合があります）、哲学を「破壊」しますか？

上記ではそれは必要ありませんよね？これは、1つのナビゲーショングラフで複数のレベルに簡単に対応できるだけでなく、グラフ内のすべての宛先の外観と動作（ActionBarのような機能を含む）をカスタマイズできる十分に柔軟なアプローチです。

3
mtrewartha

試す

appBarLayout = (AppBarLayout) findViewById(R.id.appbar);


if(expandToolbar){
                appBarLayout.setExpanded(true,true);
            }else{
                appBarLayout.setExpanded(false,true);
            }

これは通常のリンクです 特定のフラグメントに対してCollapsingToolbarLayoutの展開を無効にする

また、toolBarの一部を変更し始めている他のユーザーは、カスタムツールバービューを個別のXMLで記述し、詳細でカスタムビューを膨らませ、フラグメントがある場合は、古いツールバーの未使用の要素を非表示にします。

setSupportActionBar(toolbar);
View logo = getLayoutInflater().inflate(R.layout.view_logo, null);
toolbar.addView(logo);

これが不要なビューを非表示にする方法です

for (int i = 0; i < toolbar.getChildCount(); ++i) {
        View child = toolbar.getChildAt(i);

        // here u can hide all text views for example.
        if (child instanceof TextView) {
            child.setVisibility(View.GONE );
        }
    }

この方法は、2つのアクティビティを作成するよりもはるかに優れています

0
Diaa Saada

我々が持っていると仮定しましょう

  1. アプリの1つのアクティビティ
  2. アクティビティにはツールバーと下部ナビゲーションバーが含まれています

アプリに必要なすべてのツールバーの外観は、その単一のツールバーに実装され、現在アクティブなフラグメントである必要があります。依存関係の逆転の原則に違反しないために、アクティビティのツールバーの機能を必要とするすべてのフラグメントは、インターフェースを実装する必要があります。 OnBackStackChangedListenerを使用して、ビューの更新を確認できます

getFragmentManager().addOnBackStackChangedListener(
    new FragmentManager.OnBackStackChangedListener() {
        @Override
        public void onBackStackChanged() {
            Fragment visibleFragment = ...
            if(visibleFragment instanceof ToolbarControlFragment) {
                if(visibleFragment.shouldExpandToolbar()) {
                    // set AppBarLayout expanded state
                }
                // ...
            }
        }
    }
);

FragmentがOptionsMenuを必要とする場合、その原則を覚えているかもしれません。

私は通常、アクティビティによって制御される1つだけの下部ナビゲーションバーと、フラグメント内のいくつかのツールバーを持つことをお勧めします。これにより、複雑さが軽減され、アプリのコンポーネントがより独立します。

0
styp