ມືໃຫມ່ຫັດໃຊ້ Android Navigation Component (Kotlin)

ມືໃຫມ່ຫັດໃຊ້ Android Navigation Component (Kotlin)

ສະບາຍດີ ກັບທຸກຄົນທີ່ກໍາລັງຊອກຫາຫຍັງກະຕາມທີ່ພາຫລົງເຂົ້າມາໃນບົດຄວາມນີ້ຫວັງຈະພົບກັບສິ່ງທີ່ຕ້ອງການ. ນັບໄດ້ວ່າ ບົດຄວາມນີ້ເປັນງານຂຽນຊິ້ນທໍາອິດທີ່ຂຽນຂື້ນມາໃນຊີວິດກະວ່າໄດ້ ຖ້າມີຫຍັງຜິດພາດປະການໃດ ສາມາດຕິຊົມໄດ້ ເພື່ອຜູ້ຂຽນຈະໄດ້ນໍາໄປພັດທະນາ.

Navigation Component

ສໍາລັບທີ່ຄົນສົງໃສວ່າ Navigation Component ແມ່ນຫຍັງ? ຜູ້ຂຽນຈະສະຫລຸບ ຕາມການນໍາໃຊ້ຈິງຈາກປະສົບການຂອງຕົນໃຫ້ ເຂົ້າໃຈງ່າຍທີ່ສຸດ.

Activity ສ່ວນຄວບຄຸມສະແດງຫນ້າຕາຂອງແອ໋ບໂທລະສັບຄາຍກັບຫນ້າເຈ້ຍຫນຶ່ງ ເຊັ່ນ: ປຸ່ມກົດ, ຮູບພາບ …
Fragment ສ່ວນຄວບຄຸມສະແດງອີກຮູບແບບຫນຶ່ງເຊິ່ງມັນຈະທັບຊ້ອນສະແດງໃນ Activity ອີກຮອບ.

Navigation Component ເປັນ Navigation ຮູບແບບຫນຶ່ງ ທີ່ນໍາໃຊ້ ປ່ຽນ Fragment ຫນຶ່ງ ໄປ Fragment ໃຫມ່ ໂດຍເມື່ອກ່ອນຈະໃຊ້ Fragment Transaction ໂດຍສ່ວນຕົວພົບບັນຫາເວລານໍາໄປປະຍຸກໃຊ້, ແຕ່ຕົວ Navigation Component ຈະຊ່ວຍລົດຄວາມຫຍຸ້ງຍາກ ແລະ ເຫັນພາບໄດ້ຫລາຍກວ່າ.

ເນື່ອງຈາກ ຫນ້າຕາແອ໋ບໂທລະສັບ ໃນຍຸກປະຈຸບັນເປັນເລື່ອງສໍາຄັນຈຶ່ງມີການພັດທະນາ ສ່ວນສະແດງ UI ມາໃຫ້ຕອບໂຈດໃຫ້ນັກພັດທະນາຂຽນ View ຫນ້າຕາແອ໋ບໄດ້ງ່າຍຂຶ້ນ. Activity ພຽງຢ່າງດຽວອາດບໍ່ຕອບໂຈດ Fragment ຈຶ່ງໄດ້ເຂົ້າມາຊ່ວຍ ແລະ ການຈັດການມັນຈຶ່ງເປັນເລື່ອງທ້າທ້າຍ

ຕົວຢ່າງ navigation component 101

ເນື່ອງຈາກການອະທິບາຍເປັນຄໍາເວົ້າອາດຈະເຮັດໃຫ້ເຂົ້າໃຈຍາກດັ່ງນັ້ນທາງຜູ້ຂຽນຈຶ່ງມີ mini project ໃຫ້ທົດລອງໄປນໍາກັນ ຊື່ navigation component 101 ໂດຍຈະສາທິດການນໍາໃຊ້ Navigation ແລະ ກໍານົດ fragment ທີ່ຈະກົດກັບ. ເວົ້າມາຍາວແລ້ວໄປເລີ່ມກັນດີກວ່າ…..

Install Android Studio & New Project

