コンテンツ
- ナビゲーションアーキテクチャコンポーネントとは何ですか？
- Android Studioへのナビゲーションエディターの追加
- プロジェクトの依存関係：ナビゲーションフラグメントとナビゲーションUI
- アプリのナビゲーションの視覚的な概要を取得します
- ナビゲーショングラフの入力：目的地の追加
- フラグメントレイアウトの更新
- Fragment_first.xml
- Fragment_second.xml
- Fragment_third.xml
- アクションで目的地を接続する
- ナビゲーショングラフのホスト
- NavControllerを使用した遷移のトリガー
- ナビゲーションを追加する
- カスタム遷移アニメーションの作成
- まとめ
2018年のI / O会議で、GoogleはAndroidアプリ開発の新しいアプローチを発表しました。
Googleの公式の推奨事項は、アプリのメインエントリポイントとして機能する単一のアクティビティを作成し、アプリケーションの残りのコンテンツをフラグメントとして配信することです。
これらの異なるフラグメントトランザクションとライフサイクルをすべてジャグリングするという考えは悪夢のように聞こえるかもしれませんが、I / O 2018でGoogleはこの種の単一アクティビティ構造の採用を支援するように設計されたナビゲーションアーキテクチャコンポーネントも開始しました。
この記事では、ナビゲーションコンポーネントをプロジェクトに追加する方法と、Android Studioの新しいナビゲーションエディターの少しの助けを借りて、単一アクティビティ、複数フラグメントのアプリケーションをすばやく簡単に作成する方法を示します。フラグメントを作成して接続したら、ナビゲーションコンポーネントとエディターを使用して、完全にカスタマイズ可能なさまざまなトランジションアニメーションを作成することにより、Androidの標準的なフラグメントトランジションを改善します。
ナビゲーションアーキテクチャコンポーネントとは何ですか？
Android JetPackの一部であるナビゲーションアーキテクチャコンポーネントは、アプリケーションを通るさまざまなルートを視覚化し、特にフラグメントトランザクションの管理に関して、これらのルートの実装プロセスを簡素化します。
ナビゲーションコンポーネントを使用するには、ナビゲーショングラフを作成する必要があります。ナビゲーショングラフは、アプリのアクティビティとフラグメントの相互関係を記述するXMLファイルです。
ナビゲーショングラフは以下で構成されます。
- 目的地： ユーザーがナビゲートできる個々の画面
- 行動： ユーザーがアプリの目的地間を移動できるルート
Android Studioのナビゲーションエディターでプロジェクトのナビゲーショングラフを視覚的に表示できます。以下に、ナビゲーションエディターに表示される3つの目的地と3つのアクションで構成されるナビゲーショングラフがあります。
ナビゲーションコンポーネントは、1つのアクティビティがナビゲーショングラフを「ホスト」し、すべての目的地がフラグメントとして実装される、Googleの新しい推奨アプリ構造の実装を支援するように設計されています。この記事では、この推奨アプローチに従い、MainActivityと3つのフラグメント宛先で構成されるアプリケーションを作成します。
ただし、ナビゲーションコンポーネントは、この推奨構造を持つアプリケーション専用ではありません。プロジェクトには複数のナビゲーショングラフを含めることができ、フラグメントとアクティビティをそれらのナビゲーショングラフ内の宛先として使用できます。大規模で成熟したプロジェクトをナビゲーションコンポーネントに移行する場合、アプリのナビゲーションフローをグループに分ける方が簡単な場合があります。各グループは、「メイン」アクティビティ、いくつかの関連フラグメント、独自のナビゲーショングラフで構成されます。
Android Studioへのナビゲーションエディターの追加
ナビゲーションコンポーネントを最大限に活用できるように、Android Studio 3.2 Canary以降には新しいナビゲーションエディターが搭載されています。
このエディターを有効にするには：
- Android Studioメニューバーから[Android Studio> Preferences…]を選択します。
- 左側のメニューで[実験的]を選択します。
- まだ選択されていない場合は、[ナビゲーションエディターを有効にする]チェックボックスをオンにします。
- 「OK」をクリックします。
- Android Studioを再起動します。
プロジェクトの依存関係：ナビゲーションフラグメントとナビゲーションUI
選択した設定で新しいプロジェクトを作成し、そのbuild.gradleファイルを開いて、navigation-fragmentとnavigation-uiをプロジェクトの依存関係として追加します。
依存関係{implementation fileTree（dir：libs、include：）implementation com.android.support:appcompat-v7:28.0.0 implementation com.android.support.constraint：constraint-layout：1.1.3 //以下を追加//実装"android.arch.navigation：navigation-fragment：1.0.0-alpha05" // Navigation-UIはいくつかのヘルパー関数へのアクセスを提供//実装 "android.arch.navigation：navigation-ui：1.0.0-alpha05"実装com .android.support：support-v4：28.0.0 testImplementation junit：junit：4.12 androidTestImplementation com.android.support.test：runner：1.0.2 androidTestImplementation com.android.support.test.espresso：espresso-core：3.0.2 }
アプリのナビゲーションの視覚的な概要を取得します
ナビゲーショングラフを作成するには：
- Controlキーを押しながらプロジェクトの「res」ディレクトリをクリックし、「新規」>「Androidリソースディレクトリ」を選択します。
- 「リソースタイプ」ドロップダウンを開き、「ナビゲーション」を選択します。
- 「OK」を選択します。
- Controlキーを押しながら新しい「res / navigation」ディレクトリをクリックし、「新規」>「ナビゲーションリソースファイル」を選択します。
- 「リソースの種類」ドロップダウンを開き、「ナビゲーション」を選択します。
- このファイル名を付けます。 「nav_graph」を使用しています。
- 「OK」をクリックします。
「res / navigation / nav_graph」ファイルを開くと、ナビゲーションエディターが自動的に起動します。レイアウトエディターと同様に、ナビゲーションエディターは[デザイン]タブと[テキスト]タブに分かれています。
[テキスト]タブを選択すると、次のXMLが表示されます。
<？xml version = "1.0" encoding = "utf-8"？> // Navigation”は、すべてのナビゲーショングラフのルートノードです//
[デザイン]タブでは、アプリのナビゲーションを視覚的に構築および編集できます。
ナビゲーションエディターは、左から順に次の要素で構成されます。
- 宛先リスト： これは、この特定のナビゲーショングラフを構成するすべての宛先と、ナビゲーショングラフがホストされているアクティビティをリストします。
- グラフエディター： グラフエディタは、すべてのグラフの宛先とそれらを接続するアクションの視覚的な概要を提供します。
- 属性エディター： グラフエディタで宛先またはアクションを選択すると、「属性」パネルに現在選択されているアイテムに関する情報が表示されます。
ナビゲーショングラフの入力：目的地の追加
ナビゲーショングラフは現在空です。いくつかの目的地を追加しましょう。
既に存在するアクティビティまたはフラグメントを追加できますが、ナビゲーショングラフを使用して新しいフラグメントをすばやく簡単に作成することもできます。
- [新しい宛先]ボタンをクリックして、[空の宛先を作成]を選択します。
- [フラグメント名]フィールドに、フラグメントのクラス名を入力します。 「FirstFragment」を使用しています。
- [レイアウトXMLの作成]チェックボックスが選択されていることを確認します。
- 「フラグメントレイアウト名」フィールドに入力します。 「fragment_first」を使用しています。
- [完了]をクリックします。
FirstFragmentサブクラスと対応する「fragment_first.xml」レイアウトリソースファイルがプロジェクトに追加されます。 FirstFragmentは、ナビゲーショングラフの宛先としても表示されます。
ナビゲーションエディターでFirstFragmentを選択すると、「属性」パネルに、クラスの名前やコード内の他の場所でこの宛先を参照するために使用するIDなど、この宛先に関する情報が表示されます。
リンスして繰り返し、SecondFragmentとThirdFragmentをプロジェクトに追加します。
[テキスト]タブに切り替えると、これらの変更を反映するようにXMLが更新されていることがわかります。
すべてのナビゲーショングラフには開始先があります。これは、ユーザーがアプリを起動したときに表示される画面です。上記のコードでは、アプリの開始先としてFirstFragmentを使用しています。 [デザイン]タブに切り替えると、家のアイコンが表示されます。これは、グラフの開始先としてFirstFragmentもマークしています。
別の開始点を使用する場合は、問題のアクティビティまたはフラグメントを選択し、[属性]パネルから[開始先の設定]を選択します。
または、コードレベルでこの変更を行うことができます。
これで目的地ができました。現在表示しているフラグメントが常に明確になるように、いくつかのユーザーインターフェイス要素を追加しましょう。 各フラグメントに次を追加します。 各レイアウトリソースファイルのコードは次のとおりです。 次のステップは、アクションを介して目的地をリンクすることです。 単純なドラッグアンドドロップを使用して、ナビゲーションエディターでアクションを作成できます。フラグメントレイアウトの更新
Fragment_first.xml
Fragment_second.xml
Fragment_third.xml
アクションで目的地を接続する
FirstFragmentをSecondFragmentにリンクするアクション矢印があるはずです。この矢印をクリックして選択すると、「属性」パネルが更新され、システムに割り当てられたIDなど、このアクションに関する情報が表示されます。
この変更は、ナビゲーショングラフのXMLにも反映されます。
リンスして繰り返し、SecondFragmentをThirdFragmentにリンクするアクションと、ThirdFragmentをFirstFragmentにリンクするアクションを作成します。 ナビゲーショングラフはアプリの目的地とアクションを視覚的に表現しますが、これらのアクションを呼び出すには追加のコードが必要です。 ナビゲーショングラフを作成したら、そのアクティビティのレイアウトファイルにNavHostFragmentを追加して、アクティビティ内でホストする必要があります。このNavHostFragmentは、ナビゲーションを行うことができるコンテナーを提供し、ユーザーがアプリ内をナビゲートするときにフラグメントをスワップインおよびスワップアウトする役割も果たします。 プロジェクトの「activity_main.xml」ファイルを開き、NavHostFragmentを追加します。 <？xml version = "1.0" encoding = "utf-8"？> // NavHostFragment //として機能するフラグメントを作成します 上記のコードでは、app：defaultNavHost =” true”により、システムの「戻る」ボタンが押されるたびにナビゲーションホストがインターセプトできるため、アプリは常にナビゲーショングラフに記載されているナビゲーションを受け入れます。 次に、NavHostFragment内のナビゲーションのプロセスを管理する新しいコンポーネントであるNavControllerを実装する必要があります。 新しい画面に移動するには、Navigation.findNavControllerを使用してNavControllerを取得し、navigate（）メソッドを呼び出してから、移動先のIDまたは呼び出すアクションのいずれかを渡す必要があります。たとえば、ユーザーをFirstFragmentからSecondFragmentに転送する「action_firstFragment_to_secondFragment」を呼び出しています。 NavController navController = Navigation.findNavController（getActivity（）、R.id.my_nav_host_fragment）; navController.navigate（R.id.action_firstFragment_to_secondFragment）; ユーザーはボタンをクリックして新しい画面に移動するため、OnClickListenerも実装する必要があります。 これらの変更を行った後、FirstFragmentは次のようになります。 import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import androidx.navigation.NavController; import androidx.navigation.Navigation;パブリッククラスFirstFragment extends Fragment {public FirstFragment（）{} @Override public void onCreate（Bundle savedInstanceState）{super.onCreate（savedInstanceState）; if（getArguments（）！= null）{}} @Override public View onCreateView（LayoutInflater inflater、ViewGroup container、Bundle savedInstanceState）{return inflater.inflate（R.layout.fragment_first、container、false）; } @override public void onViewCreated（@NonNullビュービュー、@ NullableバンドルsavedInstanceState）{ボタンボタン=（ボタン）view.findViewById（R.id.button）; button.setOnClickListener（new View.OnClickListener（）{@Override public void onClick（View v）{NavController navController = Navigation.findNavController（getActivity（）、R.id.my_nav_host_fragment）; navController.navigate（R.id.action_firstFragment_to_secondFragment）; }}）; }} 次に、MainActivityを開き、次を追加します。 MainActivityは、フラグメントとアクティビティ間の通信を可能にするonFragmentInteraction（）メソッドも実装する必要があります。 import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.net.Uri; import android.view.MenuItem; import android.support.design.widget.NavigationView; import android.support.annotation.NonNull;パブリッククラスMainActivityはAppCompatActivityを拡張し、NavigationView.OnNavigationItemSelectedListener、SecondFragment.OnFragmentInteractionListenerを実装します{@Override protected void onCreate（Bundle savedInstanceState）{super.onCreate（savedInstanceState）; setContentView（R.layout.activity_main）; } @Override public boolean onNavigationItemSelected（@NonNull MenuItem item）{return false; } @override public void onFragmentInteraction（Uri uri）{}} アプリの残りのナビゲーションを実装するには、onViewCreatedブロックをコピーして貼り付け、いくつかの調整を行うだけで、正しいボタンウィジェットとナビゲーションアクションを参照することができます。 SecondFragmentを開き、次を追加します。 @Override public void onViewCreated（@NonNull View view、@Nullable Bundle savedInstanceState）{Button button =（Button）view.findViewById（R.id.button2）; button.setOnClickListener（new View.OnClickListener（）{@Override public void onClick（View v）{NavController navController = Navigation.findNavController（getActivity（）、R.id.my_nav_host_fragment）; navController.navigate（R.id.action_secondFragment_to_thirdFragment）; }}）; } 次に、ThirdFragmentのonViewCreatedブロックを更新します。 @Override public void onViewCreated（@NonNull View view、@Nullable Bundle savedInstanceState）{Button button =（Button）view.findViewById（R.id.button3）; button.setOnClickListener（new View.OnClickListener（）{@Override public void onClick（View v）{NavController navController = Navigation.findNavController（getActivity（）、R.id.my_nav_host_fragment）; navController.navigate（R.id.action_thirdFragment_to_firstFragment）; }}）; } 最後に、ThirdFragment.OnFragmentInteractionListenerインターフェースをMainActivityに追加することを忘れないでください： パブリッククラスMainActivityはAppCompatActivityを拡張し、NavigationView.OnNavigationItemSelectedListener、SecondFragment.OnFragmentInteractionListener、ThirdFragment.OnFragmentInteractionListener { AndroidデバイスまたはAndroid仮想デバイス（AVD）でこのプロジェクトを実行し、ナビゲーションをテストします。異なるボタンをクリックすることで、3つすべてのフラグメント間を移動できるはずです。 この時点で、ユーザーはアプリ内を移動できますが、各フラグメント間の遷移はかなり急激です。この最後のセクションでは、ナビゲーションコンポーネントを使用して、各アニメーションに異なるアニメーションを追加し、それらがよりスムーズに行われるようにします。 使用するすべてのアニメーションは、「res / anim」ディレクトリ内の独自のアニメーションリソースファイルで定義する必要があります。プロジェクトに「res / anim」ディレクトリがまだ含まれていない場合は、作成する必要があります。 フェードアウトアニメーションを定義することから始めましょう。 上記の手順を繰り返して、「slide_out_left」という名前の2番目のアニメーションリソースファイルを作成し、次を追加します。 「slide_out_right」という名前の3番目のファイルを作成し、次を追加します。 ナビゲーションエディターを使用して、これらのアニメーションをアクションに割り当てることができます。ユーザーがFirstFragmentからSecondFragmentに移動するたびにフェードアウトアニメーションを再生するには： ナビゲーショングラフのホスト
NavControllerを使用した遷移のトリガー
ナビゲーションを追加する
カスタム遷移アニメーションの作成
[デザイン]タブに切り替えると、このアニメーションが[action_firstFragment_to_secondFragment]に追加されていることがわかります。
AndroidデバイスまたはAVDで更新されたプロジェクトを実行します。 FirstFragmentからSecondFragmentに移動するたびに、フェードアウト効果が発生するはずです。 「属性」パネルをもう一度見ると、「Enter」だけがトランジションのアニメーションを適用できる部分ではないことがわかります。以下から選択することもできます。 トランジションのさまざまな部分にさまざまなアニメーションを適用して実験してみてください。 GitHubから完成したプロジェクトをダウンロードすることもできます。 この記事では、ナビゲーションアーキテクチャコンポーネントを使用して、カスタムトランジションアニメーションを備えた単一アクティビティの複数フラグメントアプリケーションを作成する方法について説明しました。ナビゲーションコンポーネントは、プロジェクトをこの種のアプリケーション構造に移行することを確信させましたか？以下のコメントでお知らせください！まとめ
