เนื้อหา

• องค์ประกอบสถาปัตยกรรมการนำทางคืออะไร
• การเพิ่ม Navigation Editor ไปยัง Android Studio
• การพึ่งพาโครงการ: ส่วนการนำทางและ UI การนำทาง
• รับภาพรวมของการนำทางแอปของคุณ
• การเติมกราฟการนำทาง: การเพิ่มจุดหมาย
• การอัพเดตโครงร่างส่วนของคุณ
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• เชื่อมโยงจุดหมายปลายทางของคุณเข้ากับการกระทำ
• โฮสต์กราฟการนำทาง
• วิกฤติการเปลี่ยนผ่านด้วย NavController
• เพิ่มการนำทางมากขึ้น
• การสร้างภาพเคลื่อนไหวการเปลี่ยนแปลงที่กำหนดเอง
• ห่อ

ในระหว่างการประชุม I / O ของปี 2018 Google ประกาศแนวทางใหม่สำหรับการพัฒนาแอพ Android

คำแนะนำอย่างเป็นทางการของ Google คือการสร้างกิจกรรมเดียวที่ทำหน้าที่เป็นจุดเข้าหลักของแอปจากนั้นส่งเนื้อหาส่วนที่เหลือของแอปพลิเคชันของคุณเป็นชิ้นส่วน

ในขณะที่ความคิดของการเล่นกลธุรกรรมส่วนต่าง ๆ เหล่านั้นและวงจรชีวิตอาจดูเหมือนฝันร้ายที่ I / O 2018 Google ยังได้เปิดตัว Navigation Architecture Component ซึ่งได้รับการออกแบบมาเพื่อช่วยให้คุณสามารถนำโครงสร้างกิจกรรมเดียวมาใช้ได้

ในบทความนี้เราจะแสดงวิธีการเพิ่มองค์ประกอบการนำทางลงในโครงการของคุณและวิธีการใช้งานเพื่อสร้างแอปพลิเคชันกิจกรรมเดียวแบบหลายส่วนได้อย่างรวดเร็วและง่ายดายด้วยความช่วยเหลือเล็กน้อยจากตัวแก้ไขการนำทางใหม่ของ Android Studio เมื่อคุณสร้างและเชื่อมต่อชิ้นส่วนของคุณแล้วเราจะปรับปรุงการเปลี่ยนส่วนมาตรฐานของ Android โดยใช้ส่วนประกอบการนำทางและเครื่องมือแก้ไขเพื่อสร้างภาพเคลื่อนไหวช่วงการเปลี่ยนภาพที่ปรับแต่งได้อย่างเต็มที่

องค์ประกอบสถาปัตยกรรมการนำทางคืออะไร

เป็นส่วนหนึ่งของ Android JetPack ส่วนประกอบการนำทางสถาปัตยกรรมช่วยให้คุณเห็นภาพเส้นทางที่แตกต่างผ่านแอปพลิเคชันของคุณและทำให้กระบวนการในการนำเส้นทางเหล่านี้ไปใช้ง่ายขึ้น

ในการใช้องค์ประกอบการนำทางคุณจะต้องสร้างกราฟการนำทางซึ่งเป็นไฟล์ XML ที่อธิบายถึงกิจกรรมและชิ้นส่วนของแอปที่เกี่ยวข้องกัน

กราฟการนำทางประกอบด้วย:

• จุดหมายปลายทาง: แต่ละหน้าจอที่ผู้ใช้สามารถนำทางไป
• ดำเนินการ: เส้นทางที่ผู้ใช้สามารถใช้ระหว่างปลายทางของแอปของคุณ

คุณสามารถดูการแสดงภาพกราฟการนำทางของโครงการในเครื่องมือแก้ไขการนำทางของ Android Studio ด้านล่างนี้คุณจะพบกราฟการนำทางที่ประกอบด้วยจุดหมายสามแห่งและการกระทำสามอย่างที่ปรากฏในเครื่องมือแก้ไขการนำทาง