ກ່ອນອື່ນ ໃນຕົວຢ່າງນີ້ຜູ້ຂຽນ ໄດ້ໃຊ້ android studio ໃນການອະທິບາຍດັ່ງນັ້ນ, ຈໍາເປັນຢ່າງຍິ່ງທີ່ໃນເຄື່ອງຄອມຂອງຜູ້ອ່ານຈໍາເປັນຕ້ອງມີຕິດເຄື່ອງກ່ອນ. ສໍາລັບຜູ້ທີ່ບໍ່ມີສາມາດເຂົ້າໄປດາວໂຫລດໄດ້ ທີ່ນີ້

ເມື່ອຕິດຕັ້ງສໍາເລັດແລ້ວ ເລີ່ມກັນຈາກການສ້າງ ໂປເຈັກໃຫມ່

ຫນ້ານີ້ແມ່ນໃຫ້ເລືອກປະເພດຂອງ Activity ຕັ້ງຕົ້ນ ໃນນີ້ເຮົາເລືອກ Empty Activity ເພາະເປັນຫນ້າວ່າງໆງ່າຍຕໍ່ການເລີ່ມຮຽນກັນການສັບສົນ

ໃສ່ຊື່ໂປເຈັກ ແລ້ວ ເລືອກ ພາສາທີ່ໃຊ້ເປັນ Kotlin ແລ້ວກົດ Finish

ໂປເຈັກຈະສ້າງ MainActivity.kt ແລະ activity_main.xml ມາໃຫ້ແລ້ວ ເຮົາລໍຖ້າ android studio ດາວໂຫລດ config ຕ່າງໆ (ສ່ວນນີ້ແມ່ນຄອມຕ້ອງຕໍ່ອິນເຕີເນັດ)

MainActivity.kt ສ່ວນທີ່ເຮົາຂຽນໂຄຼດໃສ່ຄຸມການເຮັດວຽກ
activity_main.xml ສ່ວນຫນ້າຕາທີ່ຈະສະແດງໃນ ໂທລະສັບ

ກຽມຄວາມພ້ອມກ່ອນລົງມື (ສ້າງ File ຕ່າງໆ)

ຫລັງຈາກລໍຖ້າ gradle ດາວໂຫລດ config ຕ່າງໆ ແລ້ວ ໃຫ້ໄປເພີ່ມ dependency ຂອງ Navigation Component ໃນ gradle scripts > build.gradle (Module: app) ເພື່ອທີ່ຈະສາມາດເອີ້ນໃຊ້ມັນໄດ້ (ເຊິ່ງເປັນແກ່ນຫລັກຂອງບົດຄວາມນີ້ຖ້າບໍ່ເພີ່ນຈະບໍ່ສາມາດໄປຕໍ່ສ່ວນອື່ນໆໄດ້)

implementation “androidx.navigation:navigation-fragment-ktx:2.3.0”
implementation “androidx.navigation:navigation-ui-ktx:2.3.0”

ເມື່ອເພີ່ນແລ້ວໃຫ່ກົດ Sync Now ທໍາການດາວໂຫລດ

ເມື່ອໂປເຈັກແກ່ນຫລັກ ແມ່ນ Navigation Component ກະຕ້ອງມີ Fragmentເປັນຂອງຕາຍສະນັ້ນເຮົາມາ ສ້າງ Fragment ກັນ

ຄີກຂວາໃສ່ Folder ທີ່ຕັ້ງຂອງ MainActivity.kt, New > Fragment > Fragment (Blank)

ກໍານົດຊື່ໃຫ້ Fragment ແລ້ວກົດ Finish

ຕົວ Android Studio ຈະທໍາການສ້າງ File: FirstFragment.kt ແລະ fragment_first.xml ໃຫ້ (ພາຍໃນ FirstFragment.kt ໃນນີ້ຕົວຜູ້ຂຽນໄດ້ລົບສ່ວນໂຄຼດບໍ່ຈໍາເປັນອອກ) ເມື່ອສໍາເລັດໃຫ້ເຮັດຊ້ໍາ ສ້າງ SecondFragment ແລະ ThirdFragment ຂຶ້ນມາ ເມື່ອສໍາເລັດເຮົາກະພ້ອມໄປຂັ້ນຕອນຕໍ່ໄປ

