2022-2023/Lab/Lab4/4.3.2 - Kotlin - Jetpack Navigation.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "40165f19-2a24-410f-ae51-8a0f91aefdcf",
   "metadata": {},
   "source": [
    "## 4.3 Jetpack Navigation"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "894ecae3-4de1-4641-a7d5-d2b23fe5dec0",
   "metadata": {},
   "source": [
    "Aplikacja posłuży nam do zapoznania się z podstawami Jetpack Navigation."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "838c9f46-3399-40e3-9289-554c61afe7ec",
   "metadata": {},
   "source": [
    "W pierwszym kroku musimy dodać `Navigation` do projektu - przejdźmy do pliku `build.gradle (Module)`. Tutaj dodajemy dwie zależności"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6197900e-ed01-46cb-917a-6e24c6a5f070",
   "metadata": {},
   "outputs": [],
   "source": [
    "def nav_version = \"2.5.0\"\n",
    "implementation \"androidx.navigation:navigation-fragment:$nav_version\"\n",
    "implementation \"androidx.navigation:navigation-ui:$nav_version\""
   ]
  },
  {
   "cell_type": "markdown",
   "id": "24eed309-178e-4534-b985-5727c90ff070",
   "metadata": {},
   "source": [
    "Oraz plugin"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "99b1bc44-da41-4fe6-9be4-5fedbdc3b655",
   "metadata": {},
   "outputs": [],
   "source": [
    "plugins {\n",
    "    id 'com.android.application'\n",
    "    id 'org.jetbrains.kotlin.android'\n",
    "    id 'androidx.navigation.safeargs.kotlin'\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0ac54821-4855-4e52-8c14-4bc7038af75e",
   "metadata": {},
   "source": [
    "Następnie w pliku `build.gradle (Project)` dodajemy"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ddfd4f7d-6e6c-4e7e-9d9c-059d346ccf0a",
   "metadata": {},
   "outputs": [],
   "source": [
    "buildscript { // przed blokiem plugins\n",
    "    repositories {\n",
    "        google()\n",
    "    }\n",
    "    dependencies {\n",
    "        def nav_version = \"2.5.0\"\n",
    "        classpath \"androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version\"\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "98a5d45b-9945-4ed7-82b8-be46caa0b530",
   "metadata": {},
   "source": [
    "Dodajmy do projektu dwa fragmenty"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2e29f757-76ca-4b24-a72e-98dec82f881d",
   "metadata": {},
   "outputs": [],
   "source": [
    "class FragmentA : Fragment() {\n",
    "\n",
    "    override fun onCreateView(\n",
    "        inflater: LayoutInflater, container: ViewGroup?,\n",
    "        savedInstanceState: Bundle?\n",
    "    ): View? {\n",
    "        return inflater.inflate(R.layout.fragment_a, container, false)\n",
    "    }\n",
    "}\n",
    "\n",
    "class FragmentB : Fragment() {\n",
    "\n",
    "    override fun onCreateView(\n",
    "        inflater: LayoutInflater, container: ViewGroup?,\n",
    "        savedInstanceState: Bundle?\n",
    "    ): View? {\n",
    "        return inflater.inflate(R.layout.fragment_b, container, false)\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e50686c7-7ecd-415a-a2c9-d06c9046b5c2",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<FrameLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:tools=\"http://schemas.android.com/tools\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"match_parent\"\n",
    "    tools:context=\".FragmentA\">\n",
    "\n",
    "    <TextView\n",
    "        android:layout_width=\"match_parent\"\n",
    "        android:layout_height=\"match_parent\"\n",
    "        android:text=\"FRAGMENT A\"\n",
    "        android:textColor=\"@color/black\"\n",
    "        android:textSize=\"36sp\"\n",
    "        android:layout_gravity=\"center_horizontal\"\n",
    "        android:gravity=\"center\"/>\n",
    "\n",
    "    <com.google.android.material.floatingactionbutton.FloatingActionButton\n",
    "        android:id=\"@+id/fabA\"\n",
    "        android:layout_width=\"wrap_content\"\n",
    "        android:layout_height=\"wrap_content\"\n",
    "        android:layout_margin=\"16dp\"\n",
    "        android:clickable=\"true\"\n",
    "        android:src=\"@android:drawable/arrow_up_float\"\n",
    "        android:contentDescription=\"FAB\" />\n",
    "</FrameLayout>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "df00dccc-313b-4832-b66a-7f09d1c88600",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<FrameLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:tools=\"http://schemas.android.com/tools\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"match_parent\"\n",
    "    tools:context=\".FragmentB\">\n",
    "\n",
    "    <TextView\n",
    "        android:layout_width=\"match_parent\"\n",
    "        android:layout_height=\"match_parent\"\n",
    "        android:text=\"FRAGMENT B\"\n",
    "        android:textColor=\"@color/black\"\n",
    "        android:textSize=\"36sp\"\n",
    "        android:layout_gravity=\"center_horizontal\"\n",
    "        android:gravity=\"center\"/>\n",
    "\n",
    "    <com.google.android.material.floatingactionbutton.FloatingActionButton\n",
    "        android:id=\"@+id/fabB\"\n",
    "        android:layout_width=\"wrap_content\"\n",
    "        android:layout_height=\"wrap_content\"\n",
    "        android:layout_margin=\"16dp\"\n",
    "        android:clickable=\"true\"\n",
    "        android:src=\"@android:drawable/arrow_up_float\"\n",
    "        android:contentDescription=\"FAB\" />\n",
    "</FrameLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9771f46e-d4b1-48ca-b5de-3d500ffc94c7",
   "metadata": {},
   "source": [
    "W aplikacji oba fragmenty będą hostowane przez `MainActivity` - dodamy poruszanie się pomiędzy fragmentami oraz przekazanie pomiędzy nimi danych. Rozpocznijmy od dodania komponentu navigation. Otwieramy menu kontekstowe na katalogu `res`, wybieramy **New -> Android Resource File**, następnie jako `Rresource type` wybieramy `Navigation`."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1e1df5c7-d887-4092-80cf-ad07c5a74178",
   "metadata": {},
   "source": [
    "<img src=\"https://media2.giphy.com/media/rT4AlrQTeyMcvxTtWJ/giphy.gif?cid=790b76113217a5c7c107d9af885c7436f4e307b4deecb3ea&rid=giphy.gif&ct=g\" width=\"350\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8d563213-931b-49a4-868e-b200476e0d71",
   "metadata": {},
   "source": [
    "Dodajmy nasze dwa fragmenty do `Navigation` - wybieram **New Destination**"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5070b417-d5bd-440b-9e80-68ad54204f48",
   "metadata": {},
   "source": [
    "<img src=\"https://media0.giphy.com/media/SauLtu5l6x2jTx2i9h/giphy.gif?cid=790b7611691e19128a2195d8e2acc46b0710f6dc29ccbf71&rid=giphy.gif&ct=g\" width=\"350\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3c5dad7d-22f3-435e-88f0-ad3779472ad5",
   "metadata": {},
   "source": [
    "Następnie zdefiniujemy dwie akcje - przejście z `FragmentA` do `FragmentB` i przejście z `FragmentB` do `FragmentA`"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c809fb49-e20a-48b4-830a-9429c05d3f72",
   "metadata": {},
   "source": [
    "Przechodząc do zakładki `Code` widzimy że mamy dodane do nawigacji dwa fragmenty oraz zdefiniowane dwie akcje."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1ce1c9e5-e723-455e-beab-208dd320a4d8",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<navigation xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n",
    "    xmlns:tools=\"http://schemas.android.com/tools\"\n",
    "    android:id=\"@+id/navigation\"\n",
    "    app:startDestination=\"@id/fragmentA\">\n",
    "\n",
    "    <fragment\n",
    "        android:id=\"@+id/fragmentA\"\n",
    "        android:name=\"pl.edu.uwr.pum.jetpacknavigationjava.FragmentA\"\n",
    "        android:label=\"fragment_a\"\n",
    "        tools:layout=\"@layout/fragment_a\" >\n",
    "        <action\n",
    "            android:id=\"@+id/to_fragmentB\"\n",
    "            app:destination=\"@id/fragmentB\" />\n",
    "    </fragment>\n",
    "    <fragment\n",
    "        android:id=\"@+id/fragmentB\"\n",
    "        android:name=\"pl.edu.uwr.pum.jetpacknavigationjava.FragmentB\"\n",
    "        android:label=\"fragment_b\"\n",
    "        tools:layout=\"@layout/fragment_b\" >\n",
    "        <action\n",
    "            android:id=\"@+id/to_fragmentA\"\n",
    "            app:destination=\"@id/fragmentA\" />\n",
    "    </fragment>\n",
    "</navigation>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ade49c40-07e1-4692-97a0-06bf34177691",
   "metadata": {},
   "source": [
    "W kolejnym kroku umieścimy utworzoną nawigację w głównej aktywności. Przejdźmy do pliku `activity_main.xml`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c94f500e-853d-4a85-8471-33228acf5628",
   "metadata": {},
   "outputs": [],
   "source": [
    "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n",
    "<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n",
    "    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n",
    "    xmlns:tools=\"http://schemas.android.com/tools\"\n",
    "    android:layout_width=\"match_parent\"\n",
    "    android:layout_height=\"match_parent\"\n",
    "    tools:context=\".MainActivity\">\n",
    "\n",
    "    <androidx.fragment.app.FragmentContainerView\n",
    "        android:id=\"@+id/fragmentContainerView\"\n",
    "        android:name=\"androidx.navigation.fragment.NavHostFragment\"\n",
    "        android:layout_width=\"409dp\"\n",
    "        android:layout_height=\"729dp\"\n",
    "        app:defaultNavHost=\"true\"\n",
    "        app:layout_constraintBottom_toBottomOf=\"parent\"\n",
    "        app:layout_constraintEnd_toEndOf=\"parent\"\n",
    "        app:layout_constraintStart_toStartOf=\"parent\"\n",
    "        app:layout_constraintTop_toTopOf=\"parent\"\n",
    "        app:navGraph=\"@navigation/navigation\" />\n",
    "</androidx.constraintlayout.widget.ConstraintLayout>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "83afae44-21d3-40a5-944c-eb89bf2cd5c8",
   "metadata": {},
   "source": [
    "Umoliwmy teraz przejście pomiędzy fragmentami - przejdźmy do `FragmentA` i w metodzie `onCreateView` zaimplementujmy metodę `onClick` naszego przycisku FAB."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0b653baf-cb3e-44be-80d5-b71d2f351ec3",
   "metadata": {},
   "outputs": [],
   "source": [
    "view.findViewById<FloatingActionButton>(R.id.fabA).setOnClickListener { }"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a9954539-3515-43b8-a1c9-beb6a2a230c3",
   "metadata": {},
   "source": [
    "W pierwszym kroku powiązujemy zdefiniowaną w `navigation.xml` akcję przejścia z `FragemntA` do `FragmentB` z polem typu `NavDirections`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4831009b-a30d-4744-9fb0-711ce45c8900",
   "metadata": {},
   "outputs": [],
   "source": [
    "val action = FragmentADirections.toFragmentB()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b6b22dd3-9758-4820-b962-eb4e50323c3a",
   "metadata": {},
   "source": [
    "Klasa `FragmentADirections` jest klasą utworzoną automatycznie - zawiera ona metody powiązane ze zdefiniowanymi akcjami z pliku `navigation`"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f8ab74cc-3dd4-4773-bdcb-7d1b3d828c53",
   "metadata": {},
   "source": [
    "Następnie z klasy `Navigation` wywołujemy metodę `findNavControler`, która jako argument przyjmuje obiekt `View` - metoda ta zwraca `NavControler` powiązany z obietem `View` podanym w argumencie. Na koniec wywołujemy metodę `navigate` podając `action` jako argument."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "123219d2-3152-4635-8794-5f1d3056ac72",
   "metadata": {},
   "outputs": [],
   "source": [
    "Navigation.findNavController(view).navigate(action)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c4806363-5609-4627-961d-573b48226904",
   "metadata": {},
   "source": [
    "Możemy przetestować aplikację."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6754e8e4-2bfb-47bb-afd9-dab5a8a9516b",
   "metadata": {},
   "source": [
    "<img src=\"https://media2.giphy.com/media/SNlQKJgamzMqJ1P07l/giphy.gif?cid=790b7611999ca5eb8b95dd6d1e5d99374fd2179e95cfb8e4&rid=giphy.gif&ct=g\" width=\"150\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "53167a61-9ec8-4b78-8cae-5489b4b1fd4c",
   "metadata": {},
   "source": [
    "Możemy przejść z `FragmentA` na `FragmentB`. Zwróćmy uwagę że po naciśnięciu systemowego przycisku 'wstecz' nie opuszczamy aplikacji a powracamy do wcześniej odwiedzonego fragmentu."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2536c9a8-b702-4ce0-b841-bdfabe573ba8",
   "metadata": {},
   "source": [
    "Analogicznie zaimplementujmy nawigację wc odwrotną stronę."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "740503ad-7078-46e0-a527-0b9d4ea754bc",
   "metadata": {},
   "outputs": [],
   "source": [
    "class FragmentB : Fragment() {\n",
    "\n",
    "    override fun onCreateView(\n",
    "        inflater: LayoutInflater, container: ViewGroup?,\n",
    "        savedInstanceState: Bundle?\n",
    "    ): View? {\n",
    "        val view = inflater.inflate(R.layout.fragment_b, container, false)\n",
    "\n",
    "        view.findViewById<FloatingActionButton>(R.id.fabB).setOnClickListener {\n",
    "            val action = FragmentBDirections.toFragmentA()\n",
    "            Navigation.findNavController(view).navigate(action)\n",
    "        }\n",
    "        \n",
    "        return view\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a04f8765-5b41-4a8e-96fb-fc4e66efac14",
   "metadata": {},
   "source": [
    "<img src=\"https://media4.giphy.com/media/GCR61ZZK0DUQiMMNnL/giphy.gif?cid=790b76119275b562d7caf362c7c59b22110e155367f1ff96&rid=giphy.gif&ct=g\" width=\"150\" />"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b4bb2083-6486-492a-ad65-cab3c03e3e02",
   "metadata": {},
   "source": [
    "Ostatnim elementem w tej aplikacji będzie przekazanie argumentu z `FragmentA` do `FragmentB` i wyświetlenie go w polu `TextView`. W tym celu utworzymy obiekt typu `Bundle` w którym przekażemy argument."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c3162bae-7744-4ada-8b5c-9c6dd733a333",
   "metadata": {},
   "outputs": [],
   "source": [
    "class FragmentA : Fragment() {\n",
    "\n",
    "    override fun onCreateView(\n",
    "        inflater: LayoutInflater, container: ViewGroup?,\n",
    "        savedInstanceState: Bundle?\n",
    "    ): View? {\n",
    "        val view = inflater.inflate(R.layout.fragment_a, container, false)\n",
    "\n",
    "        view.findViewById<FloatingActionButton>(R.id.fabA).setOnClickListener {\n",
    "            //val action = FragmentADirections.toFragmentB()\n",
    "            \n",
    "            val args = Bundle()\n",
    "            args.putInt(\"key\", 5)\n",
    "            Navigation.findNavController(view).navigate(R.id.to_fragmentB, args)\n",
    "            \n",
    "            Navigation.findNavController(view).navigate(action)\n",
    "        }\n",
    "\n",
    "        return view\n",
    "    }\n",
    "}"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "112b86b9-3a3c-45b7-95ac-1dbb61ea4f76",
   "metadata": {},
   "source": [
    "W metodzie `navigate` tym razem wprost odwołujemy się do zdefiniowanej akcji `to_fragmentB` i jako deugi argument podajemy nasz obiekt `Bundle`.\n",
    "\n",
    "Przejdźmy do `FragmentB` i odbierzmy dane - do metodzy `onCreateView` dodajemy"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fd6b7f7f-d1e5-4d98-9d69-00a00972cb7a",
   "metadata": {},
   "outputs": [],
   "source": [
    "view.findViewById<TextView>(R.id.textViewB).text = arguments?.getInt(\"key\").toString()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "88512cb9-3027-499f-8e42-eb982c10dcbf",
   "metadata": {},
   "source": [
    "Metoda `arguments` pozwala odebrać przekazany obiekt."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c217a523-fb31-4ee8-b5d9-49ac1e3677b8",
   "metadata": {},
   "source": [
    "<img src=\"https://media0.giphy.com/media/xNGay43XL19rl7xQ2b/giphy.gif?cid=790b7611e3be23a0dca6dbfd13497708cacbfa1c7c9f9966&rid=giphy.gif&ct=g\" width=\"150\" />"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "34a2ea84-1ac4-4936-9d07-702a59885d2c",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Kotlin",
   "language": "kotlin",
   "name": "kotlin"
  },
  "language_info": {
   "codemirror_mode": "text/x-kotlin",
   "file_extension": ".kt",
   "mimetype": "text/x-kotlin",
   "name": "kotlin",
   "nbconvert_exporter": "",
   "pygments_lexer": "kotlin",
   "version": "1.8.0-RC"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}