องค์ประกอบการนำทางได้รับการออกแบบมาเพื่อช่วยให้คุณสามารถใช้โครงสร้างแอปที่แนะนำใหม่ของ Google โดยที่กิจกรรม "โฮสต์" เดียวในกราฟการนำทางและปลายทางทั้งหมดของคุณจะถูกนำไปใช้เป็นชิ้นส่วน ในบทความนี้เราจะทำตามวิธีการที่แนะนำนี้และสร้างแอปพลิเคชันที่ประกอบด้วย MainActivity และปลายทางสามส่วน

อย่างไรก็ตามองค์ประกอบการนำทางไม่ได้มีไว้สำหรับแอปพลิเคชันที่มีโครงสร้างที่แนะนำนี้เท่านั้น โครงการสามารถมีกราฟการนำทางได้หลายแบบและคุณสามารถใช้ชิ้นส่วนและกิจกรรมเป็นจุดหมายปลายทางภายในกราฟการนำทางเหล่านั้น หากคุณกำลังย้ายโครงการขนาดใหญ่ที่ครบกำหนดไปยังองค์ประกอบการนำทางคุณอาจพบว่าการแยกการนำทางของแอปไปยังกลุ่มต่างๆนั้นเป็นเรื่องที่ง่ายขึ้นโดยที่แต่ละกลุ่มประกอบด้วยกิจกรรม“ หลัก” ชิ้นส่วนที่เกี่ยวข้องบางส่วนและกราฟการนำทางของตนเอง

การเพิ่ม Navigation Editor ไปยัง Android Studio

เพื่อช่วยให้คุณได้รับประโยชน์สูงสุดจากองค์ประกอบการนำทาง Android Studio 3.2 Canary และคุณลักษณะที่สูงกว่าจะเป็นตัวแก้ไขการนำทางใหม่

วิธีเปิดใช้งานเครื่องมือแก้ไขนี้:

• เลือก "Android Studio> การตั้งค่า ... " จากแถบเมนู Android Studio
• ในเมนูด้านซ้ายให้เลือก“ ทดลอง”
• หากยังไม่ได้เลือกให้เลือกช่องทำเครื่องหมาย "เปิดใช้งานเครื่องมือแก้ไขการนำทาง"

• คลิก“ ตกลง”
• รีสตาร์ท Android Studio

การพึ่งพาโครงการ: ส่วนการนำทางและ UI การนำทาง

สร้างโครงการใหม่ด้วยการตั้งค่าที่คุณเลือกจากนั้นเปิดไฟล์ build.gradle และเพิ่มการนำทางส่วนและ navigation-UI เป็นการอ้างอิงโครงการ:

การพึ่งพา {การนำไปใช้งาน fileTree (dir: libs, include:) การนำไปใช้งาน com.android.support:appcompat-v7:28.0.0 การนำไปใช้งาน com.android.support.constraint: ข้อ จำกัด เลย์เอาต์: 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: นักวิ่ง: 1.0.2 androidTestImplementation com.android.support.test.espresso: เอสเพรสโซแกน: 3.0.2 }

รับภาพรวมของการนำทางแอปของคุณ

วิธีสร้างกราฟการนำทาง:

• ควบคุมคลิกที่ไดเรกทอรี“ res” ของโปรเจ็กต์ของคุณและเลือก“ ใหม่> Android Resource Directory”
• เปิดเมนูแบบเลื่อนลง“ ประเภททรัพยากร” และเลือก“ นำทาง”
• เลือก“ ตกลง”
• คลิกควบคุมไดเรกทอรี“ res / การนำทาง” ใหม่ของคุณแล้วเลือก“ ใหม่> ไฟล์ทรัพยากรการนำทาง”
• เปิดเมนูแบบเลื่อนลง“ ประเภททรัพยากร” และเลือก“ นำทาง”

• ตั้งชื่อไฟล์นี้ ฉันใช้“ nav_graph”
• คลิก“ ตกลง”

เปิดไฟล์“ res / navigation / nav_graph” ของคุณแล้วตัวแก้ไขการนำทางจะเปิดขึ้นโดยอัตโนมัติ คล้ายกับเครื่องมือแก้ไขเค้าโครงตัวแก้ไขการนำทางจะแบ่งออกเป็นแท็บ "ออกแบบ" และ "ข้อความ"