ສ້າງ Navigation

1. ມາຮອດແກ່ນຫລັກຂອງບົດຄວາມນີ້ແລ້ວ ນັ້ນຄືການເຮັດ Navigation ໂດຍເຮົາຈະນໍາ ທັງສາມ Fragment ທີ່ໄດ້ສ້າງໄວ້ມາປະກອບໃສ່ກັນ.

ສ້າງ folder naviagtion ແລະ ເກັບ navigation resource file ໄວ້ໃນນັ້ນ res > navigation > nav_main.xml

2. ເພີ່ມທັງສາມ Fragment ເຂົ້າໄປໃນ nav_main.xml ແລ້ວທໍາການລາກເສັ້ນທິດທາງ ຈາກ FirstFragment ໄປ Second, Third ຖືວ່າສໍາເລັດສ່ວນກໍານົດ ຫນ້າທີ່ຈະໄປຕໍ່ໄປຂອງ App ດ້ານສະແດງຜົນ (ແຕ່ມັນຍັງເຮັດວຽກບໍ່ໄດ້ຈົນກວ່າເຮົາຈະໄປຂຽນໂຄຼດໃສ່)

3. ກໍາກັບການເຮັດວຽກໄວ້ໃນ MainActivity.kt ແລະ FirstFragment.kt

ກ່ອນອື່ນເຂົ້າໄປທີ່ res > layout > activity_main.xml ເພື່ອສ້າງ tag fragment ເພື່ອ nav_main ທີ່ເຮົາສ້າງໄປເກັບໄວ້ໃນນັ້ນ (ຫນ້າຫລັກໃນນັ້ນຈະແມ່ນ firstfragment)

app:navGraph ກໍານົດຊື່ navigation ທີ່ຈະໃຊ້ໃນນີ້ແມ່ນ nav_main

4. ເພີ່ມປຸ່ມກົດໄປຫນ້າຕໍ່ໄປ

5. ຜູກປຸ່ມກົດ ແລະ ກໍານົດຫນ້າທີ່ຈະໄປໃນແຕ່ປຸ່ມ

var secondButton = view.findViewByID(R.id.secondBtn)

(ຕັ້ງຊື່ປຸ່ມ ແລະ ຜູກກັບ ສ່ວນ xml)

setOnClickListener (ເມື່ອກົດປຸ່ມໃຫ້ເກີດ ເຫດການຂ້າງໃນ)

findNavController (ໂຕຊອກຫາແລະກໍານົດຫນ້າທີ່ຈະໄປຫາ)

ຫນ້າຕາໂຄດສ່ວນ nav_main

action ໃນນີ້ແມ່ນ ເສັ້ນລູກສອນ ທີ່ເຮົາລາກ ໄປ Fragment ອື່ນ
app:destination ປາຍທາງຫນ້າທີ່ action ກໍານົດໄປ

ສະຫລຸບ

Navigation Component ແມ່ນການເລືອກ Fragment ຫລື ຫນ້າທີ່ຈະໄປຂອງແອບ ໃນຮູບແບບທີ່ເປັນແຜນພາບໃນ nav_main ເຮັດໃຫ້ຮູ້ໄດ້ທັນທີວ່າຫນ້າຕໍ່ໄປແມ່ນຫຍັງ. ໂດຍຈາກເດີມ ແມ່ນເຮົາຕ້ອງໄດ້ຂຽນໂຄຼດໃສ່ແລ້ວ ຖ້າຫາກລືມ ຕ້ອງໄດ້ໄປນັ່ງໄລ່ໂຄຼດອີກຈະຫນ້ານີ້ຈະໄປໃສ ແກ້ບັນຫາໄດ້ສໍາລັບສາຍລືມຄືຜູ້ຂຽນ, ນອກຈາກນັ້ນຍັງສາມາດສົ່ງ argument ແລະ ກໍານົດຫນ້າກັບໄດ້ ແຕ່ສ່ວນນີ້ ຕ້ອງເອົາໄວ້ໂອກາດຫນ້າ ^-^

https://github.com/jo-comet/NavigationComponent101