หากคุณเลือกแท็บ "ข้อความ" คุณจะเห็น XML ต่อไปนี้:

<? xml version = "1.0" encoding = "utf-8"?> // การนำทาง ’เป็นโหนดรูทของกราฟการนำทางทุกรูปแบบ //

แท็บ "ออกแบบ" เป็นที่ที่คุณสามารถสร้างและแก้ไขการนำทางของแอปด้วยสายตา

จากซ้ายไปขวาตัวแก้ไขการนำทางประกอบด้วย:

• รายการปลายทาง: รายการนี้จะแสดงปลายทางทั้งหมดที่ทำขึ้นในกราฟการนำทางนี้โดยเฉพาะรวมถึงกิจกรรมที่จัดทำกราฟการนำทาง
• เครื่องมือแก้ไขกราฟ: เครื่องมือแก้ไขกราฟให้ภาพรวมที่มองเห็นได้ของปลายทางทั้งหมดของกราฟและการทำงานที่เชื่อมโยงกัน
• ตัวแก้ไขแอททริบิว: หากคุณเลือกปลายทางหรือการดำเนินการใน Graph Editor แผง "คุณสมบัติ" จะแสดงข้อมูลเกี่ยวกับรายการที่เลือกในปัจจุบัน

การเติมกราฟการนำทาง: การเพิ่มจุดหมาย

กราฟการนำทางของเราว่างเปล่าในขณะนี้ มาเพิ่มจุดหมายบางอัน

คุณสามารถเพิ่มกิจกรรมหรือชิ้นส่วนที่มีอยู่แล้ว แต่คุณสามารถใช้กราฟการนำทางเพื่อสร้างชิ้นส่วนใหม่ได้อย่างรวดเร็วและง่ายดาย:

• คลิกปุ่ม“ ปลายทางใหม่” แล้วเลือก“ สร้างปลายทางที่ว่างเปล่า”

• ในฟิลด์“ ชื่อส่วน” ป้อนชื่อชั้นของชิ้นส่วนของคุณ ฉันใช้“ FirstFragment”
• ตรวจสอบให้แน่ใจว่าได้เลือกช่องทำเครื่องหมาย "สร้างโครงร่าง XML"
• กรอกข้อมูลในฟิลด์“ ชื่อโครงร่างชิ้นส่วน”; ฉันกำลังใช้“ fragment_first”
• คลิก“ เสร็จสิ้น”

คลาสย่อย FirstFragment และไฟล์รีซอร์สโครงร่าง“ fragment_first.xml” ที่สอดคล้องกันจะถูกเพิ่มในโครงการของคุณ FirstFragment จะปรากฏเป็นปลายทางในกราฟการนำทาง

หากคุณเลือก FirstFragment ในตัวแก้ไขการนำทางแผง "แอตทริบิวต์" จะแสดงข้อมูลบางอย่างเกี่ยวกับปลายทางนี้เช่นชื่อคลาสและรหัสที่คุณจะใช้เพื่ออ้างอิงปลายทางนี้ในรหัสของคุณ

ล้างและทำซ้ำเพื่อเพิ่ม SecondFragment และ ThirdFragment ในโครงการของคุณ

เปลี่ยนเป็นแท็บ "ข้อความ" และคุณจะเห็นว่า XML ได้รับการอัปเดตเพื่อแสดงถึงการเปลี่ยนแปลงเหล่านี้

กราฟการนำทางทุกแผ่นมีปลายทางเริ่มต้นซึ่งเป็นหน้าจอที่แสดงเมื่อผู้ใช้เปิดแอปของคุณ ในรหัสข้างต้นเราใช้ FirstFragment เป็นปลายทางเริ่มต้นของแอป หากคุณเปลี่ยนไปที่แท็บ "ออกแบบ" คุณจะสังเกตเห็นไอคอนบ้านซึ่งจะทำเครื่องหมาย FirstFragment เป็นปลายทางเริ่มต้นของกราฟ

หากคุณต้องการใช้จุดเริ่มต้นที่แตกต่างกันให้เลือกกิจกรรมหรือส่วนที่เป็นปัญหาจากนั้นเลือก "ตั้งค่าปลายทางเริ่มต้น" จากแผง "คุณสมบัติ"

หรือคุณสามารถทำการเปลี่ยนแปลงนี้ได้ที่ระดับรหัส:

การอัพเดตโครงร่างส่วนของคุณ

ตอนนี้เรามีจุดหมายปลายทางแล้วให้เพิ่มองค์ประกอบส่วนต่อประสานผู้ใช้บางส่วนเพื่อให้ชัดเจนว่าเป็นชิ้นส่วนใดที่เรากำลังดูอยู่ในขณะนี้

ฉันจะเพิ่มสิ่งต่อไปนี้ลงในแต่ละส่วน

• TextView ที่มีชื่อส่วนของ
• ปุ่มที่อนุญาตให้ผู้ใช้นำทางจากส่วนหนึ่งไปยังอีกส่วน

นี่คือรหัสสำหรับแต่ละไฟล์ทรัพยากรเลย์เอาต์:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

เชื่อมโยงจุดหมายปลายทางของคุณเข้ากับการกระทำ

ขั้นตอนต่อไปคือการเชื่อมโยงจุดหมายปลายทางของเราผ่านการกระทำ

คุณสามารถสร้างการดำเนินการใน Navigation Editor โดยใช้การลากและวางอย่างง่าย:

• ตรวจสอบให้แน่ใจว่าได้เลือกแท็บ "การออกแบบ" ของ Editor
• โฮเวอร์เหนือด้านขวาของปลายทางที่คุณต้องการนำทาง จากซึ่งในกรณีนี้คือ FirstFragment วงกลมควรปรากฏขึ้น
• คลิกและลากเคอร์เซอร์ของคุณไปยังปลายทางที่คุณต้องการนำทาง ไปยังซึ่งเป็น SecondFragment เส้นสีน้ำเงินควรปรากฏขึ้น เมื่อไฮไลต์ SecondFragment เป็นสีน้ำเงินให้ปล่อยเคอร์เซอร์เพื่อสร้างลิงค์ระหว่างปลายทางเหล่านี้

ตอนนี้ควรมีลูกศรการดำเนินการเชื่อมโยง FirstFragment เพื่อ SecondFragment คลิกเพื่อเลือกลูกศรนี้และแผง“ คุณสมบัติ” จะอัปเดตเพื่อแสดงข้อมูลบางอย่างเกี่ยวกับการกระทำนี้รวมถึง ID ที่ระบบกำหนด

การเปลี่ยนแปลงนี้จะปรากฏใน XML ของกราฟการนำทางด้วย:

… … …

ล้างและทำซ้ำเพื่อสร้างการดำเนินการเชื่อมโยง SecondFragment กับ ThirdFragment และการกระทำที่เชื่อมโยง ThirdFragment ไปยัง FirstFragment

โฮสต์กราฟการนำทาง

กราฟการนำทางแสดงภาพปลายทางและแอคชั่นของแอพของคุณ แต่การเรียกใช้แอคชันเหล่านี้ต้องใช้รหัสเพิ่มเติม

เมื่อคุณสร้างกราฟการนำทางคุณจะต้องโฮสต์มันไว้ในกิจกรรมโดยเพิ่ม NavHostFragment ลงในไฟล์เลย์เอาต์ของกิจกรรมนั้น NavHostFragment นี้จัดให้มีคอนเทนเนอร์ซึ่งการนำทางสามารถเกิดขึ้นได้และจะต้องรับผิดชอบในการแลกเปลี่ยนแฟรกเมนต์เข้าและออกเมื่อผู้ใช้นำทางไปรอบ ๆ แอปของคุณ

เปิดไฟล์“ activity_main.xml” ของโครงการและเพิ่ม NavHostFragment

<? xml version = "1.0" encoding = "utf-8"?> // สร้างส่วนที่จะทำหน้าที่เป็น NavHostFragment //

ในรหัสด้านบนแอป: defaultNavHost =” true” อนุญาตให้โฮสต์การนำทางดักเมื่อใดก็ตามที่กดปุ่ม "ย้อนกลับ" ของระบบดังนั้นแอปจึงให้เกียรติการนำทางที่อธิบายไว้ในกราฟการนำทางของคุณเสมอ

วิกฤติการเปลี่ยนผ่านด้วย NavController

ต่อไปเราต้องใช้ NavController ซึ่งเป็นส่วนประกอบใหม่ที่รับผิดชอบในการจัดการกระบวนการนำทางภายใน NavHostFragment

ในการนำทางไปยังหน้าจอใหม่คุณต้องดึงข้อมูล NavController โดยใช้ Navigation.findNavController เรียกใช้วิธีการนำทาง () จากนั้นส่งผ่าน ID ของปลายทางที่คุณนำทางไปหรือการกระทำที่คุณต้องการเรียกใช้ ตัวอย่างเช่นฉันกำลังเรียกใช้“ action_firstFragment_to_secondFragment” ซึ่งจะส่งผู้ใช้จาก FirstFragment ไปยัง SecondFragment:

NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment);

ผู้ใช้จะย้ายไปที่หน้าจอใหม่โดยคลิกที่ปุ่มดังนั้นเราจึงจำเป็นต้องใช้ OnClickListener

หลังจากทำการเปลี่ยนแปลงเหล่านี้แล้ว FirstFragment ควรมีลักษณะดังนี้:

นำเข้า android.os.Bundle; นำเข้า android.support.annotation.NonNull; นำเข้า android.support.annotation.Nullable; นำเข้า android.support.v4.app.Fragment; นำเข้า android.view.LayoutInflater; นำเข้า android.view.View; นำเข้า android.view.ViewGroup; นำเข้า android.widget.Button; นำเข้า androidx.navigation.NavController; นำเข้า androidx.navigation.Navigation; คลาสสาธารณะ FirstFragment ขยายแฟรกเมนต์ {public FirstFragment () {} @Override โมฆะสาธารณะ onCreate (บันเดิลที่บันทึกไว้InstanceState) {super.onCreate (hiddenInstanceState); if (getArguments ()! = null) {}} @Override มุมมองสาธารณะ onCreateView (LayoutInflater inflater, ViewGroup container, Bundle hiddenInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override โมฆะสาธารณะ onViewCreated (มุมมอง @NonNull, @Nullable Bundle ที่บันทึกไว้InstanceState) {ปุ่มปุ่ม = (ปุ่ม) view.findViewById (R.id.button); button.setOnClickListener (ใหม่ ViewOnClickListener () {@Override เป็นโมฆะสาธารณะ onClick (ดู v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); }}); }}

ถัดไปเปิด MainActivity ของคุณและเพิ่มสิ่งต่อไปนี้:

• NavigationView.OnNavigationItemSelectedListener: ผู้ฟังสำหรับจัดการเหตุการณ์ในรายการการนำทาง
• SecondFragment.OnFragmentInteractionListener: อินเทอร์เฟซที่สร้างขึ้นเมื่อคุณสร้าง SecondFragment ผ่านตัวแก้ไขการนำทาง

MainActivity ยังจำเป็นต้องใช้เมธอด onFragmentInteraction () ซึ่งอนุญาตการสื่อสารระหว่างแฟรกเมนต์และกิจกรรม

นำเข้า android.support.v7.app.AppCompatActivity; นำเข้า android.os.Bundle; android.net.Uri นำเข้า นำเข้า android.view.MenuItem; นำเข้า android.support.design.widget.NavigationView; นำเข้า android.support.annotation.NonNull; MainActivity ระดับสาธารณะขยาย AppCompatActivity ใช้ NavigationViewOnNavigationItemSelectedListener, SecondFragmentOnFragmentInteractionListener {@Override โมฆะการป้องกัน onCreate (บันทึกที่บันทึกไว้ InstanceState) {super.onCreate setContentView (R.layout.activity_main); } @Override บูลีนสาธารณะ onNavigationItemSelected (รายการในเมนู @NonNull) {return false; } @Override โมฆะสาธารณะ onFragmentInteraction (Uri uri) {}}

เพิ่มการนำทางมากขึ้น

ในการใช้การนำทางส่วนที่เหลือของแอปของเราเราเพียงแค่คัดลอก / วางบล็อก onView สร้างและปรับแต่งเล็กน้อยเพื่อให้เราอ้างอิงวิดเจ็ตปุ่มที่ถูกต้องและการดำเนินการนำทาง

เปิด SecondFragment ของคุณและเพิ่มรายการต่อไปนี้:

@Override เป็นโมฆะสาธารณะ onViewCreated (มุมมอง @NonNull, Bundle @Nullable ที่บันทึกไว้InstanceState) {ปุ่มปุ่ม = (ปุ่ม) view.findViewById (R.id.button2); button.setOnClickListener (ใหม่ ViewOnClickListener () {@Override เป็นโมฆะสาธารณะ onClick (ดู v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); }}); }

จากนั้นอัปเดตบล็อก onViewCreated ของ ThirdFragment:

@Override เป็นโมฆะสาธารณะ onViewCreated (มุมมอง @NonNull, Bundle @Nullable ที่บันทึกไว้InstanceState) {ปุ่มปุ่ม = (ปุ่ม) view.findViewById (R.id.button3); button.setOnClickListener (ใหม่ ViewOnClickListener () {@Override เป็นโมฆะสาธารณะ onClick (ดู v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); }}); }

ท้ายที่สุดอย่าลืมเพิ่มอินเทอร์เฟซ ThirdFragmentOnFragmentInteractionListener ใน MainActivity ของคุณ:

MainActivity ระดับสาธารณะขยาย AppCompatActivity ใช้ NavigationViewOnNavigationItemSelectedListener, SecondFragmentOnFragmentInteractionListener, ThirdFragmentInFactionmentInteractionListener {

เรียกใช้โครงการนี้บนอุปกรณ์ Android ของคุณหรืออุปกรณ์เสมือน Android (AVD) และทดสอบการนำทาง คุณควรจะสามารถนำทางระหว่างส่วนทั้งสามได้โดยคลิกที่ปุ่มที่แตกต่างกัน

การสร้างภาพเคลื่อนไหวการเปลี่ยนแปลงที่กำหนดเอง

ณ จุดนี้ผู้ใช้สามารถย้ายไปรอบ ๆ แอปของคุณ แต่การเปลี่ยนระหว่างส่วนย่อยนั้นค่อนข้างกระทันหัน ในส่วนสุดท้ายนี้เราจะใช้องค์ประกอบการนำทางเพื่อเพิ่มภาพเคลื่อนไหวที่แตกต่างกันในแต่ละช่วงการเปลี่ยนภาพเพื่อให้เกิดการเคลื่อนไหวที่ราบรื่นยิ่งขึ้น

ภาพเคลื่อนไหวทุกภาพที่คุณต้องการใช้จะต้องกำหนดไว้ในไฟล์ทรัพยากรภาพเคลื่อนไหวของตัวเองภายในไดเรกทอรี“ res / anim” หากโครงการของคุณไม่มีไดเรกทอรี“ res / anim” คุณจะต้องสร้าง:

• ควบคุมคลิกที่โฟลเดอร์ "res" ของโปรเจ็กต์ของคุณและเลือก“ ใหม่> Android Resource Directory”
• ตั้งชื่อไดเรกทอรีนี้ว่า "แอนิเมชั่น"
• เปิดเมนูแบบเลื่อนลง“ ประเภททรัพยากร” และเลือก“ ภาพเคลื่อนไหว”
• คลิก“ ตกลง”

มาเริ่มกันโดยการกำหนดนิเมชั่นที่เลือนหายไป:

• ควบคุมคลิกไดเรกทอรี "res / anim" ของโครงการของคุณ
• เลือก“ ใหม่> ไฟล์ทรัพยากรแอนิเมชั่น”
• ตั้งชื่อไฟล์นี้ว่า "fade_out"
• เปิดไฟล์“ fade_out” ของคุณและเพิ่มรายการต่อไปนี้:

ทำซ้ำขั้นตอนข้างต้นเพื่อสร้างไฟล์ทรัพยากรแอนิเมชั่นที่สองชื่อ“ slide_out_left” แล้วเพิ่มรายการต่อไปนี้:

สร้างไฟล์ที่สามชื่อ“ slide_out_right” และเพิ่มรายการต่อไปนี้:

ตอนนี้คุณสามารถกำหนดภาพเคลื่อนไหวเหล่านี้ให้กับการกระทำของคุณผ่านตัวแก้ไขการนำทางในการเล่นแอนิเมชันที่หายไปเมื่อใดก็ตามที่ผู้ใช้นำทางจาก FirstFragment ไปยัง SecondFragment:

• เปิดกราฟการนำทางของคุณและตรวจสอบให้แน่ใจว่าได้เลือกแท็บ“ ออกแบบ”
• คลิกเพื่อเลือกการกระทำที่เชื่อมโยง FirstFragment กับ SecondFragment
• ในแผง“ คุณสมบัติ” คลิกเพื่อขยายส่วน“ การเปลี่ยนภาพ” โดยค่าเริ่มต้นทุกรายการในส่วนนี้ควรถูกตั้งค่าเป็น "ไม่มี"
• เปิดดรอปดาวน์“ Enter” ซึ่งควบคุมภาพเคลื่อนไหวที่เล่นเมื่อใดก็ตามที่ SecondFragment ทำการเปลี่ยนไปด้านบนของสแต็คหลัง เลือกภาพเคลื่อนไหว“ fade_out”

หากคุณเปลี่ยนไปที่แท็บ“ ออกแบบ” คุณจะเห็นว่ามีการเพิ่มภาพเคลื่อนไหวนี้ใน“ action_firstFragment_to_secondFragment”

เรียกใช้โครงการที่อัปเดตบนอุปกรณ์ Android หรือ AVD ของคุณ ตอนนี้คุณควรพบเอฟเฟกต์สีซีดจางเมื่อใดก็ตามที่คุณนำทางจาก FirstFragment ไปยัง SecondFragment

หากคุณดูที่แผง "แอททริบิว" อีกครั้งคุณจะเห็นว่า "Enter" ไม่ใช่เพียงส่วนหนึ่งของการเปลี่ยนผ่านที่คุณสามารถนำภาพเคลื่อนไหวไปใช้ คุณยังสามารถเลือกจาก:

• ออก: ภาพเคลื่อนไหวที่เล่นเมื่อมีแฟรกเมนต์กำลังออกจากสแต็ก
• ป๊อปป้อน: อนิเมชั่นที่เล่นเมื่อมีแฟรกเมนต์กระจายอยู่ด้านบนสุดของสแต็ก
• ทางออกป๊อป: ภาพเคลื่อนไหวที่เล่นเมื่อมีการแยกส่วนกำลังเปลี่ยนเป็นด้านล่างของสแต็ก

ลองทำการทดลองโดยใช้แอนิเมชั่นต่าง ๆ กับส่วนต่าง ๆ ของช่วงการเปลี่ยนภาพของคุณ คุณยังสามารถดาวน์โหลดโครงการที่เสร็จสมบูรณ์จาก GitHub

ห่อ

ในบทความนี้เราจะดูว่าคุณสามารถใช้องค์ประกอบสถาปัตยกรรมการนำทางเพื่อสร้างแอปพลิเคชันกิจกรรมเดียวหลายส่วนพร้อมด้วยภาพเคลื่อนไหวการเปลี่ยนแปลงที่กำหนดเองได้อย่างไร องค์ประกอบการนำทางทำให้คุณมั่นใจในการโยกย้ายโครงการของคุณไปยังโครงสร้างแอปพลิเคชันประเภทนี้หรือไม่? แจ้งให้เราทราบในความคิดเห็นด้านล่าง!